Background

I've got a bunch of svg's in a document (with rect, path, and whatnot inside each) and I need to draw this out to a downloadable PNG image. I understand that in order to do this there are two methods: either draw the page's HTML structure to a canvas and then export from there or render an SVG and its contents straight onto a canvas.

Hypotheses

The first hypothesis I tried to render the HTML structure using html2canvas and only found out that SVG's could not be rendered via an HTML structure at all (due to security issues). The second hypothesis I tried to render an SVG to canvas via canvg only to find out that it only allowed for one SVG element to be rendered and that only the first one would be rendered.

Results

To prove the first one wrong, type in .asp?filename=trysvg_rect to this URL and disable Javascript. To prove the second one wrong I have a fiddle to try out.

The Question

I want to make it clear that my reasoning for having multiple svg's is so that I can place them within a responsive grid system and resize via aspect ratio. Without further ado, I ask my question: How can you render multiple svg elements to a canvas? If the answer to that question is "it isn't possible", then next my question would be: Should I be rendering one svg instead and handle responsiveness another way?

Background

I've got a bunch of svg's in a document (with rect, path, and whatnot inside each) and I need to draw this out to a downloadable PNG image. I understand that in order to do this there are two methods: either draw the page's HTML structure to a canvas and then export from there or render an SVG and its contents straight onto a canvas.

Hypotheses

The first hypothesis I tried to render the HTML structure using html2canvas and only found out that SVG's could not be rendered via an HTML structure at all (due to security issues). The second hypothesis I tried to render an SVG to canvas via canvg only to find out that it only allowed for one SVG element to be rendered and that only the first one would be rendered.

Results

To prove the first one wrong, type in http://www.w3schools./svg/tryit.asp?filename=trysvg_rect to this URL and disable Javascript. To prove the second one wrong I have a fiddle to try out.

The Question

I want to make it clear that my reasoning for having multiple svg's is so that I can place them within a responsive grid system and resize via aspect ratio. Without further ado, I ask my question: How can you render multiple svg elements to a canvas? If the answer to that question is "it isn't possible", then next my question would be: Should I be rendering one svg instead and handle responsiveness another way?

• javascript
• html
• canvas
• svg

• Another option is Fabric.js which can not only parse and display SVG but also creates object model, allowing to change objects programmatically and/or via controls. I loaded your example in fabricjs./kitchensink (3rd tab — "Load SVG") and used "Load without grouping". Both rectangles are rendered on canvas; then you can do anything you want with them, including getting an image of a canvas. – kangax Commented Jul 30, 2013 at 18:54
• @kangax: Wow, that's pretty cool. I dig it. I'll be sure to check that out, nice work! – cereallarceny Commented Jul 31, 2013 at 1:10

1 Answer 1

You should be able to draw SVG to canvas just as any other image:

var img1 = document.createElement('img'),
    img2 = document.createElement('img')
    count = 2;

/// image loading is async, make sure they are loaded
img1.onload = img2.onload = function() {
    count--;
    if (count === 0) drawImages();
}
img1.src = 'some1.svg';
img2.src = 'some2.svg';

/// when loaded, draw them somewhere on the canvas
function drawImages() {
    ctx.drawImage(img1, 0, 0);
    ctx.drawImage(img2, someX, someY);
}

That being said - there are a couple of restrictions:

• FireFox currently does not want to draw images properly without width and height set inside the SVG file.
• CORS (Cross-Origin Resource Sharing) applies if you want to extract images as bitmap (toDataURL/getImageData). If not they should work as normal.