Convert SVG to image (JPEG, PNG, etc.) in the browser

javascript svg
Zain picture Zain · Oct 20, 2010 · Viewed 321.7k times · Source

I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.

Answer

jbeard4 picture jbeard4 · Oct 20, 2010

Here is how you can do it through JavaScript:

  1. Use the canvg JavaScript library to render the SVG image using Canvas: https://github.com/gabelerner/canvg
  2. Capture a data URI encoded as a JPG (or PNG) from the Canvas, according to these instructions: Capture HTML Canvas as gif/jpg/png/pdf?

Related questions

How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More
Changing SVG image color with javascript

I am trying to alter svg image colors with javascript. Is this possible? Can I load it as an object and then somehow have access to the color/image-data. Every respone or tip is highly appreciated!

Read More