SVG support in Firefox 3
Posted by josh at August 4th, 2008
Whoa! Am I the only one who didn’t get the memo that suddenly Firefox has really impressive SVG support? Check out these demos and be amazed at what you didn’t think your browser (sans Flash) could do.
Is there any more point to the HTML <canvas> element?
Does anyone know if this notion of a “compound document” is standardized? Eg. where I can have an HTML page with an SVG snippit embedded, and I can manipulate it from JavaScript as one big DOM? I know this works in Firefox (as the above linked-to examples demonsrate), but will other browsers that add SVG support work the same way? If so, the standard HTML+CSS+JavaScript platform just got a *lot* more capable.
There is the capability for doing animation (as this demo illustrates) by using JavaScript’s setTimeout or setInterval to run some JavaScript code periodically that updates the DOM. This seems to work decently, though you have to do all the math yourself and the animation can be a little choppy (since it’s all JavaScript). It appears that SVG also defines animations that you can specify declaratively which seems like it would both let you express animations at a higher level (”set this element into motion based on a spline with these key points”) and would probably get you smoother results since it the animation would be implemented at the browser level instead of JavaScript. But Firefox doesn’t currently support any of the animation module.
Yes, DOM manipulation of XHTML/SVG compound documents should work the same everywhere - it’s just the XML DOM at work.
As for canvas, it’s way less capable than SVG but also makes some simple things much simpler (and potentially faster). For example, from these slides:
SVG
var rect = document.createElementNS(SVG_NS, “rect”);
rect.setAttribute(”x”, “5″);
rect.setAttribute(”y”, “5″);
rect.setAttribute(”width”, “20″);
rect.setAttribute(”height”, “20″);
rect.setAttribute(”fill”, “red”);
parent.appendChild(rect);
Canvas
with (ctx) {
fillStyle = “red”;
fillRect(5, 5, 20, 20);
}
But SVG makes other things simple that are impossible in Canvas without implementing your own “document model” on top of it.
For simple programmatic drawing without much animation, they’re pretty close to equivalent in speed and code.
Matt Brubeck
I just found Raphaël, which is just the SVG-based, jQuery-like JavaScript library I’ve been searching for! Vector graphics, here I come…
Matt Brubeck
@Matt: how is Raphaël different than DojoX GFX? Just that it’s more minimalistic?
josh
I haven’t tried out dojox.gfx yet - still working down my list of libraries to try. It looks pretty usable and mature. (Raphael on the other hand was first released last week, so it’s hard to say yet.)
My use case is pretty simple (just some black-and-white line drawing), so it probably won’t make that much difference which library I use. At that level, they all have the same features. If I chose Raphael it would probably be because it would be less intimidating to customize or debug the library myself. On the other hand with a more mature library I might not need to.
Matt Brubeck
P.S. I was worried that DojoX GFX would have dependencies on a lot of the other (huge) Dojo libraries, but it looks like the dependencies are very minimal. So, that’s another point in Dojo’s favor.
Matt Brubeck
FYI - Opera 9 and Safari 3 have similiar level of support for SVG. Firefox 3.1 should have some level of support for declarative animations (SMIL) as should the next version of Safari (after 3.1). Opera has had SMIL and SVG support for years.
The only browser really not playing the SVG game at the moment is Internet Explorer.
Jeff Schiller
Here’s a demo of some the cool things you could do :http://clockamatics.googlepages.com/live.html
Those clocks were written for Linux desktop in svg, all they needed to work in Firefox was javascript.
Edd
Hm. I’m writing a music catalogue page, with the first line of each score as embedded svg. Works like a charm in Firefox 3.0 on a W*ws box, but strange results on ubuntu: only text elements scale correctly with browser controls
Any hints or tips for resolving this? gratefully received!
Niels Grundtvig Nielsen