@emasoft/svg-matrix 1.0.25 → 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 |
@@ -369,7 +426,6 @@ console.log(fixed.svg);       // Fixed SVG string
 | `flattenGradients()` | Bake gradients into fills |
 | `flattenPatterns()` | Expand pattern tiles |
 | `flattenUseElements()` | Inline use/symbol references |
-| `textToPath()` | Convert text to path outlines |
 | `detectCollisions()` | GJK collision detection |
 | `validateSVG()` | W3C schema validation |
 | `decomposeTransform()` | Matrix decomposition |

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
     };
 
@@ -1203,7 +1209,7 @@ const TOOLBOX_FUNCTIONS = {
   detection: ['detectCollisions', 'measureDistance'],
 };
 
-const SKIP_TOOLBOX_FUNCTIONS = ['textToPath', 'imageToPath', 'detectCollisions', 'measureDistance'];
+const SKIP_TOOLBOX_FUNCTIONS = ['imageToPath', 'detectCollisions', 'measureDistance'];
 
 function getTimestamp() {
   const now = new Date();
@@ -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.25",
+  "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.25
+ * @version 1.0.27
  * @license MIT
  *
  * @example
@@ -43,10 +43,11 @@ import * as PatternResolver from './pattern-resolver.js';
 import * as UseSymbolResolver from './use-symbol-resolver.js';
 import * as MarkerResolver from './marker-resolver.js';
 import * as MeshGradient from './mesh-gradient.js';
-import * as TextToPath from './text-to-path.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
@@ -86,7 +87,7 @@ Decimal.set({ precision: 80 });
  * Library version
  * @constant {string}
  */
-export const VERSION = '1.0.25';
+export const VERSION = '1.0.27';
 
 /**
  * Default precision for path output (decimal places)
@@ -119,8 +120,9 @@ export { GeometryToPath, PolygonClip };
 export { SVGFlatten, BrowserVerify };
 export { ClipPathResolver, MaskResolver, PatternResolver };
 export { UseSymbolResolver, MarkerResolver };
-export { MeshGradient, TextToPath };
+export { MeshGradient };
 export { SVGParser, FlattenPipeline, Verification };
+export { InkscapeSupport, SVG2Polyfills };
 
 // ============================================================================
 // SVGO-INSPIRED PRECISION MODULES
@@ -233,7 +235,6 @@ export {
   flattenPatterns,
   flattenFilters,
   flattenUseElements,
-  textToPath,
   imageToPath,
   detectCollisions,
   measureDistance,
@@ -576,10 +577,11 @@ export default {
   UseSymbolResolver,
   MarkerResolver,
   MeshGradient,
-  TextToPath,
   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
@@ -3702,21 +3714,6 @@ export const flattenUseElements = createOperation(async (doc, options = {}) => {
   return parseSVG(result.svg);
 });
 
-/**
- * Convert text to path geometry (requires font info - stub)
- */
-export const textToPath = createOperation((doc, options = {}) => {
-  // Note: True text-to-path conversion requires font rendering engine
-  // This is a placeholder that removes text elements
-  const texts = doc.getElementsByTagName("text");
-  for (const text of [...texts]) {
-    // In real implementation, would convert using font metrics
-    // For now, just mark with comment
-    text.setAttribute("data-text-to-path-needed", "true");
-  }
-  return doc;
-});
-
 /**
  * Trace raster images to paths (basic - stub)
  */
@@ -7421,7 +7418,6 @@ export default {
   flattenPatterns,
   flattenFilters,
   flattenUseElements,
-  textToPath,
   imageToPath,
   detectCollisions,
   measureDistance,