4 ms·

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 dow

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.