draw svg to canvas with canvg

Question

I use canvg for set svg file in canvas. All is ok when I set svg url:

var canvas = doc.getCanvas(num);
var context = canvas.getContext('2d');

context.drawSvg("http://localhost:8084/manual.svg", 0, 0, width, height);

But when I try to write (it doesn't work):

context.drawSvg("data:image/svg+xml,"+svg, 0, 0, width, height);

where variable svg get manual.svg content.

Is the string 'svg' urlescaped? a way to test is to copy-paste the data URI to the normal addressfield in your browser. Does it display correctly then? — Erik Dahlström, Oct 16 '12 at 12:21
Erik, thanks for your reply. I solve that problem with drawImage function. Also it works quicker than drawSvg. — Alexandra, Oct 19 '12 at 10:16

score 3 · Accepted Answer · answered Oct 19 '12 at 10:17

3

img.src = "data:image/svg+xml;base64,"+btoa(svgContent);
context.drawImage(img, 0, 0, width, height);

it's one variant to solve the problem.

answered Oct 19 '12 at 10:17

Alexandra

1

what's in the variable svgContent? canvas, or context? – Kakitori Aug 05 '14 at 07:39
svgContent needs to be the outerHTML of the svg element (including the – Mike Furlender Oct 23 '14 at 14:39

1 Answers1