dom-to-pptx 1.0.7 → 1.0.8

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8] - 2025-12-12 (Hot-Patch)
+
+### Fixed
+
+- **Fixed SVGs not getting converted**: Seperated the logic to handle SVGs and Web Components/Icons.
+
+
 ## [1.0.7] - 2025-12-12
 
 ### Fixed

package/README.md

@@ -1,6 +1,6 @@
 # dom-to-pptx
 
-**The High-Fidelity HTML to PowerPoint Converter (v1.0.7).**
+**The High-Fidelity HTML to PowerPoint Converter (v1.0.8).**
 
 Most HTML-to-PPTX libraries fail when faced with modern web design. They break on gradients, misalign text, ignore rounded corners, or simply take a screenshot (which isn't editable).
 

package/dist/dom-to-pptx.bundle.js

@@ -17808,6 +17808,69 @@
     return Math.round(Math.atan2(b, a) * (180 / Math.PI));
   }
 
+  function svgToPng(node) {
+    return new Promise((resolve) => {
+      const clone = node.cloneNode(true);
+      const rect = node.getBoundingClientRect();
+      const width = rect.width || 300;
+      const height = rect.height || 150;
+
+      function inlineStyles(source, target) {
+        const computed = window.getComputedStyle(source);
+        const properties = [
+          'fill',
+          'stroke',
+          'stroke-width',
+          'stroke-linecap',
+          'stroke-linejoin',
+          'opacity',
+          'font-family',
+          'font-size',
+          'font-weight',
+        ];
+
+        if (computed.fill === 'none') target.setAttribute('fill', 'none');
+        else if (computed.fill) target.style.fill = computed.fill;
+
+        if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+        else if (computed.stroke) target.style.stroke = computed.stroke;
+
+        properties.forEach((prop) => {
+          if (prop !== 'fill' && prop !== 'stroke') {
+            const val = computed[prop];
+            if (val && val !== 'auto') target.style[prop] = val;
+          }
+        });
+
+        for (let i = 0; i < source.children.length; i++) {
+          if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+        }
+      }
+
+      inlineStyles(node, clone);
+      clone.setAttribute('width', width);
+      clone.setAttribute('height', height);
+      clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+      const xml = new XMLSerializer().serializeToString(clone);
+      const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+      const img = new Image();
+      img.crossOrigin = 'Anonymous';
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const scale = 3;
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+        const ctx = canvas.getContext('2d');
+        ctx.scale(scale, scale);
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/png'));
+      };
+      img.onerror = () => resolve(null);
+      img.src = svgUrl;
+    });
+  }
+
   function getVisibleShadow(shadowStr, scale) {
     if (!shadowStr || shadowStr === 'none') return null;
     const shadows = shadowStr.split(/,(?![^()]*\))/);
@@ -18318,23 +18381,18 @@
 
     const items = [];
 
-    // --- ASYNC JOB: SVGs / Icons ---
-    if (
-      node.nodeName.toUpperCase() === 'SVG' ||
-      node.tagName.includes('-') ||
-      node.tagName === 'ION-ICON'
-    ) {
+    // --- ASYNC JOB: SVG Tags ---
+    if (node.nodeName.toUpperCase() === 'SVG') {
       const item = {
         type: 'image',
         zIndex,
         domOrder,
-        options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+        options: { data: null, x, y, w, h, rotate: rotation },
       };
 
-      // Create Job
       const job = async () => {
-        const pngData = await elementToCanvasImage(node, widthPx, heightPx);
-        if (pngData) item.options.data = pngData;
+        const processed = await svgToPng(node);
+        if (processed) item.options.data = processed;
         else item.skip = true;
       };
 
@@ -18384,6 +18442,34 @@
       return { items: [item], job, stopRecursion: true };
     }
 
+    // --- ASYNC JOB: Icons and Other Elements ---
+    if (
+      node.tagName.toUpperCase() === 'MATERIAL-ICON' ||
+      node.tagName.toUpperCase() === 'ICONIFY-ICON' ||
+      node.tagName.toUpperCase() === 'REMIX-ICON' ||
+      node.tagName.toUpperCase() === 'ION-ICON' ||
+      node.tagName.toUpperCase() === 'EVA-ICON' ||
+      node.tagName.toUpperCase() === 'BOX-ICON' ||
+      node.tagName.toUpperCase() === 'FA-ICON' ||
+      node.tagName.includes('-')
+    ) {
+      const item = {
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+      };
+
+      // Create Job
+      const job = async () => {
+        const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+        if (pngData) item.options.data = pngData;
+        else item.skip = true;
+      };
+
+      return { items: [item], job, stopRecursion: true };
+    }
+
     // Radii logic
     const borderRadiusValue = parseFloat(style.borderRadius) || 0;
     const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;

package/dist/dom-to-pptx.cjs

@@ -8135,6 +8135,69 @@ function getRotation(transformStr) {
   return Math.round(Math.atan2(b, a) * (180 / Math.PI));
 }
 
+function svgToPng(node) {
+  return new Promise((resolve) => {
+    const clone = node.cloneNode(true);
+    const rect = node.getBoundingClientRect();
+    const width = rect.width || 300;
+    const height = rect.height || 150;
+
+    function inlineStyles(source, target) {
+      const computed = window.getComputedStyle(source);
+      const properties = [
+        'fill',
+        'stroke',
+        'stroke-width',
+        'stroke-linecap',
+        'stroke-linejoin',
+        'opacity',
+        'font-family',
+        'font-size',
+        'font-weight',
+      ];
+
+      if (computed.fill === 'none') target.setAttribute('fill', 'none');
+      else if (computed.fill) target.style.fill = computed.fill;
+
+      if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+      else if (computed.stroke) target.style.stroke = computed.stroke;
+
+      properties.forEach((prop) => {
+        if (prop !== 'fill' && prop !== 'stroke') {
+          const val = computed[prop];
+          if (val && val !== 'auto') target.style[prop] = val;
+        }
+      });
+
+      for (let i = 0; i < source.children.length; i++) {
+        if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+      }
+    }
+
+    inlineStyles(node, clone);
+    clone.setAttribute('width', width);
+    clone.setAttribute('height', height);
+    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+    const xml = new XMLSerializer().serializeToString(clone);
+    const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const scale = 3;
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0, width, height);
+      resolve(canvas.toDataURL('image/png'));
+    };
+    img.onerror = () => resolve(null);
+    img.src = svgUrl;
+  });
+}
+
 function getVisibleShadow(shadowStr, scale) {
   if (!shadowStr || shadowStr === 'none') return null;
   const shadows = shadowStr.split(/,(?![^()]*\))/);
