Divya Manian

RSS Feed Youtube Channel Github

SVG is coming!

I am an SVG fanatic, in fact I was using SVG for implementing my final year project (which was to create a GPS system on a linux mobile device) in 2000. So yes, I am partial to SVG and cannot stop writing about it.

I have long bemoaned the persistent lack of love for SVG from browser vendors but these developments indicate that is no longer the case:

  1. HTML spec allows inline SVG in your HTML document (and not just XHTML document). This means you can use an SVG element inline an HTML document (without using any ugly object tags). You can already test it on the nightly builds of Firefox

  2. Apple’s retina display brought back attention to this old post on how to develop websites for higher DPI – which basically advocates SVG (Paul Irish also tells me a future release of Android will support SVG).

  3. @media queries are extensively supported in several browsers. Andreas Bovens of Opera has a great technique to use media queries with SVG which he explains in this video:

    You can control the styles of the SVG file that referred to by an image element, based on the width specified on the image element (see demos of colored circles, scaling SVG logos, and altering SVG charts.

    Update: Shepazu has rightly stated CSS Media Queries work on Firefox, Webkit and Opera, not just Opera (for some reason the colored circles demo only seems to show in Opera).

  4. SVG-Edit is a fantastic open-source online SVG editing platform (it is new and the UI needs some love), especially for tiny icons.

  5. Opera, Webkit browsers recognize SVG images served as data-uris for use as background images.

I am glad things are looking up for dear SVG. What was that Canvas thing you were talking about?