Not able to open downloaded SVG in Illustrator, Photoshop, or SVG editors

[adurgavich]

When using the htmlToImage.toSvg function to generate an SVG, it seems that browsers and image preview tools are able to display the image; however, SVG editors (such as Adobe Illustrator and Photoshop) show the downloaded SVG as a blank image.

Expected Behavior

Expected bahavior is that the file can be opened by SVG editors and show the image that was downloaded as part of the SVG (similar to what is shown in the web browser or image preview tools when viewing the SVG file).

Current Behavior

SVG editors (such as Adobe Illustrator and Photoshop) show the downloaded SVG as a blank image.

Steps To Reproduce

1. Add the necessary html-to-image library to the page:

   import * as htmlToImage from 'html-to-image';
   import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

2. Attach the following snippet to a click event on a web page where "element_id" is your element ID to target:

   htmlToImage.toSvg(document.getElementById(element_id))
   .then(function(dataUrl) {
       var element = document.createElement('a');
       element.setAttribute('href', dataUrl);
       element.setAttribute('download', 'mySvg.svg');
       element.style.display = 'none';
       document.body.appendChild(element);
       element.click();
       document.body.removeChild(element);
   });

3. Use an SVG editor like Adobe Illustrator/Photoshop or even https://boxy-svg.com/app to open the SVG and notice the blank file.

Example File

Your Environment

• html-to-image: ^1.9.0
• OS: macOS, Windows
• Browser: Chrome, Firefox, Safari, Edge

[vivcat[bot]]

👋 @adurgavich

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.

[pmartiner]

we had that issue as well. the problem is how the library parses the HTML code to SVG. if you inspect the SVG code, you can see there's a foreignObject element and inside it, the HTML code that the library tried to parse. if i remember correctly, due to security reasons, most (if not all) editors won't be able to open foreignObjects since its content is not a valid XML SVG element

[vivcat[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[vivcat[bot]]

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯

[seve]

we had that issue as well. the problem is how the library parses the HTML code to SVG. if you inspect the SVG code, you can see there's a foreignObject element and inside it, the HTML code that the library tried to parse. if i remember correctly, due to security reasons, most (if not all) editors won't be able to open foreignObjects since its content is not a valid XML SVG element

@pmartiner is there a known workaround?

[SamuelMichelRiad]

Bump

[vivcat[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.