search

carbon-app / carbon

:black_heart: Create and share beautiful images of your source code
https://carbon.now.sh
MIT License
34.38k stars 1.91k forks source link

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

Open tracyhenry opened 5 years ago

tracyhenry commented 5 years ago

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 commented 5 years ago

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

tracyhenry commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Duplicate of #353 Tracking in #358

michelole commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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

mfix22 commented 4 years ago

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 commented 4 years ago

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

FrancescoSaverioZuppichini commented 3 years ago

same here :) Any news? Thanks

thepeoplesbourgeois commented 2 years ago

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 commented 2 years ago

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

miku1958 commented 1 year ago

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

Zhaoyilunnn commented 6 months ago

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