Generated SVG assets not usable in Figma/Illustrator

[anmpog]

I'm using your excellent library to convert some charts we generate using another library called Recharts. Recharts gives us an SVG chart, and using your library we grab a reference to the DOM node where the element is rendered and your library does its magic, giving us a downloadable asset.

We use your library to generate PNG, JPEG, and SVG files for download, and we have no issues with the PNG or JPEG formats.

The SVG files open and work in both firefox and chrome in that if I open the files using either browser I get more or less what I would expect. However, if I try to drag and drop the SVG files into something like Figma, all I get is a blank box. The box itself has dimensions we specified, but for some reason no image. I'll attach a screenshot with an example.

What I'm seeking or wondering is if this behavior is something I'm doing wrong with the library, or is an unexpected behavior (from the maintainers' perspective). I'm admittedly the farthest thing from knowledgeable about images, and in particular SVGs.

Expected Behavior

The expected behavior would be that the downloaded SVG asset can be used without fuss when importing into programs like figma.

Current Behavior

(See attached screenshot). When opening the downloaded SVG files using (recent) versions of Chrome or Firefox, I get what I would expect. When trying to import into figma, I get only a blank box in the dimensions I have specified for the element when creating the chart.

Possible Solution

I have no possible solutions, and it's entirely possible that this error is on our end. The only thing I can think of that MIGHT be messing with the SVG file that is generated is what appears to be a non-SVG legend for the generated chart. When inspecting the chart generated by the aforementioned Recharts library, the legend appears NOT to be rendered as SVG:

For reference the downloaded SVG version of the chart shown in the above screenshot when opened in Firefox looks like this:

So it does appear that the legend is being captured and converted.

Your Environment

• html-to-image: 1.10.8
• OS: macOS Monterey 12.6
• Browser: Firefox 106.0.3 and Chrome 107.0.5304.87 (Official Build) (arm64)

[vivcat[bot]]

👋 @anmpog

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[qq15725]

@anmpog

toSvg contains <foreignObject> by default, which can only be parsed in the browser

You probably need toPng in the svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <image href="${ await toPng(node) }" height="200" width="200" />
</svg>

Or consider this branch of domToSvg

[UnCanard14]

Hello, I have the same problem. Any news about this error? Have you found a way around it?