Firefox SVG Support
I made a quick pass through many of the SVG files on my site this morning. Last week I focused on Opera 9 as the target SVG user agent. Today, I focused on Firefox 1.5. I did get a nice jump start from last weeks fixes, but so far, I’d say Opera is more pleasant to work with than Firefox.
A number of my samples use SMIL and, unfortunately, there appears to be no SMIL support in Firefox. I could resort to script to emulate SMIL; however, the irony is that I created many of those examples to explicitly avoid the use of script.
Another problem was with the use of em values in the dy attribute of <text> and <tspan> elements. Ems are useful in that they allow me to define leading independently of font size. Without them, I have to hard code the font-size. This is a bit annoying in cases where I want on-the-fly font-size changes (maybe for accessibility reasons, for example). I have to resort to DOM magic to update the attributes to match the new size and heaven forbid if I was using values like 1.25em.
I ran into an issue where large rectangles stopped firing mousemove events. ASV had a nice “feature” that let you define ridiculously large rectangles to get mouse events outside the browser’s window. I adopted this practice in a number of places, but Firefox didn’t like the values I was using. Fortunately, I was able to reduce the rectangle size and I started getting events again.
I haven’t done any performance comparisons, but it feels like ASV is fastest of the three in many cases. Firefox comes in second and Opera is the slowest. However, a few fairly CPU-intensive samples were noticably faster in Firefox which was good to see.
It’s really encouraging to see SVG expanding into new spaces. Lets just hope this support will continue to grow and to improve in these browsers and not go the way of ASV.
July 9th, 2006 at 6:17 pm
Are you seeing any text on http://www.kevlindev.com/tutorials/basics/text/svg/index.htm with Firefox 1.5? It seems to work in the latest nightly of Safari with SVG, but not in Firefox. I can get text to show up for me in Firefox if I set a stroke, but nothing for fill. Maybe text is broken in Firefox on the Mac but works on Windows. I haven’t tried upgrading to Bon Echo yet.
July 9th, 2006 at 7:56 pm
Hey Charlie,
I’m running FF 1.5.0.4 on the Mac and I do see text on that page. The Mac and PC both show the “start”, “middle”, and “end” samples correctly, the multiple-line sample displays both lines over each other (missing em support), and text on a path is blank.
Hope this helps.
July 10th, 2006 at 8:09 am
Quite bizzare. Doesn’t work for me in 1.5.0.4 or in the latest Bon Echo but it does on a coworkers Mac. It works but poorly in Camino(weird staticy background). I guess Mozilla’s SVG implementation needs another couple revisions to bake in.
August 14th, 2006 at 12:52 am
Hearing about bugs and other problems is very interesting, and updating your much referred-to examples to also work on the latest browsers is very, very useful, thanks.
Please take a look at http://wiki.svg.org/Starter and hopefully you can help to turn that into a useful resource