@emasoft/svg-matrix 1.0.26 → 1.0.27

package/README.md

@@ -255,6 +255,36 @@ svgm --show-plugins
 
 Run `svgm --help` for all options.
 
+### Namespace Preservation
+
+Preserve vendor-specific namespaces during optimization:
+
+```bash
+# Preserve Inkscape/Sodipodi namespaces (layers, guides, document settings)
+svgm --preserve-ns inkscape input.svg -o output.svg
+
+# Preserve multiple vendor namespaces
+svgm --preserve-ns inkscape,illustrator input.svg -o output.svg
+
+# Available namespaces: inkscape, sodipodi, illustrator, sketch, ai, serif, vectornator, figma
+```
+
+### SVG 2.0 Polyfills
+
+Enable browser compatibility for SVG 2.0 features:
+
+```bash
+# Add polyfills for mesh gradients and hatches
+svgm --svg2-polyfills input.svg -o output.svg
+
+# Combine with namespace preservation
+svgm --preserve-ns inkscape --svg2-polyfills input.svg -o output.svg
+```
+
+Supported SVG 2.0 features:
+- **Mesh gradients** (`<meshGradient>`) - Rendered via canvas fallback
+- **Hatches** (`<hatch>`) - Converted to SVG 1.1 patterns
+
 ---
 
 ### `svg-matrix` - Advanced SVG Processing
@@ -360,6 +390,33 @@ const fixed = await fixInvalidSvg('broken.svg');
 console.log(fixed.svg);       // Fixed SVG string
 ```
 
+### Inkscape Support Module
+
+```javascript
+import { InkscapeSupport } from '@emasoft/svg-matrix';
+
+// Check if element is an Inkscape layer
+InkscapeSupport.isInkscapeLayer(element);
+
+// Find all layers in document
+const layers = InkscapeSupport.findLayers(doc);
+
+// Get document settings from sodipodi:namedview
+const settings = InkscapeSupport.getNamedViewSettings(doc);
+```
+
+### SVG 2.0 Polyfills Module
+
+```javascript
+import { SVG2Polyfills } from '@emasoft/svg-matrix';
+
+// Detect SVG 2.0 features in document
+const features = SVG2Polyfills.detectSVG2Features(doc);
+
+// Inject polyfills into document
+SVG2Polyfills.injectPolyfills(doc);
+```
+
 ### Exclusive Features (Not in SVGO)
 
 | Function | Description |

package/bin/svg-matrix.js

@@ -91,6 +91,7 @@ let currentOutputFile = null; // Track for cleanup on interrupt
  * @property {boolean} resolveMarkers - Expand marker references
  * @property {boolean} resolvePatterns - Expand pattern fills
  * @property {boolean} bakeGradients - Bake gradientTransform into coordinates
+ * @property {string[]} preserveNamespaces - Array of namespace prefixes to preserve
  */
 
 const DEFAULT_CONFIG = {
@@ -120,6 +121,7 @@ const DEFAULT_CONFIG = {
   bezierArcs: 8,              // Bezier arcs for circles/ellipses (multiple of 4; 8=π/4 optimal)
   e2eTolerance: '1e-10',      // E2E verification tolerance (tighter with more segments)
   preserveVendor: false,      // If true, preserve vendor-prefixed properties and editor namespaces
+  preserveNamespaces: [],     // Array of namespace prefixes to preserve (e.g., ['inkscape', 'sodipodi'])
 };
 
 /** @type {CLIConfig} */
@@ -603,6 +605,8 @@ ${boxLine(`  ${colors.dim}--no-patterns${colors.reset}           Skip pattern ex
 ${boxLine(`  ${colors.dim}--no-gradients${colors.reset}          Skip gradient transform baking`, W)}
 ${boxLine(`  ${colors.dim}--preserve-vendor${colors.reset}       Keep vendor prefixes and editor namespaces`, W)}
 ${boxLine(`                          ${colors.dim}(inkscape, sodipodi, -webkit-*, etc.)${colors.reset}`, W)}
+${boxLine(`  ${colors.dim}--preserve-ns <list>${colors.reset}     Preserve specific namespaces (comma-separated)`, W)}
+${boxLine(`                          ${colors.dim}Example: --preserve-ns inkscape,sodipodi${colors.reset}`, W)}
 ${boxLine('', W)}
 ${boxDivider(W)}
 ${boxLine('', W)}
@@ -628,6 +632,7 @@ ${boxLine('', W)}
 ${boxLine(`  ${colors.green}svg-matrix flatten${colors.reset} input.svg -o output.svg`, W)}
 ${boxLine(`  ${colors.green}svg-matrix flatten${colors.reset} ./svgs/ -o ./out/ --transform-only`, W)}
 ${boxLine(`  ${colors.green}svg-matrix flatten${colors.reset} --list files.txt -o ./out/ --no-patterns`, W)}
