@zumer/snapdom 1.9.7 → 1.9.8

package/README.md

@@ -1,8 +1,6 @@
-# snapDOM
-
 <p align="center">
   <a href="http://zumerlab.github.io/snapdom">
-    <img src="https://raw.githubusercontent.com/zumerlab/snapdom/main/docs/assets/hero.png" width="80%">
+    <img src="https://raw.githubusercontent.com/zumerlab/snapdom/main/docs/assets/newhero.png" width="70%">
   </a>
 </p>
 
@@ -28,13 +26,15 @@
   </a>
 </p>
 
+# snapDOM
+
 **snapDOM** is a fast and accurate DOM-to-image capture tool built for **Zumly**, a zoom-based view transition framework.
 
 It captures any HTML element as a scalable SVG image, preserving styles, fonts, background images, pseudo-elements, and even shadow DOM. It also supports export to raster image formats and canvas.
 
 * 📸 Full DOM capture
 * 🎨 Embedded styles, pseudo-elements, and fonts
-* 🖼️ Export to SVG, PNG, JPG, WebP, or `canvas`
+* 🖼️ Export to SVG, PNG, JPG, WebP, `canvas`, or Blob
 * ⚡ Ultra fast, no dependencies
 * 📦 100% based on standard Web APIs
 
@@ -54,6 +54,12 @@ npm i @zumer/snapdom
 yarn add @zumer/snapdom
 ```
 
+Then import it in your code:
+
+```js
+import { snapdom } from '@zumer/snapdom';
+```
+
 ### CDN
 
 ```html
@@ -146,6 +152,7 @@ All capture methods accept an `options` object:
 | `fast`            | boolean  | `true`   | Skips idle delay for faster results        |
 | `embedFonts`      | boolean  | `false`  | Inlines fonts (icon fonts always embedded) |
 | `scale`           | number   | `1`      | Output scale multiplier                    |
+| `dpr`             | number   | `devicePixelRatio` | Device pixel ratio                 |
 | `width`           | number   | -        | Output specific width size                 |
 | `height`          | number   | -        | Output specific height size                |
 | `backgroundColor` | string   | `"#fff"` | Fallback color for JPG/WebP                |
