Question

I have an SVG document representing a deck of cards. Each card is uniquely group and named (ie 3_hearts). Now I want to be able to render one of those cards to the canvas. This stackoverflow user was in the same situation but in python: How do I render *parts* of a svg file?

I’m using a library called http://code.google.com/p/canvg/ which provides an interface to render SVG directly to canvas in the most desirable way possible:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

The canvg constructor takes a svg string, url to svg file, or xml document.

Now, how am I going to get canvg to render just one of the cards? :/ Thanks in advance

Answer 1

In theory you should be able to use an SVG view specification for this, something along these lines:

var img = new Image();
img.onload = function() { ctx.drawImage(img,0,0,200,200); }
img.src = "some.svg#svgView(viewBox(50,20,200,400))";

The svgView fragment syntax can select which part of the svg you want to render. Here is an example (not using <canvas>, but just for the <img> element). Note however that some browsers haven’t implemented this yet.