16

In order to answer this question properly I thought that I would:

  1. Convert an in-document SVG file to a data URL
  2. Load it into an <img>
  3. Draw that <img> to a <canvas>
  4. Convert that <canvas> to a PNG data URL
  5. Load that data URL into an image.

I have an example of this attempt here:
http://phrogz.net/SVG/svg_to_png.xhtml

In Firefox I get (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] when attempting to draw the image to the canvas in step 3.

Why do I get this error in Firefox, or how do I work around it?

In Chrome I get a SECURITY_ERR exception when I try to call toDataURL() in step 4.

Why would I get this error in Chrome, or how do I work around it?

The WhatWG specs state that the origin for an image "generated from a data: URL found in another Document or in a script" should be the same as that document. All data in this test is from the same document.

Community
  • 1
  • 1
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • Are you getting the same error (in Chrome) if you use an SVG file? It is possible that after so many level of copying that Chrome is no longer certain of the origin? – Brian Nickel Nov 16 '11 at 21:03
  • @BrianNickel Good question. Oddly, yes. If I change the last line to `svgImg.src = "smiley.svg"` then it still throws the error, despite loading an image from the same domain. This warrants further investigation; perhaps the SVG Data URL is a red herring. – Phrogz Nov 16 '11 at 21:08
  • I think the svg is the problem: http://jsfiddle.net/eGjak/212/. If you draw the data URL of the canvas itself, it works on Chrome, but the data URL of the SVG does not. – pimvdb Nov 16 '11 at 21:15
  • 3
    @pimvdb You're right; a "Chrome engineer" on IRC just confirmed that drawing any SVG to Canvas currently taints the canvas, regardless of SVG origin. This was described as a "punt" due to the hard security issues surrounding SVG/`foreignObject`. (Not posting this as an answer until Firefox problem is sussed out.) – Phrogz Nov 16 '11 at 21:25
  • See also http://stackoverflow.com/questions/3975499 for a workaround – Phrogz Nov 17 '11 at 02:05
  • Your example http://phrogz.net/SVG/svg_to_png.xhtml is not working on IOS the in as PNG data URL is not working. Do you have a solution for that? – Michael May 21 '14 at 13:27
  • @confile Why not just leave it as a ``, since that works fine? (This issue has [its own question](http://stackoverflow.com/q/23785071/405017).) – Phrogz May 21 '14 at 15:19
  • @Phrogz because I want to export it and share on other networks. – Michael May 21 '14 at 15:27

1 Answers1

8

In Firefox, SVG images taint the canvas but we're working on removing that restriction in https://bugzilla.mozilla.org/show_bug.cgi?id=672013 when that bug lands what you're trying to do should be possible. This restriction has been removed in FFv12.

All browsers implement similar restrictions and all are working on removing them; generally by making what you can do in SVG images more restricted. For instance we don't want to get back to the bad old days of being able to work out what sites you've visited by creating an SVG image with links in it and then reading off the colour of the links using canvas.

In addition at the moment firefox requires that the svg element have width and height attributes in order to render to canvas. This restriction may be removed in future.

Edit by Phrogz: as noted in my comment above, I received independent confirmation that the security issue in Chrome is the same issue: Chrome (currently) always taints a canvas when an SVG document is drawn to it.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • @RobertLongson I hold out hope that you are correct, and another commenter on Bugzilla agrees with you; however, note that the bug you mention talks about tainting the canvas when drawing SVG to it, while the error in Firefox occurs _during_ the call to `drawImage()`. The SVG content never even makes it to the ``. – Phrogz Nov 17 '11 at 03:23
  • The element needs width and height attributes in order to be drawn to the canvas. In theory we should be able to use the viewBox bug https://bugzilla.mozilla.org/show_bug.cgi?id=700533 seems to be about working out how to do that. – Robert Longson Nov 17 '11 at 10:33
  • @RobertLongson - Do you know of any solution to this related issue? http://stackoverflow.com/questions/10329131/firefox-rasterizes-svg-to-canvas-before-resizing-instead-of-after-see-jsfiddle – Jake Apr 26 '12 at 07:40