@emasoft/svg-matrix 1.3.2 → 1.3.5

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.3.2",
-  "buildTime": "2026-01-10T15:48:31.859Z",
+  "version": "1.3.5",
+  "buildTime": "2026-01-25T12:44:03.807Z",
   "bundles": {
     "esm": [
       {
@@ -11,14 +11,14 @@
       },
       {
         "name": "svg-toolbox.min.js",
-        "size": 577127,
-        "gzipSize": 152269,
+        "size": 578044,
+        "gzipSize": 152616,
         "description": "ESM bundle for bundlers/Node.js (includes decimal.js)"
       },
       {
         "name": "svgm.min.js",
-        "size": 602429,
-        "gzipSize": 159416,
+        "size": 603346,
+        "gzipSize": 159757,
         "description": "ESM bundle for bundlers/Node.js (includes decimal.js)"
       }
     ],
@@ -31,8 +31,8 @@
       },
       {
         "name": "svg-toolbox.global.min.js",
-        "size": 577256,
-        "gzipSize": 151638,
+        "size": 578173,
+        "gzipSize": 151976,
         "description": "IIFE bundle for browsers via <script> (includes decimal.js)"
       },
       {

package/package.json

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

package/src/animation-optimization.js

@@ -384,6 +384,12 @@ export function optimizeAnimationValues(values, precision = 3) {
     );
   }
 
+  // Preserve data URIs exactly (they contain semicolons that shouldn't be split)
+  // Data URIs have format: data:[<mediatype>][;base64],<data>
+  if (values.startsWith("data:")) {
+    return values;
+  }
+
   // Split by semicolon
   const parts = values.split(";");
 
@@ -398,6 +404,29 @@ export function optimizeAnimationValues(values, precision = 3) {
       return trimmed;
     }
 
