SVG support in Safari

No idea when this will make it into a public release, but Safari nightly builds have had SVG support for some time. From SVG Has Landed:

This version of SVG is integrated with the WebCore DOM, which means you can now mix SVG and HTML in an XML document, style them with a common CSS file, etc..

And it doesn’t stop there. Safari now also has SVG Text Support.

SVG support sounds cool. Maybe. Not sure what to use it for though. Anyone have any good examples?

Posted on February 2, 2006 in Browsers, Quicklinks


  1. Replacement of complex “fancy fonts” instead of them being served as ugly unscalable raster pictures - for anyone of does that sort of weird thing.

  2. Google’s Web Authoring Statistics make heavy use of SVG for the graphs, although I’m not sure why since it’s all static data.

  3. Currently, I’m mixing XSLT and SVG to create dynamic bar/pie graphs without actually having the server do anything except spit out raw XML data, as XSLT and SVG is processed on the client side.

    Saying that, browser support is still too thin on the ground at the moment for this to be anything more then just experimenting.

  4. One of the plug-ins (er, “peppers”) for Sean Inman’s Mint stats package uses SVG to make pretty graphs. I’d love to see that working in Safari.

    Beyond that, there are other great uses I can imagine. Vector logos that resize with the page, for example (which you’d currently need Flash for). Scalable icons and widgets for online forms and web applications. And so on…

  5. Client side generated imagery, such as pretty graphs.

  6. SVG also comes in handy from a design standpoint. you can have vector illustration files as graphic elements in your site instead of relying on fixed-sized (and weightier) bitmap images. SVG also offers a ton of common design effects like drop-shadows, blurs, opacity, bevels, etc. that would otherwise require images to achieve.

  7. Samples from the Mozilla SVG Project:

  8. The FoafNaught example is pretty cool.

    The reason we havent seen any yet is because the browser support was lacking, with Fox, Opera and now Safari all showing some signs of SVG we’ll start to see some cooler projects.

  9. Mobile. SVG Tiny and SVG Basic.

  10. “I’d love to see that working in Safari.”

    There should be a link in some file related to the pepper where you can download SVG for Safari. But if you don’t want to look, here it is.

  11. February 3, 2006 by theUg

    Opera has SVG support from the release v8, I believe.

    As for prctical implementation, numerous Linux desktop iconsets use SVG images to produce scalable icons (smoothly resizing as you, say, change the size of the taskbar in a pixel increments) instead of creating multiple copies in folders like /usr/share/icons/someiconset/16x16, /32x32, /48x48, and so on.

  12. Two months ago, when Firefox 1.5 was released, I created a simple SVG file to test the features already supported (that are based on the spec. SVG 1.1, not the latest 1.2) like shapes, images,scripts, animations and gradients. Here’s the file:

    I don’t know the rendering in Safari nightly,but i’m not so optimist.

  13. @Marco: That was really cool. Nice job … BTW I use FF 1.5+

  14. I’ve been really pleased by the pace of Safari’s development. Apple seems very comitted to it as a product.

    I look forward to playing with SVG once it’s more widely supported. An option to export photoshop or illustrator files as SVG might be an interesting proposition for making very pretty yet ‘bulletproof’ sites.

  15. I think that Illustrator is a good solution only to export complicated static images in SVG, because it create very incomprehensible code.
    Another good tool that exports in SVG is the open source Inkscape, that is not so efficient like Illustrator but produce a much cleaner code.
    With animations and scripts -however- it’s better to have the full control of tags, so minimal text editor like Notepad & Sons are always the best.

  16. February 4, 2006 by Roger Johansson (Author comment)

    Thanks for all the examples. SVG looks like it could be used well once browser support is there.

  17. broad range of SVG links:

  18. Hi,

    You ask what SVG can be used for. Well lots of things but interactive graphs and maps seem to be favorates.

    I use SVG for comics. Most comic styles can be done with vector graphics, particularly if you have gradients and filters (you can also incoporated bitmaps into SVG for an interactive photo comic). I also have interactivity and bits of animation.

    Richard Pearman

  19. May 24, 2007 by Lukasz Korzybski

    There is a good example of what SVG is capable of at

    This is personal inflation calculator, written entirely in SVG + JavaScript. Looks and works really cool.

    I ran it on Opera 9.2, FireFox 2.0 and IE+ASV. What can be observed is that Opera and IE+ASV are equally fast and much faster than FF2 implementation. Mozilla get to work!


Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.