Scalable Vector Graphics

The W3C is issuing a final call for comments on its draft of Scalable Vector Graphics 1.2. After a review of public input the SVG Working Group will be submitting for candidacy.

If you have not explored SVG yet – put it on your radar. It is an XML-based language for web grapics and can interact with traditional web formats such as gif, jpg, png, html and others.

The best way to relay the power of SVG to you is to show it – and no better examples exist than on Adobe’s SVG Zone (Adobe has an excellent viewer to download for free as well). The amazing demos are found here that were created for real world use.

Once you see them – you will most definitely see the applicability to the web developer and designer’s goals to take applications and user interfaces to the next level.

I personally have been exploring SVG for use in a reporting solution that can generate interactive charts with drill down capabilities. This is for a web application project I have been involved with for nearly 18 months. It is in production for several corporate users – and the next logical step in its roadmap is to take the reporting capabilities (it is a data aggregation, mining and transformation tool) and user interface to a higher level, with more sophisticated charting options.

For an excellent ‘get started with SVG’ tutorial (one that I started with as well a while back) — check out this very useful How-To at xml.com.

NOTE: The Adobe viewer works across multiple platforms – but thought I would add that Mozilla has some native support via builds in CVS if you dare. That link is here — http://www.mozilla.org/projects/svg/.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.sitepoint.com Simon Mackie

    I played with SVG right at the very when the SVG 1.0 rec was released. In a browser, being able to manipute the vectors via the DOM on the screen was cool. But, to be honest, the resulting files are only really machine-readable, so a binary format, like Flash, is a much better choice for this type of application.

  • http://www.practicalapplications.net bwarrene

    The item to keep in mind is the open standard and flexibility of xml – being able to hook into any number of back end systems with more graphical and sophisticated UI’s for end users as demands go higher on the web (or for that matter browser based desktop) applications.

  • http://www.camdaniel.com/ Cam

    Urchin stats uses SVG to create some nice traffic graphs, just a FYI for people who may run Urchin but not sure what SVG is :)

  • Nicholas C. Zakas

    I’ve also used SVG for doing drill-down charting in Web applications. The problem I ran in to is actually cross-platform support and cross-browser support. The Adobe SVG viewer only works in Internet Explorer (Windows and Mac) and Netscape 4.x (all systems)…it does not work on Mozilla on any platform. Even if you spoof the installer by using the “fake Netscape 4.x” approach, the plugin crashes Mozilla.

    You can try using the Corel SVG Viewer as well. It’s not as full-featured, but it is possible (though not easy) to install it into Mozilla using the fake Netscape 4.x method.

  • http://www.practicalapplications.net bwarrene

    Yes – I am running into the same issue – however – there remains a movement to get Mozilla natively supporting SVG. I only hope the bug gets caught (in a good way!) on OS X as well.

  • http://www.xhtmlcoder.com/ xhtmlcoder

    Yes, if only SVG were implemented on more systems.

    The easiest way to get it to work on Mozilla Firebird without it crashing the browser was to download the ‘Adobe SVG Viewer 6.0′ beta.

    I pray for when it becomes native.

  • http://www.practicalapplications.net bwarrene

    Just found this today from Rui’s Tao of Mac as a nice follow up to my original post on SVG.

  • stelt

    Blane:
    Though i really like the Adobe SVG examples, there really are better, also publicly available on the web. have fun surfing. try svgx.org , svg.org , svgopen.org

    Simon:
    You don’t have to look at the source, just use a drawing tool (most support SVG). Lots of people work with the code cause they want to, cause it gives them extra options or just plain developing efficiency. Pointing to Flash when talking binary format makes me wonder if you really know what advantages is has for SVG to be an open format compared to Flash being owned by Macromedia

    Nicholas:
    try
    http://plugindoc.mozdev.org/windows1.html#AdobeSVG
    and
    http://www.adobe.com/svg/viewer/install/main.html

    I want one of these: http://svg.org/special/svg_phones