@@ -8645,23 +8708,18 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
 
   const items = [];
 
-  // --- ASYNC JOB: SVGs / Icons ---
-  if (
-    node.nodeName.toUpperCase() === 'SVG' ||
-    node.tagName.includes('-') ||
-    node.tagName === 'ION-ICON'
-  ) {
+  // --- ASYNC JOB: SVG Tags ---
+  if (node.nodeName.toUpperCase() === 'SVG') {
     const item = {
       type: 'image',
       zIndex,
       domOrder,
-      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+      options: { data: null, x, y, w, h, rotate: rotation },
     };
 
-    // Create Job
     const job = async () => {
-      const pngData = await elementToCanvasImage(node, widthPx, heightPx);
-      if (pngData) item.options.data = pngData;
+      const processed = await svgToPng(node);
+      if (processed) item.options.data = processed;
       else item.skip = true;
     };
 
@@ -8711,6 +8769,34 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
     return { items: [item], job, stopRecursion: true };
   }
 
+  // --- ASYNC JOB: Icons and Other Elements ---
+  if (
+    node.tagName.toUpperCase() === 'MATERIAL-ICON' ||
+    node.tagName.toUpperCase() === 'ICONIFY-ICON' ||
+    node.tagName.toUpperCase() === 'REMIX-ICON' ||
+    node.tagName.toUpperCase() === 'ION-ICON' ||
+    node.tagName.toUpperCase() === 'EVA-ICON' ||
+    node.tagName.toUpperCase() === 'BOX-ICON' ||
+    node.tagName.toUpperCase() === 'FA-ICON' ||
+    node.tagName.includes('-')
+  ) {
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+    };
+
+    // Create Job
+    const job = async () => {
+      const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+      if (pngData) item.options.data = pngData;
+      else item.skip = true;
+    };
+
+    return { items: [item], job, stopRecursion: true };
+  }
+
   // Radii logic
   const borderRadiusValue = parseFloat(style.borderRadius) || 0;
   const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;

package/dist/dom-to-pptx.min.js

@@ -8135,6 +8135,69 @@
       return Math.round(Math.atan2(b, a) * (180 / Math.PI));
     }
 
