- SVG and the DOM
- Simple Animations
- Modifying SVG from JavaScript
- Browser Support
Browser Support
SVG is very powerful, but unfortunately it suffers from the same fate as a lot of other web standards: poor cross-browser support. Internet Explorer doesn't support SVG at all, although plug-ins can remedy this lack. SVG was the outcome of the W3C's attempt to standardize two competing vector graphics formats, one from Adobe and one from Microsoft. IE supports Microsoft's proposal, Vector Markup Language (VML), and some JavaScript libraries transform SVG into VML if you try using SVG in Internet Explorer.
Gecko supports SVG, but not SMIL, so there are no animations with SVG in Firefox. However, the FakeSMILe script allows Greasemonkey users to get SMIL support via JavaScript, and this script can be imported explicitly with a little bit of user code.
Opera mostly works, although animation performance is very poor100% CPU usage, and far more jumpy than WebKit when using only a small percentage of my CPU. Opera also doesn't set the dimensions correctly for foreign objects, meaning that mixing SVG and XHTML is somewhat problematic. All of the examples that I showed in this article work correctly with WebKit, but apparently some other parts of SVG are better supported by other rendering engines.
Still, this is a big improvement over a few years ago, when even basic drawing didn't work correctly with most browsers. You can use SVG today, if you're willing to put up with a few hacks to work around missing features in various browsers. You can also use it for intranet applications, where you get to specify minimum browser requirements. Hopefully, over the next year or two, the remaining bugs will be ironed out.