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

Question

I want to convert an SVG to a bitmap image (like JPEG, PNG, etc.) via JavaScript.

Answer 1

jbeard4 solution works well.

I'm using Raphael SketchPad to create the SVG. Link to the file from step 1.

For the "Save" button (the id of svg is "editor" and the id of canvas is "canvas"):

$("#editor_save").click(function() {

// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("#editor").html());

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
// do what you want with the base64, write to screen, post to server, etc...
});

Answer 2

The following is the method implemented through JavaScript:

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