Hacker News Reader

Comment by rayshan | Hacker News Reader

What's a good JavaScript-based solution to render SVG into an image? html2canvas doesn't work well with SVG, especially those heavily styled with CSS.

View on HN

If you're not in a Node.js context, the Canvas API does a decent job of rasterizing SVGs nowadays. Once rasterized, you can call canvas.toDataURL() to get a download link. Here's a demo:

https://codepen.io/hypothete/pen/WNvKLEE

Does the css need to be inlined?

seems so: https://codepen.io/andyfangdz/pen/abOjPxe

Yup this is the problem. Workable but painful.

I used to have troubles with retina displays, I always got a blurred image, no matter to what trick I tried. Is there a way to fix the rendering pixel ratio to 1?

The usual approach with canvas for high dpi is to increase the size of the canvas and then scale it back down afterwards: https://codepen.io/graup/pen/jOPpopR

This downloads 200x200. How to scale it back to 100x100? Ideally so that the image is the same no matter the display where it was exported on. Also I would like to not need to include any image processing libs. The usecase is to export a HTML element (e.g. a chart) and send to another API (e.g. attach it to a report), without downloading.

I’m surprised no one mentioned canvg: https://canvg.github.io/canvg/demo/index.html

If using CSS with SVG is important then it’s actually better to use a backend with a library like librsvg (e.g. Cairo) then run node-canvas on top of it like automattic does. Even Inkscape has problems with CSS in SVG files. CSS in browsers is subjective because nowadays they might be using an style that doesn’t have a straightforward approach that can be rasterized. I haven’t had much luck with rasterizing SVG styles past CSS2 spec.

https://github.com/fabricjs/fabric.js

This looks great, will test it out, thx!

Shameless Plug for a library I helped write: https://github.com/SVG-Edit/svgedit

This looks so cool! But your demo link is broken :(

not javascript, but screenshots work best - other approaches suffer from css and rendering bugs. best way is to just use your browser in headless mode from the command line. you can do a screenshot, and specify the window size.

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Hea...

https://developers.google.com/web/updates/2017/04/headless-c...

and in dev panel https://developer.mozilla.org/en-US/docs/Tools/Taking_screen...

Does Path2D cover it? If it does, seems like you could just draw to a canvas and save the result. https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path...

Did not know this. Is that due to browser issues or a specification issue?

https://github.com/shakiba/svgexport

Is that what you’re looking for?

No. It does a perfect job because Puppeteer is just Chrome, not JavaScript :) Thanks though!

Kinda defeats the whole purpose of SVG. Only photos should be bitmaps. Graphics should be vectors. This is the 21st century, folks...

One reason is to generate screenshots of HTML by combining this technique with SVG <foreignObject>.

True, but if you have digital display - that is, which have separate, immovable pixels, working with pixels and not with vector-based analog primitives - you'll eventually have to convert "vector" picture into "pixel" picture.

I wish for that world to exist, but rasterized images are much easier to share and render nicely in iMessages etc.

Do you have a vector display of some kind?

No?

So someone somewhere is going to need to rasterise your vectors if you want to see them on a screen, aren't they?

Reply on news.ycombinator.com