@pixldocs/canvas-renderer 0.3.21 → 0.3.22

package/dist/index.d.ts

@@ -211,6 +211,14 @@ export declare class PixldocsRenderer {
     private paintPageBackground;
     private renderPageViaPreviewCanvas;
     private captureSvgViaPreviewCanvas;
+    /**
+     * Normalize the SVG's width/height/viewBox to match the logical page dimensions.
+     * Fabric's toSVG() may output dimensions scaled by the canvas element's actual
+     * pixel size (e.g., 2x due to devicePixelRatio), causing svg2pdf to render
+     * content at the wrong scale. This rewrites the root <svg> attributes to ensure
+     * the SVG coordinate system matches the intended page size exactly.
+     */
+    private normalizeSvgDimensions;
     /**
      * Find the Fabric.Canvas instance that belongs to a given container element,
      * using the global __fabricCanvasRegistry (set by PageCanvas).

package/dist/index.js

@@ -11075,7 +11075,8 @@ class PixldocsRenderer {
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
             fabricInstance.viewportTransform = [1, 0, 0, 1, 0, 0];
             fabricInstance.svgViewportTransformation = false;
-            const svgString = fabricInstance.toSVG();
+            let svgString = fabricInstance.toSVG();
+            svgString = this.normalizeSvgDimensions(svgString, canvasWidth, canvasHeight);
             if (prevVPT) fabricInstance.viewportTransform = prevVPT;
             fabricInstance.svgViewportTransformation = prevSvgVPT;
             const page = config.pages[pageIndex];
@@ -11108,6 +11109,33 @@ class PixldocsRenderer {
       );
     });
   }
+  /**
+   * Normalize the SVG's width/height/viewBox to match the logical page dimensions.
+   * Fabric's toSVG() may output dimensions scaled by the canvas element's actual
+   * pixel size (e.g., 2x due to devicePixelRatio), causing svg2pdf to render
+   * content at the wrong scale. This rewrites the root <svg> attributes to ensure
+   * the SVG coordinate system matches the intended page size exactly.
+   */
+  normalizeSvgDimensions(svg, targetWidth, targetHeight) {
+    const widthMatch = svg.match(/<svg[^>]*\bwidth="([^"]+)"/);
+    const heightMatch = svg.match(/<svg[^>]*\bheight="([^"]+)"/);
+    const svgWidth = widthMatch ? parseFloat(widthMatch[1]) : targetWidth;
+    const svgHeight = heightMatch ? parseFloat(heightMatch[1]) : targetHeight;
+    if (Math.abs(svgWidth - targetWidth) < 1 && Math.abs(svgHeight - targetHeight) < 1) {
+      return svg;
+    }
+    console.log(
+      `[canvas-renderer][svg-normalize] SVG dimensions ${svgWidth}x${svgHeight} → ${targetWidth}x${targetHeight}`
+    );
+    let normalized = svg.replace(/(<svg[^>]*\b)width="[^"]*"/, `$1width="${targetWidth}"`).replace(/(<svg[^>]*\b)height="[^"]*"/, `$1height="${targetHeight}"`);
+    const viewBox = `0 0 ${svgWidth} ${svgHeight}`;
+    if (/viewBox="[^"]*"/.test(normalized)) {
+      normalized = normalized.replace(/viewBox="[^"]*"/, `viewBox="${viewBox}"`);
+    } else {
+      normalized = normalized.replace(/<svg\b/, `<svg viewBox="${viewBox}"`);
+    }
+    return normalized;
+  }
   /**
    * Find the Fabric.Canvas instance that belongs to a given container element,
    * using the global __fabricCanvasRegistry (set by PageCanvas).