Question

I am trying to load an svg image into canvas for pixel manipulation
I need a method like toDataURL or getImageData for svg

on Chrome/Safari I can try doing it through and image and canvas

var img = new Image()
img.onload = function(){
  ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however...
  var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18
  var data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18
  }
  img.src = "image.svg" //that is an svg file. (same domain as html file :))

But I get security errors.
Any other way?

Here is a live demo of the problem http://clstff.appspot.com/gist/462846 (you can view source)

Answer 1

From: http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

The reason why you cannot use an SVG
image element as source for the
drawImage method is simple, but
painful: the current Canvas
specification does not (yet) allow to
reference SVGImageElement as source
for drawImage and can only cope with
HTMLImageElement, HTMLCanvasElement
and HTMLVideoelement. This
short-coming will hopefully be
addressed during the process of
defining “SVG in HTML5” behavior and
could be extended to allow
SVGSVGElement as well. The xhtml:img
element in listing 3 uses
visibility:hidden as we do not want it
to interfere with its visible copy on
the Canvas.