SVG file works locally, not when imported to design software

Question

I wrote a little script (see code below) that converts a div to an SVG.

When you drag & drop the generated SVG on your computer and preview it, it works.

However, when you import it in Figma or Adobe Illustrator, it returns a blank frame.

I can't seem to find the issue, but I'm assuming that the SVG code that is generated is not readable and somehow needs to be converted into an other SVG format?

The generated SVG code:

<svg xmlns="http://www.w3.org/2000/svg" width="757" height="80" viewBox="0 0 757 80"><foreignObject width="100%" height="100%" x="0" y="0" externalResourcesRequired="true"><div xmlns="http://www.w3.org/1999/xhtml" id="capture" style="animation: 0s ease 0s 1 normal none running none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 218, 85); background-blend-mode: normal; border: 0px none rgb(0, 0, 0); border-radius: 0px; border-collapse: separate; inset: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); content: normal; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font: 400 16px Times; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; height: 60.5312px; image-orientation: from-image; image-rendering: auto; isolation: auto; place-items: normal; place-self: auto; letter-spacing: normal; line-height-step: 0px; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: auto none 0px auto 0deg / auto; opacity: 1; orphans: 2; outline: rgb(0, 0, 0) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow: visible; padding: 10px; pointer-events: auto; position: static; resize: none; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(0, 0, 0); text-decoration-skip-ink: auto; text-justify: auto; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; touch-action: auto; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 737px; will-change: auto; word-break: normal; word-spacing: 0px; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; columns: auto auto; gap: normal; column-rule: 0px none rgb(0, 0, 0); column-span: none; backdrop-filter: none; place-content: normal; flex: 0 1 auto; flex-flow: row nowrap; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-area: auto / auto / auto / auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-locale: &quot;en&quot;; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; order: 0; perspective: none; perspective-origin: 378.5px 40.2656px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis: none rgb(0, 0, 0); -webkit-text-emphasis-position: over right; -webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(0, 0, 0); transform: none; transform-origin: 378.5px 40.2656px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: none; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker: none; mask-type: luminance; mask-source-type: alpha; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: normal; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; translate: none; rotate: none; scale: none; caret-color: rgb(0, 0, 0); line-break: auto; math-style: inline;"><style></style>
    <h4 style="animation: 0s ease 0s 1 normal none running none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; border: 0px none rgb(0, 0, 0); border-radius: 0px; border-collapse: separate; inset: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); content: normal; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font: 700 16px Times; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; height: 18px; image-orientation: from-image; image-rendering: auto; isolation: auto; place-items: normal; place-self: auto; letter-spacing: normal; line-height-step: 0px; list-style: outside none disc; margin: 21.28px 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: auto none 0px auto 0deg / auto; opacity: 1; orphans: 2; outline: rgb(0, 0, 0) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow: visible; padding: 0px; pointer-events: auto; position: static; resize: none; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(0, 0, 0); text-decoration-skip-ink: auto; text-justify: auto; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; touch-action: auto; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 737px; will-change: auto; word-break: normal; word-spacing: 0px; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; columns: auto auto; gap: normal; column-rule: 0px none rgb(0, 0, 0); column-span: none; backdrop-filter: none; place-content: normal; flex: 0 1 auto; flex-flow: row nowrap; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-area: auto / auto / auto / auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-locale: &quot;en&quot;; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; order: 0; perspective: none; perspective-origin: 368.5px 9px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis: none rgb(0, 0, 0); -webkit-text-emphasis-position: over right; -webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(0, 0, 0); transform: none; transform-origin: 368.5px 9px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: none; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker: none; mask-type: luminance; mask-source-type: alpha; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: normal; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; translate: none; rotate: none; scale: none; caret-color: rgb(0, 0, 0); line-break: auto; math-style: inline;">Hello world!</h4>
</div></foreignObject></svg>

The Script that got me to that point:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>



    <!-- 1. Constructing a Div -->
      <h2>Original div</h2>
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>


    <!-- 2. Showing the converted SVG Preview -->
    <h2>Generated SVG (img tag)</h2>
    <img src="" id="generated-svg">



    <!-- 3. Script -->
      <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
      <script type="text/javascript">



    // --4. Converts capature area to SVG (preview)
    function filter (node) {
        return (node.tagName !== 'i');
    }
    htmlToImage.toSvg(document.getElementById('capture'), { filter: filter })
        .then(function (dataUrl) {



    // --5. Show the generated SVG on the page
        document.getElementById('generated-svg').src = dataUrl





   // --6. do something else to fix the issue






        });
    </script>
</body>
</html>

DustInComp · Answer 1 · 2022-07-20T10:02:39.313

1

The <foreignObject> tag specified by SVG, wrapping the HTML div and h4 elements, is interpreted differently by each parser. It'll probably work in browsers, that parse SVG like HTML, but not in vector graphics programs.

edited Jul 20 '22 at 10:02

answered Jul 20 '22 at 10:00

DustInComp

1,742
8
18

is there a way to convert this into something that would work? – jiblylabs Jul 20 '22 at 10:02
1

Dunno. there might be other libraries that actually convert divs to rects and headings to text elements. Try https://www.npmjs.com/package/dom-to-svg – DustInComp Jul 20 '22 at 10:04

SVG file works locally, not when imported to design software

1 Answers1