Generated SVG is shown as a blank image when imported into Google Slides/Figma/Inkscape/GitHub

[tracyhenry]

trafficstars

Generated svg will appear as a blank image when imported to google slides/drawings or lucidcharts. Actually, when it's imported into google drive, the preview is already a blank image.

Browser:

Code Snippet (If Applicable)

[mfix22]

@tracyhenry which browser were you using, and can you post a link or code snippet so we can recreate the bug?

[tracyhenry]

I saw this issue arisen on both Chrome and Safari. The code snippet I was using is the following:

var teamLogoTransform = new Transform("teamlogoID",
    "select * from teams;",
    "nba",
    function (row){
        var id = parseInt(row[0]);
        var y = Math.floor(id / 6);
        var x = id - y * 6;
        var ret = [];
        ret.push(row[0]);
        ret.push((x * 2 + 1) * 80);
        ret.push((y * 2 + 1) * 80 + 100);
        ret.push(row[1]);
        ret.push(row[2]);
        ret.push(row[3]);
        ret.push(row[4]);

        return Java.to(ret ,"java.lang.String[]");
    },
    ["id", "x", "y", "team_id", "city", "name", "abbr"],
    true);

[mfix22]

I just tried this image, and the SVG is downloaded correctly. Whether or not you are able to import it into Google Slides it outside of the scope of Carbon.

I don't believe any SVGs are able to be imported into Google Slides, too 🙂

Closing.

[tracyhenry]

First... it's possible to import svgs to google slides: https://www.sosnoob.com/how-to-import-svg-files-into-google-slides/

Second... the generated svg not only broke on google drive/slides, it also broke on lucidchart.com, which is a popular drawing website.

I know the generated svg displays correctly on browsers, but there must be some formatting issues that prevent it from displaying correctly on those platforms.

My use case is to paste some code snippet into academic papers (which will work best with svgs), which I think it's fairly important. Please consider reopening this issue. It's definitely within the scope of Carbon.

[jfkw]

Thanks for releasing Carbon. The generated SVG renders in Google Chrome 70, but is a blank white rectangle in Inkscape 0.92.3 or Emacs SVG mode with preview rendered by ImageMagick.

There is one warning reported by Inkscape which might point to the common source of the rendering error in the viewers reported in this issue:

$ inkscape ~/Downloads/carbon.svg 
WARNING: unknown type: svg:foreignObject

[mfix22]

Right 🙂 The library we use to convert DOM nodes to images uses <foreignObject> tags to embed HTML nodes into an SVG document. These tags are not allowed in a lot of image softwares, including InkScape (source).

I am assuming this is the same issue that others are seeing when converting SVGs for Google products.

Unfortunately, I am not aware of a way to do the HTML -> SVG embedding w/o foreignObject. I will leave this open in case anyone has another idea.

[mfix22]

Duplicate of #353 Tracking in #358

[michelole]

Just hit this issue when trying to convert SVG into PDF using Inkscape to embed an image into a LaTeX paper (I guess @tracyhenry was also using it?).

It seems the generated SVG is somehow just a container for plain HTML. Maybe we would need to change the library code to generate "true" SVG. Have you ever considered using https://github.com/radkovo/WebVector (just found via a Google search)?

[allenanswerzq]

The same thing happened here, I also want to convert saved SVG into PDF, then embed into a paper. Would love to see you guys fix this issue.

[jerriclynsjohn]

Same here, getting a blank frame when i import this into Figma.

[mfix22]

Does anyone have any suggestions for fixing this? Are there any other good libraries that convert a DOM node to an SVG, without using foreignObject?

[Luttik]

I'd love this as a feature. especially for post-processing in figma.

[FrancescoSaverioZuppichini]

same here :) Any news? Thanks

[thepeoplesbourgeois]

Does anyone have any suggestions for fixing this? Are there any other good libraries that convert a DOM node to an SVG, without using foreignObject?

@mfix22 It looks like this might be usable, dom-to-svg: https://www.npmjs.com/package/dom-to-svg.

[leiteg]

I am also having problems importing the SVG image in Inkscape, the canvas appears empty.

[miku1958]

Any update? I try to import the svg to Illustrator but report “Clipping will be lost on roundtrip to Tiny”

[Zhaoyilunnn]

For anyone who want to insert the svg from carbon to draw.io, there's a workaround:

• Do not directly copy and paste into your diagram.
• First, drag your svg into a github comment window, it will be uploaded into github user assets folder, get the url (sth like https://gist.github.com/assets/40353317/)
• Then click arrange->insert->image and use this url to import the svg file