+    function svgToPng(node) {
+      return new Promise((resolve) => {
+        const clone = node.cloneNode(true);
+        const rect = node.getBoundingClientRect();
+        const width = rect.width || 300;
+        const height = rect.height || 150;
+
+        function inlineStyles(source, target) {
+          const computed = window.getComputedStyle(source);
+          const properties = [
+            'fill',
+            'stroke',
+            'stroke-width',
+            'stroke-linecap',
+            'stroke-linejoin',
+            'opacity',
+            'font-family',
+            'font-size',
+            'font-weight',
+          ];
+
+          if (computed.fill === 'none') target.setAttribute('fill', 'none');
+          else if (computed.fill) target.style.fill = computed.fill;
+
+          if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+          else if (computed.stroke) target.style.stroke = computed.stroke;
+
+          properties.forEach((prop) => {
+            if (prop !== 'fill' && prop !== 'stroke') {
+              const val = computed[prop];
+              if (val && val !== 'auto') target.style[prop] = val;
+            }
+          });
+
+          for (let i = 0; i < source.children.length; i++) {
+            if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+          }
+        }
+
+        inlineStyles(node, clone);
+        clone.setAttribute('width', width);
+        clone.setAttribute('height', height);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+        const xml = new XMLSerializer().serializeToString(clone);
+        const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          const scale = 3;
+          canvas.width = width * scale;
+          canvas.height = height * scale;
+          const ctx = canvas.getContext('2d');
+          ctx.scale(scale, scale);
+          ctx.drawImage(img, 0, 0, width, height);
+          resolve(canvas.toDataURL('image/png'));
+        };
+        img.onerror = () => resolve(null);
+        img.src = svgUrl;
+      });
+    }
+
     function getVisibleShadow(shadowStr, scale) {
       if (!shadowStr || shadowStr === 'none') return null;
       const shadows = shadowStr.split(/,(?![^()]*\))/);
@@ -8645,23 +8708,18 @@
 
       const items = [];
 
-      // --- ASYNC JOB: SVGs / Icons ---
-      if (
-        node.nodeName.toUpperCase() === 'SVG' ||
-        node.tagName.includes('-') ||
-        node.tagName === 'ION-ICON'
-      ) {
+      // --- ASYNC JOB: SVG Tags ---
+      if (node.nodeName.toUpperCase() === 'SVG') {
         const item = {
           type: 'image',
           zIndex,
           domOrder,
-          options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+          options: { data: null, x, y, w, h, rotate: rotation },
         };
 
-        // Create Job
         const job = async () => {
-          const pngData = await elementToCanvasImage(node, widthPx, heightPx);
-          if (pngData) item.options.data = pngData;
+          const processed = await svgToPng(node);
+          if (processed) item.options.data = processed;
           else item.skip = true;
         };
 
@@ -8711,6 +8769,34 @@
         return { items: [item], job, stopRecursion: true };
       }
 
+      // --- ASYNC JOB: Icons and Other Elements ---
+      if (
+        node.tagName.toUpperCase() === 'MATERIAL-ICON' ||
+        node.tagName.toUpperCase() === 'ICONIFY-ICON' ||
+        node.tagName.toUpperCase() === 'REMIX-ICON' ||
+        node.tagName.toUpperCase() === 'ION-ICON' ||
+        node.tagName.toUpperCase() === 'EVA-ICON' ||
+        node.tagName.toUpperCase() === 'BOX-ICON' ||
+        node.tagName.toUpperCase() === 'FA-ICON' ||
+        node.tagName.includes('-')
+      ) {
+        const item = {
+          type: 'image',
+          zIndex,
+          domOrder,
+          options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+        };
+
+        // Create Job
+        const job = async () => {
+          const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+          if (pngData) item.options.data = pngData;
+          else item.skip = true;
+        };
+
+        return { items: [item], job, stopRecursion: true };
+      }
+
       // Radii logic
       const borderRadiusValue = parseFloat(style.borderRadius) || 0;
       const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;

package/dist/dom-to-pptx.mjs

@@ -8111,6 +8111,69 @@ function getRotation(transformStr) {
   return Math.round(Math.atan2(b, a) * (180 / Math.PI));
 }
 
+function svgToPng(node) {
+  return new Promise((resolve) => {
+    const clone = node.cloneNode(true);
+    const rect = node.getBoundingClientRect();
+    const width = rect.width || 300;
+    const height = rect.height || 150;
+
+    function inlineStyles(source, target) {
+      const computed = window.getComputedStyle(source);
+      const properties = [
+        'fill',
+        'stroke',
+        'stroke-width',
+        'stroke-linecap',
+        'stroke-linejoin',
+        'opacity',
+        'font-family',
+        'font-size',
+        'font-weight',
+      ];
+
+      if (computed.fill === 'none') target.setAttribute('fill', 'none');
+      else if (computed.fill) target.style.fill = computed.fill;
+
+      if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+      else if (computed.stroke) target.style.stroke = computed.stroke;
+
+      properties.forEach((prop) => {
+        if (prop !== 'fill' && prop !== 'stroke') {
+          const val = computed[prop];
+          if (val && val !== 'auto') target.style[prop] = val;
+        }
+      });
+
+      for (let i = 0; i < source.children.length; i++) {
+        if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+      }
+    }
+
+    inlineStyles(node, clone);
+    clone.setAttribute('width', width);
+    clone.setAttribute('height', height);
+    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+    const xml = new XMLSerializer().serializeToString(clone);
+    const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const scale = 3;
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0, width, height);
+      resolve(canvas.toDataURL('image/png'));
+    };
+    img.onerror = () => resolve(null);
+    img.src = svgUrl;
+  });
+}
+
 function getVisibleShadow(shadowStr, scale) {
   if (!shadowStr || shadowStr === 'none') return null;
   const shadows = shadowStr.split(/,(?![^()]*\))/);