+    // Preserve data URIs exactly (e.g., data:image/jpeg;base64,...)
+    if (trimmed.startsWith("data:")) {
+      return trimmed;
+    }
+
+    // Preserve color functions (rgb, rgba, hsl, hsla, etc.) exactly
+    // These contain parentheses and commas that should not be modified
+    if (/^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)\s*\(/i.test(trimmed)) {
+      return trimmed;
+    }
+
+    // Preserve SVG path data (starts with path command M, m, L, l, etc.)
+    // Path data format: "M 26.5,32.5 L 33.5,32.5 C 40,50 60,70 80,90 Z"
+    if (/^[MmZzLlHhVvCcSsQqTtAa][\s\d.,+-]+/.test(trimmed)) {
+      return trimmed;
+    }
+
+    // Preserve font-family values (comma-separated font names with possible quotes)
+    // Pattern: word or quoted string, followed by comma and more words/quotes
+    if (/^(['"]?[\w\s-]+['"]?,\s*)+['"]?[\w\s-]+['"]?$/.test(trimmed)) {
+      return trimmed;
+    }
+
     // Try to parse as numbers (could be space-separated like "0 0" for translate)
     const nums = trimmed.split(/[\s,]+/).filter((n) => n); // Filter empty strings
     const optimizedNums = nums.map((n) => {

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.3.2
+ * @version 1.3.5
  * @license MIT
  *
  * @example
@@ -135,7 +135,7 @@ Decimal.set({ precision: 80 });
  * Library version
  * @constant {string}
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.5";
 
 /**
  * Default precision for path output (decimal places)

package/src/marker-resolver.js

@@ -378,6 +378,12 @@ export function getMarkerTransform(
   }
 
   // Step 4: Apply viewBox transformation if present
+  // BUG FIX: When viewBox has non-zero origin, the refX/refY are in viewBox coordinates.
+  // We must convert them to viewport coordinates before applying the ref translation.
+  // Transform chain: T_position * R * T(-ref_viewport) * S * T(-viewBox.origin)
+  let hasViewBox = false;
+  let viewBoxScaleFactor = 1;
+
   if (viewBox) {
     // Calculate scale factors to fit viewBox into marker viewport
     const vbWidth = viewBox.width;
@@ -397,30 +403,47 @@ export function getMarkerTransform(
       // Validate scale factors are finite
       if (isFinite(scaleFactorX) && isFinite(scaleFactorY)) {
         // For now, use uniform scaling (can be enhanced with full preserveAspectRatio parsing)
-        const scaleFactor = Math.min(scaleFactorX, scaleFactorY);
-
-        scaleX *= scaleFactor;
-        scaleY *= scaleFactor;
+        viewBoxScaleFactor = Math.min(scaleFactorX, scaleFactorY);
+        hasViewBox = true;
 
-        // Translate to account for viewBox origin
-        const viewBoxTranslate = Transforms2D.translation(
-          -viewBox.x,
-          -viewBox.y,
-        );
-        transform = transform.mul(viewBoxTranslate);
+        scaleX *= viewBoxScaleFactor;
+        scaleY *= viewBoxScaleFactor;
       }
     }
   }
 
-  // Apply combined scaling
-  if (scaleX !== 1 || scaleY !== 1) {
-    const scale = Transforms2D.scale(scaleX, scaleY);
-    transform = transform.mul(scale);
-  }
+  if (hasViewBox) {
+    // When viewBox is present, refX/refY are in viewBox coordinates.
+    // Convert to viewport (marker) coordinates by:
+    // 1. Subtract viewBox origin to get position relative to viewBox
+    // 2. Scale by viewBox scale factor to get position in marker viewport
+    const refViewportX = (refX - viewBox.x) * viewBoxScaleFactor;
+    const refViewportY = (refY - viewBox.y) * viewBoxScaleFactor;
+
+    // Apply ref translation in viewport coordinates (BEFORE scaling in the chain)
+    const refTranslate = Transforms2D.translation(-refViewportX, -refViewportY);
+    transform = transform.mul(refTranslate);
+
+    // Apply combined scaling
+    if (scaleX !== 1 || scaleY !== 1) {
+      const scale = Transforms2D.scale(scaleX, scaleY);
+      transform = transform.mul(scale);
+    }
+
+    // Apply viewBox origin translation (AFTER scaling, so it scales correctly)
+    const viewBoxTranslate = Transforms2D.translation(-viewBox.x, -viewBox.y);
+    transform = transform.mul(viewBoxTranslate);
+  } else {
+    // No viewBox: apply scaling then ref translation in original coordinates
+    if (scaleX !== 1 || scaleY !== 1) {
+      const scale = Transforms2D.scale(scaleX, scaleY);
+      transform = transform.mul(scale);
+    }
 
-  // Step 5: Translate by -refX, -refY
-  const refTranslate = Transforms2D.translation(-refX, -refY);
-  transform = transform.mul(refTranslate);
+    // Step 5: Translate by -refX, -refY
+    const refTranslate = Transforms2D.translation(-refX, -refY);
+    transform = transform.mul(refTranslate);
+  }
 
   return transform;
 }

package/src/off-canvas-detection.js

@@ -1564,8 +1564,10 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const x = D(cmd.x);
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'm')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
 
           // Only add move if point is inside bounds
           if (pointInBBox({ x, y }, bounds)) {
@@ -1587,8 +1589,10 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const x = D(cmd.x);
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'l')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
 
           // Clip line segment
           const clipped = clipLine(
@@ -1629,7 +1633,9 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const x = D(cmd.x);
+          // BUG FIX: Handle relative coordinates (lowercase 'h')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
           const clipped = clipLine(
             { x: currentX, y: currentY },
             { x, y: currentY },
@@ -1665,7 +1671,9 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'v')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
           const clipped = clipLine(
             { x: currentX, y: currentY },
             { x: currentX, y },
@@ -1708,8 +1716,10 @@ export function clipPathToViewBox(pathCommands, viewBox) {
           // BUG FIX: Sample the curve to better approximate clipping
           // A full implementation would clip curves exactly, but sampling provides
           // a reasonable approximation (WHY: curves can extend outside bounds even if endpoints are inside)
-          const x = D(cmd.x);
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'c', 's', 'q', 't', 'a')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
 
           // Sample 10 points along the curve path from current to end
           const samples = 10;

package/src/svg-matrix-lib.js

@@ -5,7 +5,7 @@
  * Works in both Node.js and browser environments.
  *
  * @module svg-matrix-lib
- * @version 1.3.2
+ * @version 1.3.5
  * @license MIT
  *
  * @example Browser usage:
@@ -32,7 +32,7 @@ Decimal.set({ precision: 80 });
 /**
  * Library version
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.5";
 
 // Export core classes
 export { Decimal, Matrix, Vector };

package/src/svg-toolbox-lib.js

@@ -5,7 +5,7 @@
  * Provides 69+ operations for cleaning, optimizing, and transforming SVG files.
  *
  * @module svg-toolbox-lib
- * @version 1.3.2
+ * @version 1.3.5
  * @license MIT
  *
  * @example Browser usage:
@@ -34,7 +34,7 @@ import * as SVGToolboxModule from "./svg-toolbox.js";
 /**
  * Library version
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.5";
 
 /**
  * Default export for browser global (window.SVGToolbox)

package/src/svg-toolbox.js

@@ -266,6 +266,7 @@ const SVG11_ATTRIBUTES = new Set([
   "filter",
   "filterRes",
   "filterUnits",
+  "filterPrimitiveUnits",
   "flood-color",
   "flood-opacity",
   "font-family",
@@ -14171,6 +14172,7 @@ export const fixInvalidSVG = createOperation((doc, options = {}) => {
     maskUnits: ["userSpaceOnUse", "objectBoundingBox"],
     maskContentUnits: ["userSpaceOnUse", "objectBoundingBox"],
     filterUnits: ["userSpaceOnUse", "objectBoundingBox"],
+    filterPrimitiveUnits: ["userSpaceOnUse", "objectBoundingBox"],
     primitiveUnits: ["userSpaceOnUse", "objectBoundingBox"],
     markerUnits: ["strokeWidth", "userSpaceOnUse"],
     // Other
@@ -16143,11 +16145,20 @@ export async function validateSVGAsync(input, options = {}) {
     // - title/desc (text content for accessibility - not SVG structure)
     // - metadata (can contain arbitrary XML metadata like Dublin Core, RDF)
     // - Namespaced elements (e.g., d:testDescription, rdf:RDF)
+    // - Elements in non-SVG namespaces (e.g., <foo xmlns="http://example.org/foo">)
     const isNamespacedElement = tagName.includes(":");
+    const isNonSvgNamespace =
+      el.namespaceURI && el.namespaceURI !== "http://www.w3.org/2000/svg";
+    // Check for explicit xmlns attribute declaring a non-SVG namespace
+    const xmlns = el.getAttribute ? el.getAttribute("xmlns") : null;
+    const hasNonSvgXmlns =
+      xmlns && xmlns !== "http://www.w3.org/2000/svg";
     const inNonSvgContext =
       insideNonSvgContext ||
       NON_SVG_CONTEXT_ELEMENTS.has(tagLower) ||
-      isNamespacedElement;
+      isNamespacedElement ||
+      isNonSvgNamespace ||
+      hasNonSvgXmlns;
 
     // Skip validation entirely if we're in non-SVG context
     if (!inNonSvgContext) {
@@ -16206,11 +16217,20 @@ export async function validateSVGAsync(input, options = {}) {
     // - title/desc (text content elements)
     // - metadata (arbitrary XML metadata content)
     // - Namespaced elements (e.g., d:testDescription, rdf:RDF)
+    // - Elements in non-SVG namespaces (e.g., <foo xmlns="http://example.org/foo">)
     const isNamespacedElement = el.tagName.includes(":");
+    const isNonSvgNamespace =
+      el.namespaceURI && el.namespaceURI !== "http://www.w3.org/2000/svg";
+    // Check for explicit xmlns attribute declaring a non-SVG namespace
+    const xmlns = el.getAttribute ? el.getAttribute("xmlns") : null;
+    const hasNonSvgXmlns =
+      xmlns && xmlns !== "http://www.w3.org/2000/svg";
     const inNonSvgContext =
       insideNonSvgContext ||
       NON_SVG_CONTEXT_ELEMENTS.has(tagName) ||
-      isNamespacedElement;
+      isNamespacedElement ||
+      isNonSvgNamespace ||
+      hasNonSvgXmlns;
 
     // Skip attribute validation entirely if we're in non-SVG context
     if (!inNonSvgContext) {
@@ -16446,6 +16466,7 @@ export async function validateSVGAsync(input, options = {}) {
     maskUnits: new Set(["userSpaceOnUse", "objectBoundingBox"]),
     maskContentUnits: new Set(["userSpaceOnUse", "objectBoundingBox"]),
     filterUnits: new Set(["userSpaceOnUse", "objectBoundingBox"]),
+    filterPrimitiveUnits: new Set(["userSpaceOnUse", "objectBoundingBox"]),
     primitiveUnits: new Set(["userSpaceOnUse", "objectBoundingBox"]),
     patternUnits: new Set(["userSpaceOnUse", "objectBoundingBox"]),
     patternContentUnits: new Set(["userSpaceOnUse", "objectBoundingBox"]),

package/src/svg-validation-data.js

@@ -151,6 +151,7 @@ export const SVG11_ATTRIBUTES = new Set([
   "filter",
   "filterres",
   "filterunits",
+  "filterprimitiveunits",
   "flood-color",
   "flood-opacity",
   "font-family",

package/src/svgm-lib.js

@@ -5,7 +5,7 @@
  * comprehensive SVG manipulation (SVGToolbox). Works in Node.js and browser.
  *
  * @module svgm-lib
- * @version 1.3.2
+ * @version 1.3.5
  * @license MIT
  *
  * @example Browser usage:
@@ -49,7 +49,7 @@ Decimal.set({ precision: 80 });
 /**
  * Library version
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.5";
 
 // Export math classes
 export { Decimal, Matrix, Vector };

package/src/transform-decomposition.js

@@ -294,7 +294,15 @@ export function decomposeMatrix(matrix) {
   }
 
   // Calculate rotation angle from first column
-  const rotation = Decimal.atan2(b, a);
+  // BUG FIX: When scaleX is negative (reflection), we must compute rotation from negated
+  // column vector to separate the reflection component from the rotation component.
+  // Without this fix, X-flip matrix(-1,0,0,1,0,0) gives rotation=π instead of 0.
+  let rotation;
+  if (scaleX.lessThan(0)) {
+    rotation = Decimal.atan2(b.neg(), a.neg());
+  } else {
+    rotation = Decimal.atan2(b, a);
+  }
 
   // Calculate skew
   // After removing rotation and scale, we get the skew