+${boxLine(`  ${colors.green}svg-matrix flatten${colors.reset} input.svg -o out.svg --preserve-ns inkscape,sodipodi`, W)}
 ${boxLine(`  ${colors.green}svg-matrix convert${colors.reset} input.svg -o output.svg -p 10`, W)}
 ${boxLine(`  ${colors.green}svg-matrix info${colors.reset} input.svg`, W)}
 ${boxLine('', W)}
@@ -867,6 +872,7 @@ function processFlatten(inputPath, outputPath) {
       flattenTransforms: true, // Always flatten transforms
       bakeGradients: config.bakeGradients,
       removeUnusedDefs: true,
+      preserveNamespaces: config.preserveNamespaces, // Pass namespace preservation to pipeline
       // NOTE: Verification is ALWAYS enabled - precision is non-negotiable
     };
 
@@ -1221,8 +1227,8 @@ async function testToolboxFunction(fnName, originalContent, originalSize, output
 
     const startTime = Date.now();
     const doc = parseSVG(originalContent);
-    // Pass preserveVendor option from config to toolbox functions
-    await fn(doc, { preserveVendor: config.preserveVendor });
+    // Pass preserveVendor and preserveNamespaces options from config to toolbox functions
+    await fn(doc, { preserveVendor: config.preserveVendor, preserveNamespaces: config.preserveNamespaces });
     const output = serializeSVG(doc);
     const outputSize = Buffer.byteLength(output);
     result.timeMs = Date.now() - startTime;
@@ -1385,6 +1391,16 @@ function parseArgs(args) {
       case '--no-gradients': cfg.bakeGradients = false; break;
       // Vendor preservation option
       case '--preserve-vendor': cfg.preserveVendor = true; break;
+      // Namespace preservation option (comma-separated list)
+      case '--preserve-ns': {
+        const namespaces = args[++i];
+        if (!namespaces) {
+          logError('--preserve-ns requires a comma-separated list of namespaces');
+          process.exit(CONSTANTS.EXIT_ERROR);
+        }
+        cfg.preserveNamespaces = namespaces.split(',').map(ns => ns.trim()).filter(ns => ns.length > 0);
+        break;
+      }
       // E2E verification precision options
       case '--clip-segments': {
         const segs = parseInt(args[++i], 10);

package/bin/svgm.js

@@ -20,6 +20,7 @@ import { join, dirname, basename, extname, resolve, isAbsolute } from 'path';
 import { VERSION } from '../src/index.js';
 import * as SVGToolbox from '../src/svg-toolbox.js';
 import { parseSVG, serializeSVG } from '../src/svg-parser.js';
+import { injectPolyfills, detectSVG2Features } from '../src/svg2-polyfills.js';
 
 // ============================================================================
 // CONSTANTS
@@ -62,6 +63,8 @@ const DEFAULT_CONFIG = {
   exclude: [],
   quiet: false,
   datauri: null,
+  preserveNamespaces: [],
+  svg2Polyfills: false,
   showPlugins: false,
 };
 
@@ -222,7 +225,7 @@ async function optimizeSvg(content, options = {}) {
     const fn = SVGToolbox[pluginName];
     if (fn && typeof fn === 'function') {
       try {
-        await fn(doc, { precision: options.precision });
+        await fn(doc, { precision: options.precision, preserveNamespaces: options.preserveNamespaces });
       } catch (e) {
         // Skip failed optimizations silently
       }
@@ -235,7 +238,7 @@ async function optimizeSvg(content, options = {}) {
       const fn = SVGToolbox[pluginName];
       if (fn && typeof fn === 'function') {
         try {
-          await fn(doc, { precision: options.precision });
+          await fn(doc, { precision: options.precision, preserveNamespaces: options.preserveNamespaces });
         } catch (e) {
           // Skip failed optimizations silently
         }
@@ -243,6 +246,14 @@ async function optimizeSvg(content, options = {}) {
     }
   }
 
+  // Inject SVG 2 polyfills if requested
+  if (options.svg2Polyfills) {
+    const features = detectSVG2Features(doc);
+    if (features.meshGradients.length > 0 || features.hatches.length > 0) {
+      injectPolyfills(doc);
+    }
+  }
+
   let result = serializeSVG(doc);
 
   // Pretty print if requested, otherwise minify (SVGO default behavior)
@@ -384,6 +395,10 @@ Options:
                              regular expression pattern.
   -q, --quiet                Only output error messages
   --show-plugins             Show available plugins and exit
+  --preserve-ns <NS,...>     Preserve vendor namespaces (inkscape, sodipodi,
+                             illustrator, figma, etc.). Comma-separated.
+  --svg2-polyfills           Inject JavaScript polyfills for SVG 2 features
+                             (mesh gradients, hatches) for browser support
   --no-color                 Output plain text without color
   -h, --help                 Display help for command
 
@@ -517,6 +532,15 @@ function parseArgs(args) {
         cfg.showPlugins = true;
         break;
 
+      case '--preserve-ns':
+        i++;
+        cfg.preserveNamespaces = args[i].split(',').map(s => s.trim().toLowerCase());
+        break;
+
+      case '--svg2-polyfills':
+        cfg.svg2Polyfills = true;
+        break;
+
       case '--no-color':
         // Already handled in colors initialization
         break;
@@ -561,6 +585,8 @@ async function main() {
     eol: config.eol,
     finalNewline: config.finalNewline,
     datauri: config.datauri,
+    preserveNamespaces: config.preserveNamespaces,
+    svg2Polyfills: config.svg2Polyfills,
   };
 
   // Handle string input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emasoft/svg-matrix",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Arbitrary-precision matrix, vector and affine transformation library for JavaScript using decimal.js",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

@@ -5,7 +5,7 @@
  * SVG path conversion, and 2D/3D affine transformations using Decimal.js.
  *
  * @module @emasoft/svg-matrix
- * @version 1.0.26
+ * @version 1.0.27
  * @license MIT
  *
  * @example
@@ -46,6 +46,8 @@ import * as MeshGradient from './mesh-gradient.js';
 import * as SVGParser from './svg-parser.js';
 import * as FlattenPipeline from './flatten-pipeline.js';
 import * as Verification from './verification.js';
+import * as InkscapeSupport from './inkscape-support.js';
+import * as SVG2Polyfills from './svg2-polyfills.js';
 import { Logger, LogLevel, setLogLevel, getLogLevel as getLoggerLevel, enableFileLogging, disableFileLogging } from './logger.js';
 
 // SVGO-inspired precision modules
@@ -85,7 +87,7 @@ Decimal.set({ precision: 80 });
  * Library version
  * @constant {string}
  */
-export const VERSION = '1.0.26';
+export const VERSION = '1.0.27';
 
 /**
  * Default precision for path output (decimal places)
@@ -120,6 +122,7 @@ export { ClipPathResolver, MaskResolver, PatternResolver };
 export { UseSymbolResolver, MarkerResolver };
 export { MeshGradient };
 export { SVGParser, FlattenPipeline, Verification };
+export { InkscapeSupport, SVG2Polyfills };
 
 // ============================================================================
 // SVGO-INSPIRED PRECISION MODULES
@@ -577,6 +580,8 @@ export default {
   SVGParser,
   FlattenPipeline,
   Verification,
+  InkscapeSupport,
+  SVG2Polyfills,
 
   // Logging
   Logger,

package/src/inkscape-support.js

@@ -0,0 +1,248 @@
+/**
+ * Inkscape/Sodipodi Support Module
+ *
+ * Provides utilities for preserving and manipulating Inkscape-specific SVG features
+ * including layers, guides, document settings, and arc parameters.
+ *
+ * @module inkscape-support
+ */
+
+// Inkscape namespace URIs
+export const INKSCAPE_NS = 'http://www.inkscape.org/namespaces/inkscape';
+export const SODIPODI_NS = 'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd';
+
+// Inkscape-specific element and attribute prefixes
+export const INKSCAPE_PREFIXES = ['inkscape', 'sodipodi'];
+
+/**
+ * Check if an element is an Inkscape layer.
+ * Inkscape uses `<g inkscape:groupmode="layer">` for layers.
+ *
+ * @param {Object} element - SVG element to check
+ * @returns {boolean} True if the element is an Inkscape layer
+ */
+export function isInkscapeLayer(element) {
+  if (!element || element.tagName !== 'g') return false;
+  return element.getAttribute('inkscape:groupmode') === 'layer';
+}
+
+/**
+ * Get the label of an Inkscape layer.
+ *
+ * @param {Object} element - Inkscape layer element
+ * @returns {string|null} Layer label or null if not set
+ */
+export function getLayerLabel(element) {
+  return element?.getAttribute('inkscape:label') || null;
+}
+
+/**
+ * Find all Inkscape layers in a document.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Array<{element: Object, label: string|null, id: string|null}>} Array of layer info objects
+ */
+export function findLayers(doc) {
+  const layers = [];
+
+  const walk = (el) => {
+    if (!el || !el.children) return;
+    if (isInkscapeLayer(el)) {
+      layers.push({
+        element: el,
+        label: getLayerLabel(el),
+        id: el.getAttribute('id')
+      });
+    }
+    for (const child of el.children) {
+      walk(child);
+    }
+  };
+
+  walk(doc);
+  return layers;
+}
+
+/**
+ * Get sodipodi:namedview document settings.
+ * Contains Inkscape document settings like page color, grid, guides.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Object|null} Named view settings or null if not found
+ */
+export function getNamedViewSettings(doc) {
+  // Find namedview element - may be direct child or nested
+  let namedview = null;
+
+  const findNamedview = (el) => {
+    if (!el) return;
+    if (el.tagName === 'sodipodi:namedview') {
+      namedview = el;
+      return;
+    }
+    if (el.children) {
+      for (const child of el.children) {
+        findNamedview(child);
+        if (namedview) return;
+      }
+    }
+  };
+
+  findNamedview(doc);
+  if (!namedview) return null;
+
+  return {
+    pagecolor: namedview.getAttribute('pagecolor'),
+    bordercolor: namedview.getAttribute('bordercolor'),
+    borderopacity: namedview.getAttribute('borderopacity'),
+    showgrid: namedview.getAttribute('showgrid'),
+    showguides: namedview.getAttribute('showguides'),
+    guidetolerance: namedview.getAttribute('guidetolerance'),
+    inkscapeZoom: namedview.getAttribute('inkscape:zoom'),
+    inkscapeCx: namedview.getAttribute('inkscape:cx'),
+    inkscapeCy: namedview.getAttribute('inkscape:cy'),
+    inkscapeWindowWidth: namedview.getAttribute('inkscape:window-width'),
+    inkscapeWindowHeight: namedview.getAttribute('inkscape:window-height'),
+    inkscapeCurrentLayer: namedview.getAttribute('inkscape:current-layer')
+  };
+}
+
+/**
+ * Find all sodipodi:guide elements (guidelines).
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Array<{position: string, orientation: string, id: string|null}>} Array of guide info
+ */
+export function findGuides(doc) {
+  const guides = [];
+
+  const walk = (el) => {
+    if (!el || !el.children) return;
+    if (el.tagName === 'sodipodi:guide') {
+      guides.push({
+        position: el.getAttribute('position'),
+        orientation: el.getAttribute('orientation'),
+        id: el.getAttribute('id'),
+        inkscapeColor: el.getAttribute('inkscape:color'),
+        inkscapeLabel: el.getAttribute('inkscape:label')
+      });
+    }
+    for (const child of el.children) {
+      walk(child);
+    }
+  };
+
+  walk(doc);
+  return guides;
+}
+
+/**
+ * Get sodipodi arc parameters from a path element.
+ * Inkscape stores original arc parameters for shapes converted from ellipses.
+ *
+ * @param {Object} element - SVG element (typically a path)
+ * @returns {Object|null} Arc parameters or null if not an arc
+ */
+export function getArcParameters(element) {
+  if (!element) return null;
+
+  const type = element.getAttribute('sodipodi:type');
+  if (type !== 'arc') return null;
+
+  return {
+    type: 'arc',
+    cx: element.getAttribute('sodipodi:cx'),
+    cy: element.getAttribute('sodipodi:cy'),
+    rx: element.getAttribute('sodipodi:rx'),
+    ry: element.getAttribute('sodipodi:ry'),
+    start: element.getAttribute('sodipodi:start'),
+    end: element.getAttribute('sodipodi:end'),
+    open: element.getAttribute('sodipodi:open')
+  };
+}
+
+/**
+ * Get node types from a path element.
+ * Inkscape stores node types (corner, smooth, symmetric, auto) for path editing.
+ *
+ * @param {Object} element - SVG path element
+ * @returns {string|null} Node types string (c=corner, s=smooth, z=symmetric, a=auto)
+ */
+export function getNodeTypes(element) {
+  return element?.getAttribute('sodipodi:nodetypes') || null;
+}
+
+/**
+ * Get export settings from an element.
+ *
+ * @param {Object} element - SVG element
+ * @returns {Object|null} Export settings or null if not set
+ */
+export function getExportSettings(element) {
+  if (!element) return null;
+
+  const filename = element.getAttribute('inkscape:export-filename');
+  const xdpi = element.getAttribute('inkscape:export-xdpi');
+  const ydpi = element.getAttribute('inkscape:export-ydpi');
+
+  if (!filename && !xdpi && !ydpi) return null;
+
+  return {
+    filename,
+    xdpi: xdpi ? parseFloat(xdpi) : null,
+    ydpi: ydpi ? parseFloat(ydpi) : null
+  };
+}
+
+/**
+ * Check if element is part of a tiled clone.
+ *
+ * @param {Object} element - SVG element
+ * @returns {boolean} True if element is a tiled clone
+ */
+export function isTiledClone(element) {
+  return element?.hasAttribute('inkscape:tiled-clone-of') || false;
+}
+
+/**
+ * Get tiled clone source ID.
+ *
+ * @param {Object} element - SVG element
+ * @returns {string|null} Source element ID or null
+ */
+export function getTiledCloneSource(element) {
+  return element?.getAttribute('inkscape:tiled-clone-of') || null;
+}
+
+/**
+ * Check if document has Inkscape namespaces declared.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {boolean} True if Inkscape namespaces are present
+ */
+export function hasInkscapeNamespaces(doc) {
+  const svg = doc.documentElement || doc;
+  const hasInkscape = svg.getAttribute('xmlns:inkscape') === INKSCAPE_NS;
+  const hasSodipodi = svg.getAttribute('xmlns:sodipodi') === SODIPODI_NS;
+  return hasInkscape || hasSodipodi;
+}
+
+/**
+ * Ensure Inkscape namespace declarations are present.
+ * Adds xmlns:inkscape and xmlns:sodipodi if missing.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Object} The document (modified in place)
+ */
+export function ensureInkscapeNamespaces(doc) {
+  const svg = doc.documentElement || doc;
+
+  if (!svg.getAttribute('xmlns:inkscape')) {
+    svg.setAttribute('xmlns:inkscape', INKSCAPE_NS);
+  }
+  if (!svg.getAttribute('xmlns:sodipodi')) {
+    svg.setAttribute('xmlns:sodipodi', SODIPODI_NS);
+  }
+
+  return doc;
+}

package/src/svg-toolbox.js

@@ -1456,9 +1456,18 @@ export const removeDesc = createOperation((doc, options = {}) => {
  * @param {boolean} options.preserveVendor - If true, preserves all editor namespace elements and attributes
  */
 export const removeEditorsNSData = createOperation((doc, options = {}) => {
-  // Skip if preserveVendor is enabled - editor namespaces are vendor-specific
-  if (options.preserveVendor) return doc;
+  // preserveVendor = true preserves ALL editor namespaces (backward compat)
+  if (options.preserveVendor === true) return doc;
+
+  // preserveNamespaces = array of prefixes to preserve selectively
+  const preserveNamespaces = options.preserveNamespaces || [];
+
+  // Handle namespace aliases: sodipodi and inkscape always go together
+  const normalizedPreserve = new Set(preserveNamespaces);
+  if (normalizedPreserve.has('sodipodi')) normalizedPreserve.add('inkscape');
+  if (normalizedPreserve.has('inkscape')) normalizedPreserve.add('sodipodi');
 
+  // Filter out preserved namespaces from the removal list
   const editorPrefixes = [
     "inkscape",
     "sodipodi",
@@ -1468,7 +1477,10 @@ export const removeEditorsNSData = createOperation((doc, options = {}) => {
     "serif",
     "vectornator",
     "figma",
-  ];
+  ].filter(prefix => !normalizedPreserve.has(prefix));
+
+  // If all namespaces are preserved, exit early
+  if (editorPrefixes.length === 0) return doc;
 
   // FIRST: Remove editor-specific elements (sodipodi:namedview, etc.)
   // This must happen BEFORE checking remaining prefixes to avoid SVGO bug #1530

package/src/svg2-polyfills.js

@@ -0,0 +1,444 @@
+/**
+ * SVG 2.0 Polyfill Generator
+ *
+ * Detects SVG 2.0 features (mesh gradients, hatches) and generates inline
+ * JavaScript polyfills for browser compatibility.
+ *
+ * Uses the existing mesh-gradient.js math for Coons patch evaluation.
+ * All polyfills are embedded inline in the SVG for self-contained output.
+ *
+ * @module svg2-polyfills
+ */
+
+/**
+ * SVG 2.0 features that can be polyfilled
+ */
+export const SVG2_FEATURES = {
+  MESH_GRADIENT: 'meshGradient',
+  HATCH: 'hatch',
+  CONTEXT_PAINT: 'context-paint',
+  AUTO_START_REVERSE: 'auto-start-reverse'
+};
+
+/**
+ * Detect SVG 2.0 features that need polyfills in a document.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {{meshGradients: string[], hatches: string[], contextPaint: boolean, autoStartReverse: boolean}} Detected features
+ */
+export function detectSVG2Features(doc) {
+  const features = {
+    meshGradients: [],
+    hatches: [],
+    contextPaint: false,
+    autoStartReverse: false
+  };
+
+  const walk = (el) => {
+    if (!el) return;
+
+    // Check tag name for mesh gradient (case-insensitive)
+    const tagName = el.tagName?.toLowerCase();
+    if (tagName === 'meshgradient') {
+      const id = el.getAttribute('id');
+      if (id) features.meshGradients.push(id);
+    }
+
+    // Check for hatch element
+    if (tagName === 'hatch') {
+      const id = el.getAttribute('id');
+      if (id) features.hatches.push(id);
+    }
+
+    // Check for context-paint in fill/stroke
+    const fill = el.getAttribute('fill');
+    const stroke = el.getAttribute('stroke');
+    if (fill === 'context-fill' || fill === 'context-stroke' ||
+        stroke === 'context-fill' || stroke === 'context-stroke') {
+      features.contextPaint = true;
+    }
+
+    // Check for auto-start-reverse in markers
+    const orient = el.getAttribute('orient');
+    if (orient === 'auto-start-reverse') {
+      features.autoStartReverse = true;
+    }
+
+    // Recurse into children
+    if (el.children) {
+      for (const child of el.children) {
+        walk(child);
+      }
+    }
+  };
+
+  walk(doc);
+  return features;
+}
+
+/**
+ * Check if document needs any SVG 2 polyfills.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {boolean} True if polyfills are needed
+ */
+export function needsPolyfills(doc) {
+  const features = detectSVG2Features(doc);
+  return features.meshGradients.length > 0 ||
+         features.hatches.length > 0 ||
+         features.contextPaint ||
+         features.autoStartReverse;
+}
+
+/**
+ * Generate the mesh gradient polyfill code.
+ * This polyfill renders mesh gradients to canvas and uses them as image fills.
+ *
+ * @returns {string} JavaScript polyfill code
+ */
+function generateMeshPolyfillCode() {
+  return `
+// Mesh Gradient Polyfill - SVG 2.0 to Canvas fallback
+// Generated by svg-matrix
+(function() {
+  'use strict';
+
+  // Skip if browser supports mesh gradients natively
+  if (typeof document.createElementNS('http://www.w3.org/2000/svg', 'meshGradient').x !== 'undefined') {
+    return;
+  }
+
+  // Find all mesh gradients
+  var meshes = document.querySelectorAll('meshGradient, meshgradient');
+  if (!meshes.length) return;
+
+  // Parse color string to RGBA
+  function parseColor(str) {
+    if (!str) return {r: 0, g: 0, b: 0, a: 255};
+    var m = str.match(/rgba?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)(?:\\s*,\\s*([\\d.]+))?\\s*\\)/);
+    if (m) return {r: +m[1], g: +m[2], b: +m[3], a: m[4] ? Math.round(+m[4] * 255) : 255};
+    if (str[0] === '#') {
+      var hex = str.slice(1);
+      if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+      return {r: parseInt(hex.slice(0,2), 16), g: parseInt(hex.slice(2,4), 16), b: parseInt(hex.slice(4,6), 16), a: 255};
+    }
+    return {r: 0, g: 0, b: 0, a: 255};
+  }
+
+  // Bilinear color interpolation
+  function bilinearColor(c00, c10, c01, c11, u, v) {
+    var mu = 1 - u, mv = 1 - v;
+    return {
+      r: Math.round(mu*mv*c00.r + u*mv*c10.r + mu*v*c01.r + u*v*c11.r),
+      g: Math.round(mu*mv*c00.g + u*mv*c10.g + mu*v*c01.g + u*v*c11.g),
+      b: Math.round(mu*mv*c00.b + u*mv*c10.b + mu*v*c01.b + u*v*c11.b),
+      a: Math.round(mu*mv*c00.a + u*mv*c10.a + mu*v*c01.a + u*v*c11.a)
+    };
+  }
+
+  // Evaluate cubic Bezier at t
+  function evalBezier(p0, p1, p2, p3, t) {
+    var mt = 1 - t, mt2 = mt * mt, mt3 = mt2 * mt;
+    var t2 = t * t, t3 = t2 * t;
+    return {
+      x: mt3*p0.x + 3*mt2*t*p1.x + 3*mt*t2*p2.x + t3*p3.x,
+      y: mt3*p0.y + 3*mt2*t*p1.y + 3*mt*t2*p2.y + t3*p3.y
+    };
+  }
+
+  // Process each mesh gradient
+  meshes.forEach(function(mesh) {
+    var id = mesh.getAttribute('id');
+    if (!id) return;
+
+    // Create canvas for rasterization
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+
+    // Get bounding box from referencing elements
+    var refs = document.querySelectorAll('[fill="url(#' + id + ')"], [stroke="url(#' + id + ')"]');
+    if (!refs.length) return;
+
+    var bbox = refs[0].getBBox();
+    var size = Math.max(bbox.width, bbox.height, 256);
+    canvas.width = canvas.height = size;
+
+    // Parse mesh patches
+    var patches = [];
+    var rows = mesh.querySelectorAll('meshrow');
+    rows.forEach(function(row) {
+      var rowPatches = row.querySelectorAll('meshpatch');
+      rowPatches.forEach(function(patch) {
+        var stops = patch.querySelectorAll('stop');
+        if (stops.length >= 4) {
+          patches.push({
+            colors: [
+              parseColor(stops[0].getAttribute('stop-color') || stops[0].style.stopColor),
+              parseColor(stops[1].getAttribute('stop-color') || stops[1].style.stopColor),
+              parseColor(stops[2].getAttribute('stop-color') || stops[2].style.stopColor),
+              parseColor(stops[3].getAttribute('stop-color') || stops[3].style.stopColor)
+            ]
+          });
+        }
+      });
+    });
+
+    // Render patches with bilinear interpolation
+    if (patches.length > 0) {
+      var imgData = ctx.createImageData(size, size);
+      var data = imgData.data;
+      var patch = patches[0];
+      for (var y = 0; y < size; y++) {
+        for (var x = 0; x < size; x++) {
+          var u = x / (size - 1);
+          var v = y / (size - 1);
+          var c = bilinearColor(patch.colors[0], patch.colors[1], patch.colors[2], patch.colors[3], u, v);
+          var i = (y * size + x) * 4;
+          data[i] = c.r;
+          data[i+1] = c.g;
+          data[i+2] = c.b;
+          data[i+3] = c.a;
+        }
+      }
+      ctx.putImageData(imgData, 0, 0);
+    }
+
+    // Create pattern from canvas
+    var dataUrl = canvas.toDataURL('image/png');
+    var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
+    pattern.setAttribute('id', id + '_polyfill');
+    pattern.setAttribute('patternUnits', 'objectBoundingBox');
+    pattern.setAttribute('width', '1');
+    pattern.setAttribute('height', '1');
+
+    var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+    img.setAttribute('href', dataUrl);
+    img.setAttribute('width', '1');
+    img.setAttribute('height', '1');
+    img.setAttribute('preserveAspectRatio', 'none');
+    pattern.appendChild(img);
+
+    // Add pattern to defs
+    var defs = mesh.closest('svg').querySelector('defs') || (function() {
+      var d = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+      mesh.closest('svg').insertBefore(d, mesh.closest('svg').firstChild);
+      return d;
+    })();
+    defs.appendChild(pattern);
+
+    // Update references to use polyfill pattern
+    refs.forEach(function(ref) {
+      if (ref.getAttribute('fill') === 'url(#' + id + ')') {
+        ref.setAttribute('fill', 'url(#' + id + '_polyfill)');
+      }
+      if (ref.getAttribute('stroke') === 'url(#' + id + ')') {
+        ref.setAttribute('stroke', 'url(#' + id + '_polyfill)');
+      }
+    });
+  });
+})();
+`;
+}
+
+/**
+ * Generate the hatch pattern polyfill code.
+ * Converts SVG 2 hatch elements to SVG 1.1 pattern elements.
+ *
+ * @returns {string} JavaScript polyfill code
+ */
+function generateHatchPolyfillCode() {
+  return `
+// Hatch Pattern Polyfill - SVG 2.0 to SVG 1.1 pattern conversion
+// Generated by svg-matrix
+(function() {
+  'use strict';
+
+  // Find all hatch elements
+  var hatches = document.querySelectorAll('hatch');
+  if (!hatches.length) return;
+
+  hatches.forEach(function(hatch) {
+    var id = hatch.getAttribute('id');
+    if (!id) return;
+
+    // Get hatch properties
+    var href = hatch.getAttribute('href') || hatch.getAttribute('xlink:href');
+    var hatchUnits = hatch.getAttribute('hatchUnits') || 'objectBoundingBox';
+    var hatchContentUnits = hatch.getAttribute('hatchContentUnits') || 'userSpaceOnUse';
+    var pitch = parseFloat(hatch.getAttribute('pitch')) || 8;
+    var rotate = parseFloat(hatch.getAttribute('rotate')) || 0;
+    var transform = hatch.getAttribute('transform') || '';
+
+    // Create equivalent pattern
+    var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
+    pattern.setAttribute('id', id + '_polyfill');
+    pattern.setAttribute('patternUnits', hatchUnits);
+    pattern.setAttribute('width', pitch);
+    pattern.setAttribute('height', pitch);
+
+    if (transform || rotate) {
+      var fullTransform = transform;
+      if (rotate) fullTransform += ' rotate(' + rotate + ')';
+      pattern.setAttribute('patternTransform', fullTransform.trim());
+    }
+
+    // Copy hatchpath children as lines
+    var hatchpaths = hatch.querySelectorAll('hatchpath, hatchPath');
+    hatchpaths.forEach(function(hp) {
+      var d = hp.getAttribute('d');
+      var strokeColor = hp.getAttribute('stroke') || 'black';
+      var strokeWidth = hp.getAttribute('stroke-width') || '1';
+
+      var line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      line.setAttribute('d', d || 'M0,0 L' + pitch + ',0');
+      line.setAttribute('stroke', strokeColor);
+      line.setAttribute('stroke-width', strokeWidth);
+      line.setAttribute('fill', 'none');
+      pattern.appendChild(line);
+    });
+
+    // If no hatchpaths, create default diagonal line
+    if (!hatchpaths.length) {
+      var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      line.setAttribute('x1', '0');
+      line.setAttribute('y1', '0');
+      line.setAttribute('x2', pitch);
+      line.setAttribute('y2', pitch);
+      line.setAttribute('stroke', 'black');
+      line.setAttribute('stroke-width', '1');
+      pattern.appendChild(line);
+    }
+
+    // Add pattern to defs
+    var defs = hatch.closest('svg').querySelector('defs') || (function() {
+      var d = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+      hatch.closest('svg').insertBefore(d, hatch.closest('svg').firstChild);
+      return d;
+    })();
+    defs.appendChild(pattern);
+
+    // Update references
+    var refs = document.querySelectorAll('[fill="url(#' + id + ')"], [stroke="url(#' + id + ')"]');
+    refs.forEach(function(ref) {
+      if (ref.getAttribute('fill') === 'url(#' + id + ')') {
+        ref.setAttribute('fill', 'url(#' + id + '_polyfill)');
+      }
+      if (ref.getAttribute('stroke') === 'url(#' + id + ')') {
+        ref.setAttribute('stroke', 'url(#' + id + '_polyfill)');
+      }
+    });
+  });
+})();
+`;
+}
+
+/**
+ * Generate complete polyfill script based on detected features.
+ *
+ * @param {{meshGradients: string[], hatches: string[], contextPaint: boolean, autoStartReverse: boolean}} features - Detected features
+ * @returns {string|null} Complete polyfill script or null if none needed
+ */
+export function generatePolyfillScript(features) {
+  const parts = [];
+
+  parts.push('/* SVG 2.0 Polyfills - Generated by svg-matrix */');
+
+  if (features.meshGradients.length > 0) {
+    parts.push(generateMeshPolyfillCode());
+  }
+
+  if (features.hatches.length > 0) {
+    parts.push(generateHatchPolyfillCode());
+  }
+
+  if (parts.length === 1) {
+    return null; // Only header, no actual polyfills
+  }
+
+  return parts.join('\n');
+}
+
+/**
+ * Inject polyfill script into SVG document.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @param {Object} [options] - Options
+ * @param {boolean} [options.force=false] - Force injection even if no features detected
+ * @returns {Object} The document (modified in place)
+ */
+export function injectPolyfills(doc, options = {}) {
+  const features = detectSVG2Features(doc);
+
+  // Check if polyfills are needed
+  if (!options.force &&
+      features.meshGradients.length === 0 &&
+      features.hatches.length === 0) {
+    return doc;
+  }
+
+  const script = generatePolyfillScript(features);
+  if (!script) return doc;
+
+  // Find or create the SVG root
+  const svg = doc.documentElement || doc;
+
+  // Create script element
+  // Note: We need to handle this based on the parser being used
+  const scriptEl = {
+    tagName: 'script',
+    attributes: new Map([['type', 'text/javascript']]),
+    children: [],
+    textContent: script,
+    getAttribute(name) { return this.attributes.get(name); },
+    setAttribute(name, value) { this.attributes.set(name, value); },
+    hasAttribute(name) { return this.attributes.has(name); },
+    removeAttribute(name) { this.attributes.delete(name); },
+    getAttributeNames() { return [...this.attributes.keys()]; },
+    appendChild(child) { this.children.push(child); },
+    removeChild(child) {
+      const idx = this.children.indexOf(child);
+      if (idx >= 0) this.children.splice(idx, 1);
+    }
+  };
+
+  // Insert script at beginning of SVG (after any xml declaration)
+  if (svg.children && svg.children.length > 0) {
+    svg.children.unshift(scriptEl);
+  } else if (svg.children) {
+    svg.children.push(scriptEl);
+  }
+
+  return doc;
+}
+
+/**
+ * Remove polyfill scripts from SVG document.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Object} The document (modified in place)
+ */
+export function removePolyfills(doc) {
+  const walk = (el) => {
+    if (!el || !el.children) return;
+
+    // Remove script elements that are svg-matrix polyfills
+    el.children = el.children.filter(child => {
+      if (child.tagName === 'script') {
+        const content = child.textContent || '';
+        if (content.includes('SVG 2.0 Polyfill') ||
+            content.includes('Generated by svg-matrix')) {
+          return false;
+        }
+      }
+      return true;
+    });
+
+    // Recurse
+    for (const child of el.children) {
+      walk(child);
+    }
+  };
+
+  walk(doc);
+  return doc;
+}