The image you see at the left isn’t particularly remarkable — a nice little Illustrator drawing exported to JPG for the sake of displaying it online. It goes without saying that the JPG’s compression has slightly reduced it’s fidelity to the original, while it has also inherited none of the original’s ‘editabililty’.
However, if you happen to be running the latest Firefox 1.5 beta, you can now view the very same graphic in all it’s ‘vectorific’ glory right in the browser – sans plugin or extensions.
If you haven’t got 1.5 you’ll see the almost as elegant markup that constructs the image.
It looks like this, but more:
SVG is a lovely readable language. Skimming through the code, it isn’t difficult to get a reasonable idea of what it’s doing.
In fact, if you do keep your Firefox updated, there are many more interesting SVG examples available at Croczilla, including some simple animation, editable splines and even a very serviceable tetris.
The nice thing about Illustrator is it not only allows you to export in SVG (since V8.0 I think) but actually reads it natively — this all of a sudden look a lot more useful than it did this time last week. Well done, Adobe. I think you’ve jumped the right bus this time (but let’s not mention the ‘VRML thing’). Live effects, such as drop shadows, are translated into PNG, and, as such, are no longer editable on reopening the file, but otherwise the SVG behaves exactly like any AI file inside Illustrator. Files sizes, as you might expect, are excellent. The SVG example here clocks in at 15k — the JPG covers much less space but is 3k heavier.
Of course, Adobe don’t hold the all the tickets to the ‘SVG Bus’. If you don’t use Illustrator there are plenty of applications that export SVG, including Gimp (via plugin), Mayura, and Inkscape.
No doubt that it’s still very early days for this technology, and we have some thinking to do to decide if and where we could start using SVG in the real-world, but the idea of providing crisp SVG logos for print stylesheets as a first option has already generated some discussion here this morning.
Some very intersting possibilities in the future.
*Note: Before upgrading, be aware that it often takes the plugin developers a little time to catch up, so some of your extensions may not work. If you’re keen for native SVG and a full complement of extensions, there are workarounds discussed here that should let you re-enable them.
Alex WalkerAlex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.
