The Future is SVG – So Very Good

Tweet

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.

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.

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.

  • Etnu

    If SVG works in IE + Gecko, it’ll ultimately force Konquerer, Opera, and Safari to follow suit. Hopefully it’ll become at least as ubiquitous as Flash (and then, maybe, flash can die a quick and painless death). Of course, relying on plugins is always nasty; browsers need to support this out of the box. More importantly, they need to support SVG as they would any other image file; I need to be able to use an svg file as a drop-in replacement for png, jpg, or gif. Once I’ve got that, then life is good. REALLY good.

  • http://www.sitepoint.com AlexW

    If IE supported SVG, maybe Flash could develop an “Export to SVG” tool, that would output an SVG file of the graphics and a custom JavaScript library to handle any interactivity.

  • François

    Safari says:

    “This page contains the following errors:

    error on line 7 at column 43: Entity ‘ns_svg’ not defined
    Below is a rendering of the page up to the first error.”

    (And there’s nothing below but whitespace.)

  • http://www.sitepoint.com AlexW

    Safari says:

    “This page contains the following errors:

    error on line 7 at column 43: Entity ‘ns_svg’ not defined
    Below is a rendering of the page up to the first error.”

    (And there’s nothing below but whitespace.)

    I’m not Safari user but, as I understand it, Safari currently doesn’t support any SVG, but it may not be very long but it does.

    There was a small flurry of activity in the ‘SVG for Safari movement’ in June and July, and it seems the the KHTML engine that Safari is derived from, already has reasonably advanced SVG support, so porting this across to the Apple browser may not be all that time consuming.

    The current Opera does a servicable job at rendering it, although it doesn’t like the gradient background, leaving it black instead.

    IE can render it, but only with the help of Adobe’s plugin, which kind of defeats the purpose. Still, we could well have three or the four major browsers rendering SVG natively by year’s end.

  • http://www.talk-mobile.com sowen

    Just for the record CorelDraw also supports SVG ;)

    Also for (for those that don’t know) Adobe have a browser plugin to display SVG at: http://www.adobe.com/svg/viewer/install/main.html Although interestingly using Firefox 1.5 Adobe’s SVG test for their plugin fails.

  • http://www.splintered.co.uk redux

    If you haven’t got 1.5 you’ll see the almost as elegant markup that constructs the image.

    SVG is a lovely readable language. Skimming through the code, it isn’t difficult to get a reasonable idea of what it’s doing.

    aeh…i don’t know what medication you’re on, but i want some as well.

    yeah, nothing better than reading

    to get a reasonable idea of what’s going on…

  • http://www.splintered.co.uk redux

    ah…comment function mangled the above, which should have ended in:

    yeah nothing better than reading

    M175.558,221.769c-0.019-2.954,4.216,2.32,0,1c-0.867,5.2,4.498,4.168,7,6c2.995-0.658-0.957-2.138,0-4 c5.763-0.097,8.587,2.745,13,4c0.739-3.407-3.687-1.647-4-4c7.972-4.693,18.138-7.193,18-20c-0.962-3.038-5.823-2.177-8-4 c2.499-1.771,1.08-1.273,1-5c5.521,1.813,11.438,3.228,17,5c0.033-4.75-10.633-14.084-8-22c0.42-1.267,4.705-5.417,7-6 c15.34-3.9,47.221,24.342,43,44c9.813-3.853,18.227-9.104,30-11c-0.275,2.06-3.727,0.941-4,3c17.282-9.455,43.089,5.55,64,8 c-22.749,15.252-57.102,18.899-90,24c-3.315,0.02-1.017,5.651-3,7c28.164-5.502,56.109-11.224,85-16

    to get a reasonable idea of what’s going on…

  • http://www.sitepoint.com AlexW

    I guess it’s relative, redux. There are simply a lot of co-ordinates in the example. The pedal car is a pretty organic construction.

    I wouldn’t want to speak SVG, but if you’ve ever looked into the guts of a JPEG, I’d take the SVG any day.

  • ori

    for gods sake, who cares about svg! Isn;t it enough we have all kinds of ready and well compressed formats to work with? Maybe you have nothing more to do so lets see what more can we cramp in a web developers work now, shall we?

  • Michael Schumacher

    Please note that GIMP is not supposed to be a SVG editor – additonally, the plug-in that is mentioned in this article is for GIMP 1.3, which has been the developer series to GIMP 2.0 – we’re at 2.2.8 now.

    The import capabilities are considered more complete, we use librsvg for this. Exporting SVG is mainly to simplyfy post-processing, e.g. by using Inkscape and an image created by GIMP.

  • http://www.sitepoint.com AlexW

    for gods sake, who cares about svg! Isn;t it enough we have all kinds of ready and well compressed formats to work with? Maybe you have nothing more to do so lets see what more can we cramp in a web developers work now, shall we?

    ori, if you’re waiting for a ‘golden moment’ where the process of Web development is a static, universally agreed-upon and completed ‘body of work’, I think you’re in the wrong business. Perhaps try something like house-painting. No runaway technology trains there ;)

    3-4 years ago CSS layout was still an experimental irrelevancy. In 2005, if you aren’t able to at least speak authoratively to your clients about it, you probably aren’t doing your job very well.

    It is early days for SVG, but I suspect that SVG will be equally important and, frankly, exciting to work with in the coming years.

  • Ron

    The SVG test cases at Adobe’s plugin download site don’t work in Firefox.

    The car image above doesn’t work in IE even with the plugin.

    Why can’t we all just get along?

    Ron

  • derek

    The SVG test cases at Adobe’s plugin download site don’t work in Firefox.

    Looks like they are in svgz (compressed format). Perhaps if they were in plain SVG, they would work. Anyone tried contacting Adobe…?

    Why can’t we all just get along?

    Um – because PC users live in a world dominated by a giant monopoly: since when are we going to “get along”?!

  • ramesh pallikara

    i found sodipodi to be among the best svg editors btw

  • Pingback: SitePoint Blogs » Canvas for IE with VML

  • redhans

    SVG has been around a while. We have been using it for years for displaying online maps for vehicle tracking. I don’t know how it does with other browsers, but with the Adobe SVG plugin for IE we have a complete street level map of Hungary to show the tracks, speed, etc for all the vehicles in a fleet: http://www.hirot.hu/cason. Of course with maps we are dealing with huge file sizes so its still a bit slow.