@@ -8621,23 +8684,18 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
 
   const items = [];
 
-  // --- ASYNC JOB: SVGs / Icons ---
-  if (
-    node.nodeName.toUpperCase() === 'SVG' ||
-    node.tagName.includes('-') ||
-    node.tagName === 'ION-ICON'
-  ) {
+  // --- ASYNC JOB: SVG Tags ---
+  if (node.nodeName.toUpperCase() === 'SVG') {
     const item = {
       type: 'image',
       zIndex,
       domOrder,
-      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+      options: { data: null, x, y, w, h, rotate: rotation },
     };
 
-    // Create Job
     const job = async () => {
-      const pngData = await elementToCanvasImage(node, widthPx, heightPx);
-      if (pngData) item.options.data = pngData;
+      const processed = await svgToPng(node);
+      if (processed) item.options.data = processed;
       else item.skip = true;
     };
 
@@ -8687,6 +8745,34 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
     return { items: [item], job, stopRecursion: true };
   }
 
+  // --- ASYNC JOB: Icons and Other Elements ---
+  if (
+    node.tagName.toUpperCase() === 'MATERIAL-ICON' ||
+    node.tagName.toUpperCase() === 'ICONIFY-ICON' ||
+    node.tagName.toUpperCase() === 'REMIX-ICON' ||
+    node.tagName.toUpperCase() === 'ION-ICON' ||
+    node.tagName.toUpperCase() === 'EVA-ICON' ||
+    node.tagName.toUpperCase() === 'BOX-ICON' ||
+    node.tagName.toUpperCase() === 'FA-ICON' ||
+    node.tagName.includes('-')
+  ) {
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+    };
+
+    // Create Job
+    const job = async () => {
+      const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+      if (pngData) item.options.data = pngData;
+      else item.skip = true;
+    };
+
+    return { items: [item], job, stopRecursion: true };
+  }
+
   // Radii logic
   const borderRadiusValue = parseFloat(style.borderRadius) || 0;
   const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-to-pptx",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts. It translates CSS Flexbox/Grid, linear-gradients, box-shadows, and typography into native PowerPoint shapes, enabling precise, design-faithful slide generation directly from the browser.",
   "main": "dist/dom-to-pptx.cjs",
   "module": "dist/dom-to-pptx.mjs",

package/src/index.js

@@ -12,6 +12,7 @@ import {
   getVisibleShadow,
   generateGradientSVG,
   getRotation,
+  svgToPng,
   getPadding,
   getSoftEdges,
   generateBlurredSVG,
@@ -312,23 +313,18 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
 
   const items = [];
 
-  // --- ASYNC JOB: SVGs / Icons ---
-  if (
-    node.nodeName.toUpperCase() === 'SVG' ||
-    node.tagName.includes('-') ||
-    node.tagName === 'ION-ICON'
-  ) {
+  // --- ASYNC JOB: SVG Tags ---
+  if (node.nodeName.toUpperCase() === 'SVG') {
     const item = {
       type: 'image',
       zIndex,
       domOrder,
-      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+      options: { data: null, x, y, w, h, rotate: rotation },
     };
 
-    // Create Job
     const job = async () => {
-      const pngData = await elementToCanvasImage(node, widthPx, heightPx);
-      if (pngData) item.options.data = pngData;
+      const processed = await svgToPng(node);
+      if (processed) item.options.data = processed;
       else item.skip = true;
     };
 
@@ -378,6 +374,34 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
     return { items: [item], job, stopRecursion: true };
   }
 
+  // --- ASYNC JOB: Icons and Other Elements ---
+  if (
+    node.tagName.toUpperCase() === 'MATERIAL-ICON' ||
+    node.tagName.toUpperCase() === 'ICONIFY-ICON' ||
+    node.tagName.toUpperCase() === 'REMIX-ICON' ||
+    node.tagName.toUpperCase() === 'ION-ICON' ||
+    node.tagName.toUpperCase() === 'EVA-ICON' ||
+    node.tagName.toUpperCase() === 'BOX-ICON' ||
+    node.tagName.toUpperCase() === 'FA-ICON' ||
+    node.tagName.includes('-')
+  ) {
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+    };
+
+    // Create Job
+    const job = async () => {
+      const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+      if (pngData) item.options.data = pngData;
+      else item.skip = true;
+    };
+
+    return { items: [item], job, stopRecursion: true };
+  }
+
   // Radii logic
   const borderRadiusValue = parseFloat(style.borderRadius) || 0;
   const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;