HTML & CSS
Article
By Alex Walker

The Future is SVG – So Very Good

By Alex Walker

A pedalcar in JPGThe 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.

--ADVERTISEMENT--

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.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.