Add SVG compat presets and Export SVG (LaTeX) menu item

Author: milanofthe

src/lib/components/contextMenuBuilders.ts

@@ -415,6 +415,18 @@ function buildCanvasMenu(
 					console.error('SVG export failed:', e);
 				}
 			}
+		},
+		{
+			label: 'Export SVG (LaTeX)',
+			icon: 'image',
+			action: async () => {
+				try {
+					const svg = await exportToSVG({ compat: 'inkscape' });
+					downloadSvg(svg, 'pathview-graph-latex.svg');
+				} catch (e) {
+					console.error('SVG export (LaTeX) failed:', e);
+				}
+			}
 		}
 	];
 

src/lib/export/dom2svg/index.d.ts

@@ -6,6 +6,18 @@ interface FontConfig {
 }
 /** Font mapping: family name → URL string, single config, or array of configs for multiple weights/styles */
 type FontMapping = Record<string, string | FontConfig | FontConfig[]>;
+/** SVG compatibility configuration flags */
+interface SvgCompatConfig {
+    useClipPathForOverflow: boolean;
+    stripFilters: boolean;
+    stripBoxShadows: boolean;
+    stripMaskImage: boolean;
+    stripTextShadows: boolean;
+    avoidStyleAttributes: boolean;
+    stripXmlSpace: boolean;
+}
+/** SVG compatibility preset */
+type SvgCompat = 'full' | 'inkscape' | SvgCompatConfig;
 /** Options for domToSvg() */
 interface DomToSvgOptions {
     /** Map of font-family → URL or FontConfig for text-to-path conversion */
@@ -26,6 +38,8 @@ interface DomToSvgOptions {
      *  with nested CSS transforms (e.g. SvelteFlow, React Flow) where
      *  the default behaviour would double-apply transforms. */
     flattenTransforms?: boolean;
+    /** SVG compatibility preset or custom config (default: 'full') */
+    compat?: SvgCompat;
 }
 /** Internal render context passed through the tree */
 interface RenderContext {
@@ -37,6 +51,8 @@ interface RenderContext {
     idGenerator: IdGenerator;
     /** Options from the caller */
     options: DomToSvgOptions;
+    /** Resolved SVG compatibility config */
+    compat: SvgCompatConfig;
     /** Font cache (available when textToPath is enabled) */
     fontCache?: FontCache;
     /** Current inherited opacity */
@@ -72,4 +88,4 @@ interface DomToSvgResult {
  */
 declare function domToSvg(element: Element, options?: DomToSvgOptions): Promise<DomToSvgResult>;
 
-export { type DomToSvgOptions, type DomToSvgResult, type FontConfig, type FontMapping, domToSvg };
+export { type DomToSvgOptions, type DomToSvgResult, type FontConfig, type FontMapping, type SvgCompat, type SvgCompatConfig, domToSvg };

src/lib/export/dom2svg/index.js

@@ -173,7 +173,8 @@ export async function exportToSVG(options: ExportOptions = {}): Promise<string>
 			exclude: EXCLUDE_SELECTORS,
 			flattenTransforms: true,
 			textToPath: true,
-			fonts: KATEX_FONTS
+			fonts: KATEX_FONTS,
+			compat: opts.compat
 		});
 
 		// Crop SVG to the content area

src/lib/export/dom2svg/index.js.map

@@ -3,17 +3,21 @@
  */
 
 import { EXPORT_PADDING } from '$lib/constants/dimensions';
+import type { SvgCompat } from '../dom2svg/index.js';
 
 /** SVG export options */
 export interface ExportOptions {
 	/** Background style: 'transparent' or 'solid' */
 	background?: 'transparent' | 'solid';
 	/** Padding around content in pixels */
 	padding?: number;
+	/** SVG compatibility preset (default: 'full') */
+	compat?: SvgCompat;
 }
 
 /** Default export options */
 export const DEFAULT_OPTIONS: Required<ExportOptions> = {
 	background: 'transparent',
-	padding: EXPORT_PADDING
+	padding: EXPORT_PADDING,
+	compat: 'full'
 };