Issue 70 has been open for awhile now. In fact it's one of just a handful of two-digit bugs left in SVG-edit. Now that all browsers have heralded support for SVG into the future, one might argue that the need for this bug will evaporate in a couple years. However, one would be wrong. First, there are lots of mobile browsers out there. Second, in some cases it could be easier to just tell the browser how to draw a collection of dots rather than mathematical instructions (think thumbnails). So how to solve it?
One thought that occurred to me is if I can shove the SVG into a HTML5 Canvas element, I can then call toDataURI() on it to generate a PNG. Unfortunately only Opera seems to have experimented with loading SVG into a Canvas directly. Also, there are many effects that can be done in SVG that cannot be done in Canvas (filters, fonts, and more).
The Canvas2D API does mention that in the future, the svg:image element may support the CanvasElement DOM interface. I'm anticipating Microsoft to announce <canvas> support for IE9 later this year and probably to support this interface on svg:image elements. It's one way they can innovate on the web standards front while they continue to catch up to other modern browsers.
This would be good, but why only the svg:image element? I'd argue that any element that contains some geometry could gain the toDataURI() method (particularly useful would be the <svg> element here).
Until such time as browsers all get in sync, there are other options. canvg is one such option and I've been dutifully raising bugs and writing teeny patches but there's a long ways to go for a robust solution.
Ultimately this is another case of why am I doing something in script that all browsers already know how to do? You really have to think long-term in the web space, don't you? 🙂
Other ideas?
Another alternative is to promote the standardization Mozilla’s
canvas.drawWindow()API extension for “Rendering Web Content Into A Canvas”. Currently it “is only available for code running with Chrome privileges.”https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
You may have tried this already, but after some experimentation, I have been able to get close using a method similar to the one described here:
http://ajaxian.com/archives/todataurl-canvas-and-svg#comment-275765
Which indeed allows an SVG image to be loaded in a canvas in Opera and Webkit. Unfortunately, it has to be a same-origin file for toDataURI() to work, using a data: URL file throws a security error. So there’s no way to do it with JS-generated images.
In theory though, one could generate the SVG file server-side, then toDataURI() should work fine. Of course that’s not an option for svg-edit… 🙁
Alexis – I haven’t tried that technique yet – interesting.
But of course I’m looking for a cross-browser approach so it’s looking more like if we can get canvg supporting enough of the spec I’d go that route until browsers do something better.