@@ -217,7 +224,7 @@ const result = await snapdom(element, {
 
 ### `preCache()` – Optional helper
 
-The `preCache()` function can be used to load external resources (like images and fonts) in advance. It is specially useful when the element to capure is big and complex.
+The `preCache()` function can be used to load external resources (like images and fonts) in advance. It is specially useful when the element to capture is big and complex.
 
 ```js
 import { preCache } from '@zumer/snapdom';
@@ -250,7 +257,7 @@ import { snapdom, preCache } from './snapdom.mjs';
 
 ## Limitations
 
-* External images shloud be CORS-accessible (use `useProxy` option for handling CORS denied)
+* External images should be CORS-accessible (use `useProxy` option for handling CORS denied)
 * Iframes are not supported
 * When WebP format is used on Safari, it will fallback to PNG rendering.
 * `@font-face` CSS rule is well supported, but if need to use JS `FontFace()`, see this workaround [`#43`](https://github.com/zumerlab/snapdom/issues/43)
@@ -311,6 +318,36 @@ npm install
 npm run test:benchmark
 ```
 
+
+## Roadmap
+
+Planned improvements for future versions of SnapDOM:
+
+* [ ] **Implement plugin system**
+  SnapDOM will support external plugins to extend or override internal behavior (e.g. custom node transformers, exporters, or filters).
+
+* [ ] **Refactor to modular architecture**
+  Internal logic will be split into smaller, focused modules to improve maintainability and code reuse.
+
+* [X] **Decouple internal logic from global options**
+  Functions will be redesigned to avoid relying directly on `options`. A centralized capture context will improve clarity, autonomy, and testability. See [`next` branch](https://github.com/zumerlab/snapdom/tree/main)
+
+* [ ] **Expose cache control**
+  Users will be able to manually clear image and font caches or configure their own caching strategies.
+
+* [ ] **Auto font preloading**
+  Required fonts will be automatically detected and preloaded before capture, reducing the need for manual `preCache()` calls.
+
+* [ ] **Document plugin development**
+  A full guide will be provided for creating and registering custom SnapDOM plugins.
+
+* [ ] **Make export utilities tree-shakeable**
+  Export functions like `toPng`, `toJpg`, `toBlob`, etc. will be restructured into independent modules to support tree shaking and minimal builds.
+
+Have ideas or feature requests?
+Feel free to share suggestions or feedback in [GitHub Discussions](https://github.com/zumerlab/snapdom/discussions).
+
+
 ## Development
 
 To contribute or build snapDOM locally:
@@ -351,16 +388,21 @@ For detailed contribution guidelines, please see [CONTRIBUTING](https://github.c
 <a href="https://github.com/tinchox5" title="tinchox5"><img src="https://avatars.githubusercontent.com/u/11557901?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="tinchox5"/></a>
 <a href="https://github.com/tarwin" title="tarwin"><img src="https://avatars.githubusercontent.com/u/646149?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="tarwin"/></a>
 <a href="https://github.com/17biubiu" title="17biubiu"><img src="https://avatars.githubusercontent.com/u/13295895?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="17biubiu"/></a>
+<a href="https://github.com/av01d" title="av01d"><img src="https://avatars.githubusercontent.com/u/6247646?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="av01d"/></a>
+<a href="https://github.com/CHOYSEN" title="CHOYSEN"><img src="https://avatars.githubusercontent.com/u/25995358?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="CHOYSEN"/></a>
 <a href="https://github.com/pedrocateexte" title="pedrocateexte"><img src="https://avatars.githubusercontent.com/u/207524750?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="pedrocateexte"/></a>
 <a href="https://github.com/domialex" title="domialex"><img src="https://avatars.githubusercontent.com/u/4694217?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="domialex"/></a>
 <a href="https://github.com/elliots" title="elliots"><img src="https://avatars.githubusercontent.com/u/622455?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="elliots"/></a>
 <a href="https://github.com/jswhisperer" title="jswhisperer"><img src="https://avatars.githubusercontent.com/u/1177690?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="jswhisperer"/></a>
+<a href="https://github.com/sharuzzaman" title="sharuzzaman"><img src="https://avatars.githubusercontent.com/u/7421941?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="sharuzzaman"/></a>
 <a href="https://github.com/simon1uo" title="simon1uo"><img src="https://avatars.githubusercontent.com/u/60037549?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="simon1uo"/></a>
 <a href="https://github.com/titoBouzout" title="titoBouzout"><img src="https://avatars.githubusercontent.com/u/64156?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="titoBouzout"/></a>
 <a href="https://github.com/jhbae200" title="jhbae200"><img src="https://avatars.githubusercontent.com/u/20170610?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="jhbae200"/></a>
 <a href="https://github.com/miusuncle" title="miusuncle"><img src="https://avatars.githubusercontent.com/u/7549857?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="miusuncle"/></a>
 <a href="https://github.com/rbbydotdev" title="rbbydotdev"><img src="https://avatars.githubusercontent.com/u/101137670?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="rbbydotdev"/></a>
+<a href="https://github.com/zhanghaotian2018" title="zhanghaotian2018"><img src="https://avatars.githubusercontent.com/u/169218899?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="zhanghaotian2018"/></a>
 <a href="https://github.com/kohaiy" title="kohaiy"><img src="https://avatars.githubusercontent.com/u/15622127?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="kohaiy"/></a>
+<a href="https://github.com/fu050409" title="fu050409"><img src="https://avatars.githubusercontent.com/u/46275354?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="fu050409"/></a>
 </p>
 <!-- CONTRIBUTORS:END -->
 
@@ -370,6 +412,10 @@ Special thanks to [@megaphonecolin](https://github.com/megaphonecolin) for suppo
 
 If you'd like to support this project too, you can [become a sponsor](https://github.com/sponsors/tinchox5).
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=zumerlab/snapdom&type=Date)](https://www.star-history.com/#zumerlab/snapdom&Date)
+
 ## License
 
 MIT © Zumerlab

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.7
+* v.1.9.8
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -130,7 +130,7 @@
     if (cache.defaultStyle.has(tagName)) {
       return cache.defaultStyle.get(tagName);
     }
-    const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template"]);
+    const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template", "defs", "symbol", "title", "metadata", "desc"]);
     if (skipTags.has(tagName)) {
       const empty = {};
       cache.defaultStyle.set(tagName, empty);
@@ -160,10 +160,14 @@
     cache.defaultStyle.set(tagName, defaults);
     return defaults;
   }
+  var IGNORED_PROPS = /* @__PURE__ */ new Set([
+    "-webkit-locale"
+  ]);
   function getStyleKey(snapshot, tagName, compress = false) {
     const entries = [];
     const defaultStyles = getDefaultStyleForTag(tagName);
     for (let [prop, value] of Object.entries(snapshot)) {
+      if (IGNORED_PROPS.has(prop)) continue;
       if (!compress) {
         if (value) {
           entries.push(`${prop}:${value}`);
@@ -213,6 +217,7 @@
     const classMap = /* @__PURE__ */ new Map();
     let counter = 1;
     for (const key of keySet) {
+      if (!key.trim()) continue;
       classMap.set(key, `c${counter++}`);
     }
     return classMap;
@@ -448,6 +453,7 @@
   // src/modules/styles.js
   function snapshotComputedStyleFull(style) {
     const result = {};
+    const computedVisibility = style.getPropertyValue("visibility");
     for (let i = 0; i < style.length; i++) {
       const prop = style[i];
       let val = style.getPropertyValue(prop);
@@ -456,6 +462,9 @@
       }
       result[prop] = val;
     }
+    if (computedVisibility === "hidden") {
+      result.opacity = "0";
+    }
     return result;
   }
   function inlineAllStyles(source, clone, compress) {
@@ -678,25 +687,38 @@
     return __async(this, null, function* () {
       fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
       const dpr = window.devicePixelRatio || 1;
-      const tempCanvas = document.createElement("canvas");
-      const tempCtx = tempCanvas.getContext("2d");
-      tempCtx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
-      const metrics = tempCtx.measureText(unicodeChar);
-      const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.8;
-      const descent = metrics.actualBoundingBoxDescent || fontSize * 0.2;
-      const height = ascent + descent;
-      const width = metrics.width;
+      yield document.fonts.ready;
+      const span = document.createElement("span");
+      span.textContent = unicodeChar;
+      span.style.position = "absolute";
+      span.style.visibility = "hidden";
+      span.style.fontFamily = `"${fontFamily}"`;
+      span.style.fontWeight = fontWeight || "normal";
+      span.style.fontSize = `${fontSize}px`;
+      span.style.lineHeight = "1";
+      span.style.whiteSpace = "nowrap";
+      span.style.padding = "0";
+      span.style.margin = "0";
+      document.body.appendChild(span);
+      const rect = span.getBoundingClientRect();
+      const width = Math.ceil(rect.width);
+      const height = Math.ceil(rect.height);
+      document.body.removeChild(span);
       const canvas = document.createElement("canvas");
-      canvas.width = Math.ceil(width * dpr);
-      canvas.height = Math.ceil(height * dpr);
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
       const ctx = canvas.getContext("2d");
       ctx.scale(dpr, dpr);
-      ctx.font = tempCtx.font;
+      ctx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
       ctx.textAlign = "left";
-      ctx.textBaseline = "alphabetic";
+      ctx.textBaseline = "top";
       ctx.fillStyle = color;
-      ctx.fillText(unicodeChar, 0, ascent);
-      return canvas.toDataURL();
+      ctx.fillText(unicodeChar, 0, 0);
+      return {
+        dataUrl: canvas.toDataURL(),
+        width,
+        height
+      };
     });
   }
   function isStylesheetLoaded(href) {
@@ -884,19 +906,25 @@
   }
 
   // src/modules/pseudo.js
-  function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
+  function inlinePseudoElements(source, clone, options) {
     return __async(this, null, function* () {
+      var _a;
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
       for (const pseudo of ["::before", "::after", "::first-letter"]) {
         try {
           const style = getStyle(source, pseudo);
           if (!style || typeof style[Symbol.iterator] !== "function") continue;
+          const isEmptyPseudo = style.content === "none" && style.backgroundImage === "none" && style.backgroundColor === "transparent" && (style.borderStyle === "none" || parseFloat(style.borderWidth) === 0) && (!style.transform || style.transform === "none") && style.display === "inline";
+          if (isEmptyPseudo) continue;
           if (pseudo === "::first-letter") {
             const normal = getComputedStyle(source);
             const isMeaningful = style.color !== normal.color || style.fontSize !== normal.fontSize || style.fontWeight !== normal.fontWeight;
             if (!isMeaningful) continue;
             const textNode = Array.from(clone.childNodes).find(
-              (n) => n.nodeType === Node.TEXT_NODE && n.textContent && n.textContent.trim().length > 0
+              (n) => {
+                var _a2;
+                return n.nodeType === Node.TEXT_NODE && ((_a2 = n.textContent) == null ? void 0 : _a2.trim().length) > 0;
+              }
             );
             if (!textNode) continue;
             const text = textNode.textContent;
@@ -908,57 +936,55 @@
             span.textContent = first;
             span.dataset.snapdomPseudo = "::first-letter";
             const snapshot2 = snapshotComputedStyle(style);
-            const key2 = getStyleKey(snapshot2, "span", compress);
+            const key2 = getStyleKey(snapshot2, "span", options);
             cache.preStyleMap.set(span, key2);
             const restNode = document.createTextNode(rest);
             clone.replaceChild(restNode, textNode);
             clone.insertBefore(span, restNode);
             continue;
           }
-          const content = style.getPropertyValue("content");
-          const bg = style.getPropertyValue("background-image");
-          const bgColor = style.getPropertyValue("background-color");
-          const fontFamily = style.getPropertyValue("font-family");
-          const fontSize = parseInt(style.getPropertyValue("font-size")) || 32;
-          const fontWeight = parseInt(style.getPropertyValue("font-weight")) || false;
-          const color = style.getPropertyValue("color") || "#000";
-          const display = style.getPropertyValue("display");
-          const width = parseFloat(style.getPropertyValue("width"));
-          const height = parseFloat(style.getPropertyValue("height"));
-          const borderStyle = style.getPropertyValue("border-style");
-          const transform = style.getPropertyValue("transform");
+          const content = style.content;
+          const cleanContent = /counter\s*\(|counters\s*\(/.test(content) ? "- " : parseContent(content);
+          const bg = style.backgroundImage;
+          const bgColor = style.backgroundColor;
+          const fontFamily = style.fontFamily;
+          const fontSize = parseInt(style.fontSize) || 32;
+          const fontWeight = parseInt(style.fontWeight) || false;
+          const color = style.color || "#000";
+          const display = style.display;
+          const width = parseFloat(style.width);
+          const height = parseFloat(style.height);
+          const borderStyle = style.borderStyle;
+          const borderWidth = parseFloat(style.borderWidth);
+          const transform = style.transform;
           const isIconFont2 = isIconFont(fontFamily);
-          let cleanContent;
-          if (/counter\s*\(|counters\s*\(/.test(content)) {
-            cleanContent = "- ";
-          } else {
-            cleanContent = parseContent(content);
-          }
-          const hasContent = content !== "none";
-          const hasExplicitContent = hasContent && cleanContent !== "";
+          const hasExplicitContent = content !== "none" && cleanContent !== "";
           const hasBg = bg && bg !== "none";
           const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
           const hasBox = display !== "inline" && (width > 0 || height > 0);
-          const hasBorder = borderStyle && borderStyle !== "none";
+          const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
           const hasTransform = transform && transform !== "none";
           const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
           if (!shouldRender) continue;
           const pseudoEl = document.createElement("span");
           pseudoEl.dataset.snapdomPseudo = pseudo;
+          pseudoEl.style.verticalAlign = "middle";
           const snapshot = snapshotComputedStyle(style);
-          const key = getStyleKey(snapshot, "span", compress);
+          const key = getStyleKey(snapshot, "span", options);
           cache.preStyleMap.set(pseudoEl, key);
           if (isIconFont2 && cleanContent.length === 1) {
+            const { dataUrl, width: width2, height: height2 } = yield iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
             const imgEl = document.createElement("img");
-            imgEl.src = yield iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
-            imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
+            imgEl.src = dataUrl;
+            imgEl.style = `height:${fontSize}px;width:${width2 / height2 * fontSize}px;object-fit:contain;`;
             pseudoEl.appendChild(imgEl);
+            clone.dataset.snapdomHasIcon = "true";
           } else if (cleanContent.startsWith("url(")) {
             const rawUrl = extractURL(cleanContent);
-            if (rawUrl && rawUrl.trim() !== "") {
+            if (rawUrl == null ? void 0 : rawUrl.trim()) {
               try {
                 const imgEl = document.createElement("img");
-                const dataUrl = yield fetchImage(safeEncodeURI(rawUrl, { useProxy }));
+                const dataUrl = yield fetchImage(safeEncodeURI(rawUrl), options);
                 imgEl.src = dataUrl;
                 imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
                 pseudoEl.appendChild(imgEl);
@@ -972,19 +998,21 @@
           if (hasBg) {
             try {
               const bgSplits = splitBackgroundImage(bg);
-              const newBgParts = yield Promise.all(
-                bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
-              );
+              const newBgParts = yield Promise.all(bgSplits.map(inlineSingleBackgroundEntry));
               pseudoEl.style.backgroundImage = newBgParts.join(", ");
             } catch (e) {
               console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
             }
           }
           if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
-          const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent && pseudoEl.textContent.trim() !== "";
+          const hasContent2 = pseudoEl.childNodes.length > 0 || ((_a = pseudoEl.textContent) == null ? void 0 : _a.trim()) !== "";
           const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
           if (!hasVisibleBox) continue;
-          pseudo === "::before" ? clone.insertBefore(pseudoEl, clone.firstChild) : clone.appendChild(pseudoEl);
+          if (pseudo === "::before") {
+            clone.insertBefore(pseudoEl, clone.firstChild);
+          } else {
+            clone.appendChild(pseudoEl);
+          }
         } catch (e) {
           console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
         }
@@ -992,53 +1020,73 @@
       const sChildren = Array.from(source.children);
       const cChildren = Array.from(clone.children).filter((child) => !child.dataset.snapdomPseudo);
       for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-        yield inlinePseudoElements(
-          sChildren[i],
-          cChildren[i],
-          compress,
-          embedFonts,
-          useProxy
-        );
+        yield inlinePseudoElements(sChildren[i], cChildren[i], options);
       }
     });
   }
 
   // src/modules/svgDefs.js
-  function inlineExternalDef(root) {
-    if (!root) return;
-    const defsSources = document.querySelectorAll("svg > defs");
-    if (!defsSources.length) return;
-    root.querySelectorAll("svg").forEach((svg) => {
-      const uses = svg.querySelectorAll("use");
-      if (!uses.length) return;
-      const usedIds = /* @__PURE__ */ new Set();
-      uses.forEach((use) => {
-        const href = use.getAttribute("xlink:href") || use.getAttribute("href");
-        if (href && href.startsWith("#")) usedIds.add(href.slice(1));
-      });
-      if (!usedIds.size) return;
-      const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-      for (const id of usedIds) {
-        for (const source of defsSources) {
-          const def = source.querySelector(`#${CSS.escape(id)}`);
-          if (def) {
-            defs.appendChild(def.cloneNode(true));
-            break;
+  function inlineExternalDefsAndSymbols(rootElement) {
+    if (!rootElement) return;
+    const usedIds = /* @__PURE__ */ new Set();
+    rootElement.querySelectorAll("use").forEach((use) => {
+      const href = use.getAttribute("xlink:href") || use.getAttribute("href");
+      if (href && href.startsWith("#")) {
+        usedIds.add(href.slice(1));
+      }
+    });
+    if (!usedIds.size) return;
+    const allGlobal = Array.from(document.querySelectorAll("svg > symbol, svg > defs"));
+    const globalSymbols = allGlobal.filter((el) => el.tagName.toLowerCase() === "symbol");
+    const globalDefs = allGlobal.filter((el) => el.tagName.toLowerCase() === "defs");
+    let container = rootElement.querySelector("svg.inline-defs-container");
+    if (!container) {
+      container = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      container.setAttribute("aria-hidden", "true");
+      container.setAttribute("style", "position: absolute; width: 0; height: 0; overflow: hidden;");
+      container.classList.add("inline-defs-container");
+      rootElement.insertBefore(container, rootElement.firstChild);
+    }
+    const existingIds = /* @__PURE__ */ new Set();
+    rootElement.querySelectorAll("symbol[id], defs > *[id]").forEach((el) => {
+      existingIds.add(el.id);
+    });
+    usedIds.forEach((id) => {
+      if (existingIds.has(id)) return;
+      const symbol = globalSymbols.find((sym) => sym.id === id);
+      if (symbol) {
+        container.appendChild(symbol.cloneNode(true));
+        existingIds.add(id);
+        return;
+      }
+      for (const defs of globalDefs) {
+        const defEl = defs.querySelector(`#${CSS.escape(id)}`);
+        if (defEl) {
+          let defsContainer = container.querySelector("defs");
+          if (!defsContainer) {
+            defsContainer = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+            container.appendChild(defsContainer);
           }
+          defsContainer.appendChild(defEl.cloneNode(true));
+          existingIds.add(id);
+          break;
         }
       }
-      if (defs.childNodes.length) {
-        svg.insertBefore(defs, svg.firstChild);
-      }
     });
   }
 
   // src/core/prepare.js
   function prepareClone(_0) {
     return __async(this, arguments, function* (element, compress = false, embedFonts = false, options = {}) {
-      var _a;
+      var _a, _b;
       let clone;
       let classCSS = "";
+      stabilizeLayout(element);
+      try {
+        inlineExternalDefsAndSymbols(element);
+      } catch (e) {
+        console.warn("inlineExternal defs or symbol failed:", e);
+      }
       try {
         clone = deepClone(element, compress, options, element);
       } catch (e) {
@@ -1050,21 +1098,24 @@
       } catch (e) {
         console.warn("inlinePseudoElements failed:", e);
       }
-      try {
-        inlineExternalDef(clone);
-      } catch (e) {
-        console.warn("inlineExternalDef failed:", e);
-      }
       if (compress) {
         const keyToClass = generateCSSClasses();
         classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
         for (const [node, key] of cache.preStyleMap.entries()) {
           if (node.tagName === "STYLE") continue;
+          if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
+            node.setAttribute("style", key.replace(/;/g, "; "));
+            continue;
+          }
           const className = keyToClass.get(key);
           if (className) node.classList.add(className);
           const bgImage = (_a = node.style) == null ? void 0 : _a.backgroundImage;
-          node.removeAttribute("style");
+          const hasIcon = (_b = node.dataset) == null ? void 0 : _b.snapdomHasIcon;
           if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
+          if (hasIcon) {
+            node.style.verticalAlign = "middle";
+            node.style.display = "inline";
+          }
         }
       } else {
         for (const [node, key] of cache.preStyleMap.entries()) {
@@ -1115,6 +1166,18 @@
       return { clone, classCSS };
     });
   }
+  function stabilizeLayout(element) {
+    const style = getComputedStyle(element);
+    const outlineStyle = style.outlineStyle;
+    const outlineWidth = style.outlineWidth;
+    const borderStyle = style.borderStyle;
+    const borderWidth = style.borderWidth;
+    const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
+    const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
+    if (outlineVisible && borderAbsent) {
+      element.style.border = `${outlineWidth} solid transparent`;
+    }
+  }
 
   // src/modules/images.js
   function inlineImages(_0) {
@@ -1153,13 +1216,27 @@
         "mask-source",
         "mask-box-image-source",
         "mask-border-source",
-        "-webkit-mask-box-image-source"
+        "-webkit-mask-box-image-source",
+        "border-image",
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat"
       ];
       while (queue.length) {
         const [srcNode, cloneNode] = queue.shift();
         const style = cache.preStyle.get(srcNode) || getStyle(srcNode);
         if (!cache.preStyle.has(srcNode)) cache.preStyle.set(srcNode, style);
+        const hasBorderImage = (() => {
+          const bi = style.getPropertyValue("border-image");
+          const bis = style.getPropertyValue("border-image-source");
+          return bi && bi !== "none" || bis && bis !== "none";
+        })();
         for (const prop of imageProps) {
+          if (["border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"].includes(prop) && !hasBorderImage) {
+            continue;
+          }
           const val = style.getPropertyValue(prop);
           if (!val || val === "none") continue;
           const splits = splitBackgroundImage(val);
@@ -1288,13 +1365,15 @@
   }
 
   // src/api/snapdom.js
-  function toImg(_0, _1) {
-    return __async(this, arguments, function* (url, { dpr = 1, scale = 1 }) {
+  function toImg(_0) {
+    return __async(this, arguments, function* (url, { scale = 1 } = {}) {
       const img = new Image();
       img.src = url;
       yield img.decode();
-      img.width = img.width * scale;
-      img.height = img.height * scale;
+      if (scale !== 1) {
+        img.style.width = `${img.naturalWidth * scale}px`;
+        img.style.height = `${img.naturalHeight * scale}px`;
+      }
       return img;
     });
   }
@@ -1319,8 +1398,8 @@
         if (appended) img.remove();
         throw new Error("Image failed to load or has no dimensions");
       }
-      const width = img.width * scale;
-      const height = img.height * scale;
+      const width = img.naturalWidth * scale;
+      const height = img.naturalHeight * scale;
       const canvas = document.createElement("canvas");
       canvas.width = Math.ceil(width * dpr);
       canvas.height = Math.ceil(height * dpr);
@@ -1422,20 +1501,24 @@
     });
   }
   snapdom.capture = (_0, ..._1) => __async(null, [_0, ..._1], function* (el, options = {}) {
+    var _a;
     const url = yield captureDOM(el, options);
-    const dpr = window.devicePixelRatio || 1;
+    const dpr = (_a = options.dpr) != null ? _a : window.devicePixelRatio || 1;
     const scale = options.scale || 1;
     return {
       url,
       options,
       toRaw: () => url,
-      toImg: () => toImg(url, { dpr, scale }),
-      toCanvas: () => toCanvas(url, { dpr, scale }),
-      toBlob: (options2) => toBlob(url, __spreadValues({ dpr, scale }, options2)),
-      toPng: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "png"),
-      toJpg: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "jpeg"),
-      toWebp: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "webp"),
-      download: ({ format = "png", filename = "capture", backgroundColor } = {}) => download(url, { dpr, scale, backgroundColor, format, filename })
+      toImg: (opts = {}) => toImg(url, __spreadValues({ dpr, scale }, opts)),
+      toCanvas: (opts = {}) => toCanvas(url, __spreadValues({ dpr, scale }, opts)),
+      toBlob: (opts = {}) => toBlob(url, __spreadValues({ dpr, scale }, opts)),
+      toPng: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "png"),
+      toJpg: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "jpeg"),
+      toWebp: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "webp"),
+      download: (_b = {}) => {
+        var _c = _b, { format = "png", filename = "snapDOM", backgroundColor } = _c, opts = __objRest(_c, ["format", "filename", "backgroundColor"]);
+        return download(url, __spreadValues({ dpr, scale, format, filename, backgroundColor }, opts));
+      }
     };
   });
   snapdom.toRaw = (el, options) => __async(null, null, function* () {