4 ms·

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.

• Groxx 7y ago
  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/Path2D https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path...
• coreyoconnor 7y ago
  Did not know this. Is that due to browser issues or a specification issue?
• lucideer 7y ago
  https://github.com/fabricjs/fabric.js https://github.com/fabricjs/fabric.js
  • rayshan 7y ago
    This looks great, will test it out, thx!
• kylebarron 7y ago
  https://github.com/shakiba/svgexport https://github.com/shakiba/svgexport Is that what you’re looking for?
  • rayshan 7y ago
    No. It does a perfect job because Puppeteer is just Chrome, not JavaScript :) Thanks though!
• hypothete 7y ago
  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 https://codepen.io/hypothete/pen/WNvKLEE
  • beansie 7y ago
    Does the css need to be inlined?
    • yzmtf2008 7y ago
      seems so: https://codepen.io/andyfangdz/pen/abOjPxe https://codepen.io/andyfangdz/pen/abOjPxe
    • rayshan 7y ago
      Yup this is the problem. Workable but painful.
  • zakjan 7y ago
    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?
    • graup 7y ago
      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 https://codepen.io/graup/pen/jOPpopR
      • zakjan 7y ago
        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.
• restingrobot 7y ago
  Shameless Plug for a library I helped write: https://github.com/SVG-Edit/svgedit https://github.com/SVG-Edit/svgedit
  • rayshan 7y ago
    This looks so cool! But your demo link is broken :(
• dublin 7y ago
  Kinda defeats the whole purpose of SVG. Only photos should be bitmaps. Graphics should be vectors. This is the 21st century, folks...
  • Sephr 7y ago
    One reason is to generate screenshots of HTML by combining this technique with SVG <foreignObject>.
  • avmich 7y ago
    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.
  • rayshan 7y ago
    I wish for that world to exist, but rasterized images are much easier to share and render nicely in iMessages etc.
  • chrisseaton 7y ago
    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?
• wolfspider 7y ago
  I’m surprised no one mentioned canvg: https://canvg.github.io/canvg/demo/index.html 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.
• FigmentEngine 7y ago
  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/Headless_mode https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Hea... https://developers.google.com/web/updates/2017/04/headless-chrome https://developers.google.com/web/updates/2017/04/headless-c... and in dev panel https://developer.mozilla.org/en-US/docs/Tools/Taking_screenshots https://developer.mozilla.org/en-US/docs/Tools/Taking_screen...