⚡️(export) improve svg width when undefined

We improved the svg width calculation when the
width attribute is undefined by trying to use
the style attribute before falling back to a
default value.

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx

@@ -21,9 +21,6 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping']['
 
     if (blob.type.includes('svg')) {
       const svgText = await blob.text();
-      const FALLBACK_SIZE = 536;
-      previewWidth = previewWidth || FALLBACK_SIZE;
-
       const result = await convertSvgToPng(svgText, previewWidth);
       pngConverted = result.png;
       dimensions = { width: result.width, height: result.height };

src/frontend/apps/impress/src/features/docs/doc-export/utils.ts

@@ -36,7 +36,7 @@ export function downloadFile(blob: Blob, filename: string) {
  */
 export async function convertSvgToPng(
   svgText: string,
-  width: number,
+  width?: number,
 ): Promise<{ png: string; width: number; height: number }> {
   // Create a canvas and render the SVG onto it
   const canvas = document.createElement('canvas');
@@ -54,26 +54,36 @@ export async function convertSvgToPng(
   const svgElement = svgDoc.documentElement;
 
   // Get viewBox or fallback to width/height attributes
-  let height;
+  let calculatedHeight: number | undefined;
   const svgWidth = svgElement.getAttribute?.('width');
   const svgHeight = svgElement.getAttribute?.('height');
   const viewBox = svgElement.getAttribute('viewBox')?.split(' ').map(Number);
 
   const originalWidth = svgWidth ? parseInt(svgWidth) : viewBox?.[2];
   const originalHeight = svgHeight ? parseInt(svgHeight) : viewBox?.[3];
-  if (originalWidth && originalHeight) {
-    const aspectRatio = originalHeight / originalWidth;
-    height = Math.round(width * aspectRatio);
-  }
 
   const svg = Canvg.fromString(ctx, svgText);
-  svg.resize(width, height, true);
+
+  const FALLBACK_WIDTH = 536;
+
+  // Resize if width provided, preserving aspect ratio
+  if (originalWidth && originalHeight && width) {
+    const aspectRatio = originalHeight / originalWidth;
+    calculatedHeight = Math.round(width * aspectRatio);
+    svg.resize(width, calculatedHeight, true);
+  } else if (!width && !originalWidth) {
+    svg.resize(FALLBACK_WIDTH, undefined, true);
+  }
+
   await svg.render();
 
+  const returnWidth = width || originalWidth || FALLBACK_WIDTH;
+  const returnHeight = calculatedHeight || returnWidth;
+
   return {
     png: canvas.toDataURL('image/png'),
-    width,
+    width: returnWidth,
-    height: height || width,
+    height: returnHeight,
   };
 }