@emasoft/svg-matrix 1.0.27 → 1.0.28

package/bin/svg-matrix.js

@@ -1353,7 +1353,16 @@ function parseArgs(args) {
   let i = 0;
 
   while (i < args.length) {
-    const arg = args[i];
+    let arg = args[i];
+    let argValue = null;
+
+    // Handle --arg=value format
+    if (arg.includes('=') && arg.startsWith('--')) {
+      const eqIdx = arg.indexOf('=');
+      argValue = arg.substring(eqIdx + 1);
+      arg = arg.substring(0, eqIdx);
+    }
+
     switch (arg) {
       case '-o': case '--output': cfg.output = args[++i]; break;
       case '-l': case '--list': cfg.listFile = args[++i]; break;
@@ -1393,7 +1402,7 @@ function parseArgs(args) {
       case '--preserve-vendor': cfg.preserveVendor = true; break;
       // Namespace preservation option (comma-separated list)
       case '--preserve-ns': {
-        const namespaces = args[++i];
+        const namespaces = argValue || args[++i];
         if (!namespaces) {
           logError('--preserve-ns requires a comma-separated list of namespaces');
           process.exit(CONSTANTS.EXIT_ERROR);

package/bin/svgm.js

@@ -220,6 +220,13 @@ async function optimizeSvg(content, options = {}) {
   const doc = parseSVG(content);
   const pipeline = DEFAULT_PIPELINE;
 
+  // Detect SVG 2 features BEFORE optimization pipeline removes them
+  // (removeUnknownsAndDefaults strips elements not in SVG 1.1 spec)
+  let svg2Features = null;
+  if (options.svg2Polyfills) {
+    svg2Features = detectSVG2Features(doc);
+  }
+
   // Run optimization pipeline
   for (const pluginName of pipeline) {
     const fn = SVGToolbox[pluginName];
@@ -246,11 +253,11 @@ 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);
+  // Inject SVG 2 polyfills if requested (using pre-detected features)
+  if (options.svg2Polyfills && svg2Features) {
+    if (svg2Features.meshGradients.length > 0 || svg2Features.hatches.length > 0) {
+      // Pass pre-detected features since pipeline may have removed SVG2 elements
+      injectPolyfills(doc, { features: svg2Features });
     }
   }
 
@@ -432,7 +439,15 @@ function parseArgs(args) {
   let i = 0;
 
   while (i < args.length) {
-    const arg = args[i];
+    let arg = args[i];
+    let argValue = null;
+
+    // Handle --arg=value format
+    if (arg.includes('=') && arg.startsWith('--')) {
+      const eqIdx = arg.indexOf('=');
+      argValue = arg.substring(eqIdx + 1);
+      arg = arg.substring(0, eqIdx);
+    }
 
     switch (arg) {
       case '-v':
@@ -533,8 +548,10 @@ function parseArgs(args) {
         break;
 
       case '--preserve-ns':
-        i++;
-        cfg.preserveNamespaces = args[i].split(',').map(s => s.trim().toLowerCase());
+        {
+          const val = argValue || args[++i];
+          cfg.preserveNamespaces = val.split(',').map(s => s.trim().toLowerCase());
+        }
         break;
 
       case '--svg2-polyfills':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emasoft/svg-matrix",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "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.27
+ * @version 1.0.28
  * @license MIT
  *
  * @example
@@ -87,7 +87,7 @@ Decimal.set({ precision: 80 });
  * Library version
  * @constant {string}
  */
-export const VERSION = '1.0.27';
+export const VERSION = '1.0.28';
 
 /**
  * Default precision for path output (decimal places)

package/src/inkscape-support.js

@@ -7,6 +7,8 @@
  * @module inkscape-support
  */
 
+import { SVGElement } from './svg-parser.js';
+
 // 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';
@@ -246,3 +248,394 @@ export function ensureInkscapeNamespaces(doc) {
 
   return doc;
 }
+
+// ============================================================================
+// LAYER EXTRACTION
+// ============================================================================
+
+/**
+ * Find all IDs referenced by an element and its descendants.
+ * Looks for url(#id) references in fill, stroke, clip-path, mask, marker-*, filter, etc.
+ * Also checks xlink:href and href attributes for #id references.
+ *
+ * @param {Object} element - SVG element to scan
+ * @returns {Set<string>} Set of referenced IDs
+ */
+export function findReferencedIds(element) {
+  const ids = new Set();
+
+  // Attributes that can contain url(#id) references
+  const urlRefAttrs = [
+    'fill', 'stroke', 'clip-path', 'mask', 'filter',
+    'marker-start', 'marker-mid', 'marker-end',
+    'fill-opacity', 'stroke-opacity' // Sometimes reference paint servers
+  ];
+
+  // Attributes that can contain #id or url(#id) references
+  const hrefAttrs = ['href', 'xlink:href'];
+
+  const extractUrlId = (value) => {
+    if (!value) return null;
+    // Match url(#id) or url("#id")
+    const match = value.match(/url\(["']?#([^"')]+)["']?\)/);
+    return match ? match[1] : null;
+  };
+
+  const extractHrefId = (value) => {
+    if (!value) return null;
+    // Match #id references
+    if (value.startsWith('#')) {
+      return value.slice(1);
+    }
+    return null;
+  };
+
+  const walk = (el) => {
+    if (!el) return;
+
+    // Check url() references
+    for (const attr of urlRefAttrs) {
+      const id = extractUrlId(el.getAttribute?.(attr));
+      if (id) ids.add(id);
+    }
+
+    // Check href references
+    for (const attr of hrefAttrs) {
+      const id = extractHrefId(el.getAttribute?.(attr));
+      if (id) ids.add(id);
+    }
+
+    // Check style attribute for url() references
+    const style = el.getAttribute?.('style');
+    if (style) {
+      const urlMatches = style.matchAll(/url\(["']?#([^"')]+)["']?\)/g);
+      for (const match of urlMatches) {
+        ids.add(match[1]);
+      }
+    }
+
+    // Recurse into children
+    if (el.children) {
+      for (const child of el.children) {
+        walk(child);
+      }
+    }
+  };
+
+  walk(element);
+  return ids;
+}
+
+/**
+ * Build a map of all defs elements by their ID.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Map<string, Object>} Map of ID to element
+ */
+export function buildDefsMap(doc) {
+  const defsMap = new Map();
+
+  const walk = (el) => {
+    if (!el) return;
+
+    // If element has an ID, add to map
+    const id = el.getAttribute?.('id');
+    if (id) {
+      defsMap.set(id, el);
+    }
+
+    // Recurse
+    if (el.children) {
+      for (const child of el.children) {
+        walk(child);
+      }
+    }
+  };
+
+  // Only scan defs elements for efficiency
+  const findDefs = (el) => {
+    if (!el) return;
+    if (el.tagName === 'defs') {
+      walk(el);
+    }
+    if (el.children) {
+      for (const child of el.children) {
+        findDefs(child);
+      }
+    }
+  };
+
+  findDefs(doc);
+  return defsMap;
+}
+
+/**
+ * Recursively resolve all dependencies for a set of IDs.
+ * Defs elements can reference other defs (e.g., gradient with xlink:href to another gradient).
+ *
+ * @param {Set<string>} initialIds - Initial set of IDs to resolve
+ * @param {Map<string, Object>} defsMap - Map of all defs elements
+ * @returns {Set<string>} Complete set of IDs including all nested dependencies
+ */
+export function resolveDefsDependencies(initialIds, defsMap) {
+  const resolved = new Set();
+  const toProcess = [...initialIds];
+
+  while (toProcess.length > 0) {
+    const id = toProcess.pop();
+    if (resolved.has(id)) continue;
+
+    const element = defsMap.get(id);
+    if (!element) continue;
+
+    resolved.add(id);
+
+    // Find references within this def element
+    const nestedRefs = findReferencedIds(element);
+    for (const nestedId of nestedRefs) {
+      if (!resolved.has(nestedId) && defsMap.has(nestedId)) {
+        toProcess.push(nestedId);
+      }
+    }
+  }
+
+  return resolved;
+}
+
+/**
+ * Deep clone an SVG element and all its children using proper SVGElement class.
+ *
+ * @param {Object} element - Element to clone
+ * @returns {SVGElement} Cloned element with serialize() method
+ */
+export function cloneElement(element) {
+  if (!element) return null;
+
+  // Get attributes as plain object
+  const attrs = {};
+  if (element._attributes) {
+    Object.assign(attrs, element._attributes);
+  } else if (element.getAttributeNames) {
+    for (const name of element.getAttributeNames()) {
+      attrs[name] = element.getAttribute(name);
+    }
+  }
+
+  // Clone children recursively
+  const clonedChildren = [];
+  if (element.children) {
+    for (const child of element.children) {
+      const clonedChild = cloneElement(child);
+      if (clonedChild) {
+        clonedChildren.push(clonedChild);
+      }
+    }
+  }
+
+  // Create proper SVGElement with serialize() method
+  const clone = new SVGElement(
+    element.tagName,
+    attrs,
+    clonedChildren,
+    element.textContent || null
+  );
+
+  return clone;
+}
+
+/**
+ * Extract a single layer as a standalone SVG document.
+ * Includes only the defs elements that are referenced by the layer.
+ *
+ * @param {Object} doc - Source parsed SVG document
+ * @param {Object|string} layerOrId - Layer element or layer ID to extract
+ * @param {Object} [options] - Options
+ * @param {boolean} [options.includeHiddenLayers=false] - Include hidden layers in output
+ * @param {boolean} [options.preserveTransform=true] - Preserve layer transform attribute
+ * @returns {{svg: SVGElement, layerInfo: {id: string, label: string}}} Extracted SVG and layer info
+ */
+export function extractLayer(doc, layerOrId, options = {}) {
+  const { preserveTransform = true } = options;
+
+  // Find the layer element
+  let layer;
+  if (typeof layerOrId === 'string') {
+    const layers = findLayers(doc);
+    const found = layers.find(l => l.id === layerOrId || l.label === layerOrId);
+    if (!found) {
+      throw new Error(`Layer not found: ${layerOrId}`);
+    }
+    layer = found.element;
+  } else {
+    layer = layerOrId;
+  }
+
+  if (!isInkscapeLayer(layer)) {
+    throw new Error('Element is not an Inkscape layer');
+  }
+
+  // Get SVG root element
+  const svgRoot = doc.documentElement || doc;
+
+  // Build defs map from source document
+  const defsMap = buildDefsMap(doc);
+
+  // Find all IDs referenced by this layer
+  const referencedIds = findReferencedIds(layer);
+
+  // Resolve all nested dependencies
+  const requiredDefIds = resolveDefsDependencies(referencedIds, defsMap);
+
+  // Get SVG root attributes
+  const svgAttrs = {};
+  if (svgRoot._attributes) {
+    Object.assign(svgAttrs, svgRoot._attributes);
+  } else if (svgRoot.getAttributeNames) {
+    for (const name of svgRoot.getAttributeNames()) {
+      svgAttrs[name] = svgRoot.getAttribute(name);
+    }
+  }
+
+  // Build children array for new SVG
+  const svgChildren = [];
+
+  // Create defs element with required definitions
+  if (requiredDefIds.size > 0) {
+    const defsChildren = [];
+    for (const id of requiredDefIds) {
+      const defElement = defsMap.get(id);
+      if (defElement) {
+        defsChildren.push(cloneElement(defElement));
+      }
+    }
+    const newDefs = new SVGElement('defs', {}, defsChildren, null);
+    svgChildren.push(newDefs);
+  }
+
+  // Clone the layer
+  const clonedLayer = cloneElement(layer);
+
+  // Optionally remove the transform
+  if (!preserveTransform && clonedLayer._attributes) {
+    delete clonedLayer._attributes.transform;
+  }
+
+  svgChildren.push(clonedLayer);
+
+  // Create new SVG document using SVGElement
+  const newSvg = new SVGElement('svg', svgAttrs, svgChildren, null);
+
+  // Get layer info
+  const layerInfo = {
+    id: layer.getAttribute('id'),
+    label: getLayerLabel(layer)
+  };
+
+  return { svg: newSvg, layerInfo };
+}
+
+/**
+ * Extract all layers from an Inkscape SVG as separate documents.
+ *
+ * @param {Object} doc - Source parsed SVG document
+ * @param {Object} [options] - Options
+ * @param {boolean} [options.includeHidden=false] - Include hidden layers (display:none or visibility:hidden)
+ * @param {boolean} [options.preserveTransform=true] - Preserve layer transform attributes
+ * @returns {Array<{svg: Object, layerInfo: {id: string, label: string}}>} Array of extracted SVGs
+ */
+export function extractAllLayers(doc, options = {}) {
+  const { includeHidden = false } = options;
+  const layers = findLayers(doc);
+  const results = [];
+
+  for (const layerData of layers) {
+    const layer = layerData.element;
+
+    // Skip hidden layers unless requested
+    if (!includeHidden) {
+      const style = layer.getAttribute('style') || '';
+      const display = layer.getAttribute('display');
+      const visibility = layer.getAttribute('visibility');
+
+      if (display === 'none' ||
+          visibility === 'hidden' ||
+          style.includes('display:none') ||
+          style.includes('visibility:hidden')) {
+        continue;
+      }
+    }
+
+    try {
+      const extracted = extractLayer(doc, layer, options);
+      results.push(extracted);
+    } catch (e) {
+      // Skip layers that fail to extract
+      console.warn(`Failed to extract layer ${layerData.id || layerData.label}: ${e.message}`);
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Get a summary of shared resources between layers.
+ * Useful for understanding what defs are shared across layers.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Object} Summary of shared resources
+ */
+export function analyzeLayerDependencies(doc) {
+  const layers = findLayers(doc);
+  const defsMap = buildDefsMap(doc);
+  const layerRefs = new Map(); // layer ID -> Set of referenced def IDs
+  const defUsage = new Map();  // def ID -> Set of layer IDs that use it
+
+  for (const layerData of layers) {
+    const layer = layerData.element;
+    const layerId = layerData.id || layerData.label || 'unnamed';
+
+    // Find refs for this layer
+    const refs = findReferencedIds(layer);
+    const resolved = resolveDefsDependencies(refs, defsMap);
+
+    layerRefs.set(layerId, resolved);
+
+    // Track which defs are used by which layers
+    for (const defId of resolved) {
+      if (!defUsage.has(defId)) {
+        defUsage.set(defId, new Set());
+      }
+      defUsage.get(defId).add(layerId);
+    }
+  }
+
+  // Find shared defs (used by more than one layer)
+  const sharedDefs = [];
+  const exclusiveDefs = new Map(); // layer ID -> defs only used by that layer
+
+  for (const [defId, layerSet] of defUsage) {
+    if (layerSet.size > 1) {
+      sharedDefs.push({
+        id: defId,
+        usedBy: [...layerSet]
+      });
+    } else {
+      const layerId = [...layerSet][0];
+      if (!exclusiveDefs.has(layerId)) {
+        exclusiveDefs.set(layerId, []);
+      }
+      exclusiveDefs.get(layerId).push(defId);
+    }
+  }
+
+  return {
+    layers: layers.map(l => ({
+      id: l.id,
+      label: l.label,
+      referencedDefs: [...(layerRefs.get(l.id || l.label || 'unnamed') || [])]
+    })),
+    sharedDefs,
+    exclusiveDefs: Object.fromEntries(exclusiveDefs),
+    totalDefs: defsMap.size
+  };
+}

package/src/svg-collections.js

@@ -718,7 +718,9 @@ export const allowedChildrenPerElement = {
     'circle', 'clipPath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'font-face',
     'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'metadata',
     'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'script',
-    'set', 'style', 'svg', 'switch', 'symbol', 'text', 'title', 'use', 'view'
+    'set', 'style', 'svg', 'switch', 'symbol', 'text', 'title', 'use', 'view',
+    // SVG 2.0 elements
+    'meshgradient', 'meshGradient', 'hatch', 'solidcolor', 'solidColor'
   ]),
   'symbol': new Set([
     'a', 'animate', 'animateColor', 'animateMotion', 'animateTransform', 'circle',
@@ -781,6 +783,29 @@ export const allowedChildrenPerElement = {
   'radialGradient': new Set([
     'animate', 'animateTransform', 'desc', 'metadata', 'set', 'stop', 'title'
   ]),
+  // SVG 2.0 mesh gradient element hierarchy
+  'meshgradient': new Set([
+    'animate', 'animateTransform', 'desc', 'metadata', 'meshrow', 'set', 'title'
+  ]),
+  'meshGradient': new Set([
+    'animate', 'animateTransform', 'desc', 'metadata', 'meshrow', 'set', 'title'
+  ]),
+  'meshrow': new Set([
+    'meshpatch'
+  ]),
+  'meshpatch': new Set([
+    'stop'
+  ]),
+  // SVG 2.0 hatch element
+  'hatch': new Set([
+    'animate', 'animateTransform', 'desc', 'hatchpath', 'hatchPath', 'metadata', 'script', 'set', 'style', 'title'
+  ]),
+  'hatchpath': new Set([
+    'animate', 'animateTransform', 'desc', 'metadata', 'script', 'set', 'title'
+  ]),
+  'hatchPath': new Set([
+    'animate', 'animateTransform', 'desc', 'metadata', 'script', 'set', 'title'
+  ]),
   'filter': new Set([
     'animate', 'animateTransform', 'desc', 'feBlend', 'feColorMatrix', 'feComponentTransfer',
     'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap',

package/src/svg-toolbox.js

@@ -874,6 +874,49 @@ export const removeUnknownsAndDefaults = createOperation(
              css.includes(':not(');
     });
 
+    // Map lowercase SVG tag names to their canonical mixed-case forms
+    // SVG is case-sensitive but XML parsers may lowercase tag names
+    const tagNameMap = {
+      'clippath': 'clipPath',
+      'textpath': 'textPath',
+      'lineargradient': 'linearGradient',
+      'radialgradient': 'radialGradient',
+      'meshgradient': 'meshGradient',
+      'hatchpath': 'hatchPath',
+      'solidcolor': 'solidColor',
+      'foreignobject': 'foreignObject',
+      'feblend': 'feBlend',
+      'fecolormatrix': 'feColorMatrix',
+      'fecomponenttransfer': 'feComponentTransfer',
+      'fecomposite': 'feComposite',
+      'feconvolvematrix': 'feConvolveMatrix',
+      'fediffuselighting': 'feDiffuseLighting',
+      'fedisplacementmap': 'feDisplacementMap',
+      'fedistantlight': 'feDistantLight',
+      'fedropshadow': 'feDropShadow',
+      'feflood': 'feFlood',
+      'fefunca': 'feFuncA',
+      'fefuncb': 'feFuncB',
+      'fefuncg': 'feFuncG',
+      'fefuncr': 'feFuncR',
+      'fegaussianblur': 'feGaussianBlur',
+      'feimage': 'feImage',
+      'femerge': 'feMerge',
+      'femergenode': 'feMergeNode',
+      'femorphology': 'feMorphology',
+      'feoffset': 'feOffset',
+      'fepointlight': 'fePointLight',
+      'fespecularlighting': 'feSpecularLighting',
+      'fespotlight': 'feSpotLight',
+      'fetile': 'feTile',
+      'feturbulence': 'feTurbulence',
+      'animatemotion': 'animateMotion',
+      'animatetransform': 'animateTransform',
+    };
+    const canonicalTagName = (tag) => tagNameMap[tag] || tag;
+
+    // Known SVG elements - include both mixed-case and lowercase variants
+    // because XML parsers may lowercase tag names
     const knownElements = [
       "svg",
       "g",
@@ -887,13 +930,22 @@ export const removeUnknownsAndDefaults = createOperation(
       "text",
       "tspan",
       "tref",
-      "textPath",
+      "textPath", "textpath",
       "defs",
-      "clipPath",
+      "clipPath", "clippath",
       "mask",
       "pattern",
-      "linearGradient",
-      "radialGradient",
+      "linearGradient", "lineargradient",
+      "radialGradient", "radialgradient",
+      // SVG 2.0 gradient elements (mesh gradients)
+      "meshGradient", "meshgradient",
+      "meshrow",
+      "meshpatch",
+      // SVG 2.0 hatch elements
+      "hatch",
+      "hatchpath", "hatchPath",
+      // SVG 2.0 solid color
+      "solidcolor", "solidColor",
       "stop",
       "image",
       "use",
@@ -902,38 +954,38 @@ export const removeUnknownsAndDefaults = createOperation(
       "title",
       "desc",
       "metadata",
-      "foreignObject",
+      "foreignObject", "foreignobject",
       "switch",
       "a",
       "filter",
-      "feBlend",
-      "feColorMatrix",
-      "feComponentTransfer",
-      "feComposite",
-      "feConvolveMatrix",
-      "feDiffuseLighting",
-      "feDisplacementMap",
-      "feDistantLight",
-      "feDropShadow",
-      "feFlood",
-      "feFuncA",
-      "feFuncB",
-      "feFuncG",
-      "feFuncR",
-      "feGaussianBlur",
-      "feImage",
-      "feMerge",
-      "feMergeNode",
-      "feMorphology",
-      "feOffset",
-      "fePointLight",
-      "feSpecularLighting",
-      "feSpotLight",
-      "feTile",
-      "feTurbulence",
+      "feBlend", "feblend",
+      "feColorMatrix", "fecolormatrix",
+      "feComponentTransfer", "fecomponenttransfer",
+      "feComposite", "fecomposite",
+      "feConvolveMatrix", "feconvolvematrix",
+      "feDiffuseLighting", "fediffuselighting",
+      "feDisplacementMap", "fedisplacementmap",
+      "feDistantLight", "fedistantlight",
+      "feDropShadow", "fedropshadow",
+      "feFlood", "feflood",
+      "feFuncA", "fefunca",
+      "feFuncB", "fefuncb",
+      "feFuncG", "fefuncg",
+      "feFuncR", "fefuncr",
+      "feGaussianBlur", "fegaussianblur",
+      "feImage", "feimage",
+      "feMerge", "femerge",
+      "feMergeNode", "femergenode",
+      "feMorphology", "femorphology",
+      "feOffset", "feoffset",
+      "fePointLight", "fepointlight",
+      "feSpecularLighting", "fespecularlighting",
+      "feSpotLight", "fespotlight",
+      "feTile", "fetile",
+      "feTurbulence", "feturbulence",
       "animate",
-      "animateMotion",
-      "animateTransform",
+      "animateMotion", "animatemotion",
+      "animateTransform", "animatetransform",
       "set",
       "mpath",
       "view",
@@ -1123,7 +1175,9 @@ export const removeUnknownsAndDefaults = createOperation(
       // Remove unknown children (but protect known ones)
       // P4-1: Also validate parent-child relationships per SVG spec
       const parentTagLower = el.tagName.toLowerCase();
-      const allowedChildren = allowedChildrenPerElement[parentTagLower];
+      // Try lowercase key first, then canonical mixed-case (case-insensitive lookup)
+      const allowedChildren = allowedChildrenPerElement[parentTagLower] ||
+                              allowedChildrenPerElement[canonicalTagName(parentTagLower)];
 
       for (const child of [...el.children]) {
         if (isElement(child)) {
@@ -1142,7 +1196,10 @@ export const removeUnknownsAndDefaults = createOperation(
 
           // P4-1: Check if child is allowed for this parent
           // Only validate if we have rules for this parent
-          if (allowedChildren && !allowedChildren.has(childTagLower)) {
+          // Use case-insensitive check: try both lowercase and canonical form
+          if (allowedChildren &&
+              !allowedChildren.has(childTagLower) &&
+              !allowedChildren.has(canonicalTagName(childTagLower))) {
             // Invalid child for this parent - remove it
             el.removeChild(child);
             continue;
@@ -1323,12 +1380,42 @@ export const removeHiddenElements = createOperation((doc, options = {}) => {
 
 /**
  * Remove empty text elements
+ * Recursively checks for text content in child elements (tspan, etc.)
+ * Preserves text elements with namespace attributes when preserveNamespaces is set
  */
 export const removeEmptyText = createOperation((doc, options = {}) => {
   const textElements = doc.getElementsByTagName("text");
 
+  // Helper to get all text content recursively from element and children
+  const getTextContentRecursive = (el) => {
+    let text = el.textContent || '';
+    if (el.children) {
+      for (const child of el.children) {
+        text += getTextContentRecursive(child);
+      }
+    }
+    return text;
+  };
+
+  // Helper to check if element has preserved namespace attributes
+  const hasPreservedNsAttrs = (el, preserveNs) => {
+    if (!preserveNs || preserveNs.length === 0) return false;
+    const attrNames = el.getAttributeNames ? el.getAttributeNames() : [];
+    return attrNames.some(attr =>
+      preserveNs.some(ns => attr.startsWith(ns + ':'))
+    );
+  };
+
+  const preserveNamespaces = options.preserveNamespaces || [];
+
   for (const text of [...textElements]) {
-    if (!text.textContent || text.textContent.trim() === "") {
+    const recursiveContent = getTextContentRecursive(text);
+    const isEmpty = !recursiveContent || recursiveContent.trim() === "";
+
+    // Don't remove if it has preserved namespace attributes (e.g., Inkscape tile metadata)
+    const hasNsAttrs = hasPreservedNsAttrs(text, preserveNamespaces);
+
+    if (isEmpty && !hasNsAttrs) {
       if (text.parentNode) {
         text.parentNode.removeChild(text);
       }
@@ -1340,14 +1427,16 @@ export const removeEmptyText = createOperation((doc, options = {}) => {
 
 /**
  * Remove empty container elements
+ * Note: Patterns with xlink:href/href inherit content and are NOT empty
  */
 export const removeEmptyContainers = createOperation((doc, options = {}) => {
+  // Include both mixed-case and lowercase variants for case-insensitive matching
   const containers = [
     "g",
     "defs",
     "symbol",
     "marker",
-    "clipPath",
+    "clipPath", "clippath",
     "mask",
     "pattern",
   ];
@@ -1358,8 +1447,21 @@ export const removeEmptyContainers = createOperation((doc, options = {}) => {
       if (isElement(child)) processElement(child);
     }
 
-    // Remove if container is empty
-    if (containers.includes(el.tagName) && el.children.length === 0) {
+    const tagLower = el.tagName?.toLowerCase();
+
+    // Skip if not a container type
+    if (!containers.includes(el.tagName) && !containers.includes(tagLower)) {
+      return;
+    }
+
+    // Don't remove if element has href/xlink:href (inherits content from reference)
+    // This is common for patterns that reference other patterns
+    if (el.getAttribute('href') || el.getAttribute('xlink:href')) {
+      return;
+    }
+
+    // Remove if container is truly empty (no children)
+    if (el.children.length === 0) {
       if (el.parentNode) {
         el.parentNode.removeChild(el);
       }

package/src/svg2-polyfills.js

@@ -10,6 +10,8 @@
  * @module svg2-polyfills
  */
 
+import { SVGElement } from './svg-parser.js';
+
 /**
  * SVG 2.0 features that can be polyfilled
  */
@@ -364,10 +366,12 @@ export function generatePolyfillScript(features) {
  * @param {Object} doc - Parsed SVG document
  * @param {Object} [options] - Options
  * @param {boolean} [options.force=false] - Force injection even if no features detected
+ * @param {Object} [options.features] - Pre-detected features (use instead of re-detecting)
  * @returns {Object} The document (modified in place)
  */
 export function injectPolyfills(doc, options = {}) {
-  const features = detectSVG2Features(doc);
+  // Use pre-detected features if provided (for when pipeline has removed SVG2 elements)
+  const features = options.features || detectSVG2Features(doc);
 
   // Check if polyfills are needed
   if (!options.force &&
@@ -382,28 +386,24 @@ export function injectPolyfills(doc, options = {}) {
   // 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);
-    }
-  };
+  // Create a proper SVGElement for the script
+  // The script content uses CDATA to avoid XML escaping issues
+  const scriptEl = new SVGElement('script', {
+    type: 'text/javascript',
+    id: 'svg-matrix-polyfill'
+  }, [], script);
 
-  // Insert script at beginning of SVG (after any xml declaration)
+  // Insert script at beginning of SVG (after defs if present, else at start)
   if (svg.children && svg.children.length > 0) {
-    svg.children.unshift(scriptEl);
+    // Find first non-defs element to insert before
+    let insertIdx = 0;
+    for (let i = 0; i < svg.children.length; i++) {
+      if (svg.children[i].tagName === 'defs') {
+        insertIdx = i + 1;
+        break;
+      }
+    }
+    svg.children.splice(insertIdx, 0, scriptEl);
   } else if (svg.children) {
     svg.children.push(scriptEl);
   }