How do I read the viewbox attribute of an SVG in a canvas element?

Question

I have added an SVG to a canvas element. How do I get access to read the viewbox attribute of the SVG?

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.id = "svgObjectElement";
img.type = "image/svg+xml";

img.onload = function(){

    ctx.drawImage(img,0,0);

};

img.src = "mySvg.svg";

Answer 1

You can't. The browser will load the SVG and render it as a bitmap. All you have then is the Image() / HTMLImageElement . The actual SVG is gone by that point.

You would need to load the SVG separately. There are various ways to do that, eg. with AJAX, or create an <object> element in your DOM.