Save inline SVG as JPEG/PNG/SVG

Question

I have an inline SVG in my html, and I need to be able to save this as either a JPEG, PNG or SVG.

I have tried a few different methods with converting the SVG to can

Answer 1

Keeping it simple, place an svg, a canvas and an empty img into the HTML. Set all to the same size. The javascript will use the svg to create a binary large object which is then rendered in the canvas as a png image. The function call creates a clone of the canvas and converts it into a jpeg.

function fjpg(){
 clone = c.cloneNode(true);
 ctx = clone.getContext('2d');
 ctx.fillStyle = "#FFF";
 ctx.fillRect(0, 0, clone.width, clone.height);
 ctx.drawImage(c, 0, 0);
 document.all.jp1.src=clone.toDataURL("image/jpeg");
 ctx = c.getContext('2d');
 svgBlob = new Blob( [dataPNG], { type: 'image/svg+xml' } );
 urlPNG = self.URL.createObjectURL( svgBlob );
 img = new Image();
 img.onload = function () {ctx.drawImage(img,0,0)}
 img.src = urlPNG;
}
c = document.all.canvas0;
ctx = c.getContext('2d');
data = (new XMLSerializer()).serializeToString(document.all.svg0);
dataJPG = data.replace('>SVG<','>JPG<');
dataPNG = data.replace('>SVG<','>PNG<');
svgBlob = new Blob( [dataJPG], { type: 'image/svg+xml' } );
urlJPG = self.URL.createObjectURL( svgBlob );
img = new Image();
img.onload = function () {
 ctx.drawImage( img, 0, 0 );
 fjpg();
}
img.src = urlJPG;