SVG is awesome

Get Started
1

SVG (Scalable Vector Graphics) is awesome.

This is just shout-out for anyone interested in, but yet to use SVG on the web to Get On It.
SVG is an XML based web standard for creating native vector graphics on the web - As I understand it, it’s fully supported in all the latest and greatest versions of the major browsers, and will be in IE9.
I believe IE’s lack of support is what has stunted it’s uptake amongst developers.
IE6-8 will be around for quite some time to come so it’s not really an option right now is it?

Absolutely.
Dmitry Baranovskiy, an Australian javascript developer has created Raphaël, a neat library to provide a javascript interface for creating / manipulating SVG that support every browser worth mentioning.

Two examples that shows it’s capability well are:

Every part of an SVG graphic is a DOM element - so you can attach events and respond to user actions like in the pie chart above.

Canvas is an another option for drawing graphics on the web but it just isn’t as cool.

Firstly, vectors are cooler than pixels
Vectors require less information to draw shapes because the graphics are simply encoded path strings which the browser then translates into pixels on the screen.
If you’re not from a design background vectors are good for solid shapes like logos - not for creating images like photographs.
SVG is scalable
Ever since I first opened up Illustrator and starting drawing, paths, zooming, my graphics maintaining their crystal clarity I’ve had a thing for vectors.
They also print much better than images because their dimensions can scale to fit the page where pixels just get squashed.
SVG is made up of real objects
The canvas api doesn’t provide any form of saving a collection of pixels as an object, all you ever have with canvas is a series of javascript calls that tell the browser to push pixels around on a canvas. For this reason if you want to animate a moving square you need to draw the square, clear the canvas, redraw the square, clear the canvas and so on.
With SVG you can simply update the position of the one object.

I haven’t watched it myself yet but I hear this is a good getting started guide to Raphael if you are interested:
http://peepcode.com/products/raphaeljs

I’m going to have a think about a cool usage of SVG and write a plugin for raphael.
If anyone has a good idea of something they would like to see with vectors let me know.
Or, if you would like to have a go with me have a look at Dmitry’s g.raphael plugins to see how it can be done. e.g.
http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.line.js?raw=true

2

No body expects people to write an SVG path by hand.

Most common is for people to create the paths in a program like Illustrator which can export to SVG path.

3
Off Topic:

Funny, I’m legally blind and have the exact opposite problem – though the question would be nearsighted or farsighted? I mean if you’ve got blurry vision more blurry fonts that blend together doesn’t exactly help matters…

Of course you want to ‘fix’ the vision problems on PC’s go into the settings and change the OS to large fonts/120dpi. End of problem…

Which isn’t even an option on the Mac so on good displays (1920x1200 at 24") you’re stuck with “squint with your head 12” from the display" font sizes… which is another reason I find the Mac to be a useless toy.

4

Performance is a very valid point, svg undoubtedly requires more processing power and should always be tested.

I’ve found rendering and anti-aliasing pretty spot on though.

Cool? Maybe. Ready for deployment on websites? I don’t think it’s there yet.

Hmm, I’ve seen it used perfectly well on websites. Is the performance impact the only reason you hold this position?
File-size depends entirely on the complexity of the image and if it’s vector based or not - it’s not really comparable to images because of the animation / DOM aspects.

Have you tried your demo with exCanvas for IE6/7?
I’ll have a go at creating a simliar demo to yours in SVG and we’ll compare source.

I’m not anti-canvas but I’m certainly pro SVG, have a play with Raphael and let me know what you think.

5

Which is also part of my issue with SVG. I can write canvas directly with minimal headaches (and it makes a hell of a lot more sense) – if anything Rapheal’s library LOOKS and awful lot like Canvas.

In that way SVG is a bit like X11 – to make it actually useful for mere mortals you have to put a library (qt, gtk+, motif) on top of it… IMHO that says really bad things about the underlying technology!

Off Topic:

Dont’ hang around usability guys much? It is for legibility on screen – Apple’s renderer is a blurry mess by comparison. Google “Blurry apple fonts” and you’ll find the argument between “true to print” and “hammer into pixel boundaries for legibility” goes back to when apple introduced the new renderer on OSX.

Cannot STAND it. I’d rather turn the anti-aliasing OFF rather than look at that mess of “ooh look, EVERYTHING is in bold”.

Really though it’s an old argument. Your print and layout guys rant and rave about how wonderful apple’s approach is, while the accessibility people prefer cleartype.

Oh, I just looked at the code for some of those demos – if this is typical of what you have to do to use it:

r.path("M295.186,122.908c12.434,18.149,32.781,18.149,45.215,0l12.152-17.736c12.434-18.149,22.109-15.005,21.5,6.986l-0.596,21.49c-0.609,21.992,15.852,33.952,36.579,26.578l20.257-7.207c20.728-7.375,26.707,0.856,13.288,18.29l-13.113,17.037c-13.419,17.434-7.132,36.784,13.971,43.001l20.624,6.076c21.103,6.217,21.103,16.391,0,22.608l-20.624,6.076c-21.103,6.217-27.39,25.567-13.971,43.001l13.113,17.037c13.419,17.434,7.439,25.664-13.287,18.289l-20.259-7.207c-20.727-7.375-37.188,4.585-36.578,26.576l0.596,21.492c0.609,21.991-9.066,25.135-21.5,6.986L340.4,374.543c-12.434-18.148-32.781-18.148-45.215,0.001l-12.152,17.736c-12.434,18.149-22.109,15.006-21.5-6.985l0.595-21.492c0.609-21.991-15.851-33.951-36.578-26.576l-20.257,7.207c-20.727,7.375-26.707-0.855-13.288-18.29l13.112-17.035c13.419-17.435,7.132-36.785-13.972-43.002l-20.623-6.076c-21.104-6.217-21.104-16.391,0-22.608l20.623-6.076c21.104-6.217,27.391-25.568,13.972-43.002l-13.112-17.036c-13.419-17.434-7.439-25.664,13.288-18.29l20.256,7.207c20.728,7.374,37.188-4.585,36.579-26.577l-0.595-21.49c-0.609-21.992,9.066-25.136,21.5-6.986L295.186,122.908z").attr({stroke: "#666", opacity: .3, "stroke-width": 10})

Then OH HELL no…

6

I just got explorercanvas working with it… kind-of. Apparantly you cannot dynamically resize VML so when set to full screen you get the small scale version without the overdraw cut off on the right. (kind of like when you run some flash files at a different aspect than they were written for!)

That could be a problem on the SVG to VML implementations too! I mean, what’s the point of SVG or Canvas if you can’t dynamically resize it on the fly?!?

7

Only sadist’s and Dmitry would write SVG path’s by hand.

A few quick thoughts:

Off Topic:

You are the only person I have ever heard say that ClearType is superior to Apple’s font renderer. I love the way font’s look on the mac, and I’m not alone.

If you are always looking for ways to dismiss an idea you will find plenty. SVG has many strengths, none of which you are acknowledging. The gears demo is simply that, a demo - which is currently broken in Safari.

Everyone uses abstractions, I’m sure you do also for some things.
Raphael’s abstraction is one that allows us mere mortals to generate SVG without writing path strings and support IE without duplicating effort.
There is nothing negative at all about using this abstraction that is very justified and well written.

There is a principle which is a bar against all information, which is proof against all arguments and which cannot fail to keep a man in everlasting ignorance - that principle is contempt prior to investigation.

8

It falls apart miserably if you are rendering anything complex at 64x64 or lower. At larger sizes it’s less noticeable but really when rendering vectors – ANY vector format small you can’t really trust the machine to handle it without extra ‘hinting’ – much like how Microsoft Cleartype is superior for screen legibility… as opposed to Apple’s renderer which basically says “screw legibility we want true to print” or Freetype which says “make the glyphs true to print and then kern like a sweetly retarded crack addict”

In that way it’s more about the browser implementations not being ready for prime-time than it is the specification.

I’ve seen it broken on a few websites – even when using Rapheal… I just tried that gear demo on my i7 870 workstation in a few different browsers – Starting it in firefox suddenly starts making the hard drive start chugging and the frame rate stutter like mad (!?! what the !?!), the inner dot that’s moving doesn’t turn properly in Opera (even though the animation of it moving is smooth as silk), the animation is jerky and jittery in IE8, and while it runs ‘perfect’ in chrome the page never finishes loading here in Safari.

Everything I’ve come to expect from the current SVG implementations and translation layers to turn it into VML for IE.

True – but for me if you’re going to do it as code do it as code; Raphael is a scripting library to run scripting as you aren’t even actually writing SVG directly, you’re just using it as a API layer. Might be cute if it gave the option to render to Canvas as well since canvas is faster and more reliable in some browsers!

Zero support for IE8 or lower currently as I didn’t include a canvas to VML script… Which if I were to try I’d probably use this one:

Which I would prefer over something like Raphael since for browsers that support canvas I can just write for canvas, only sending the ‘fix’ to legacy IE as needed.

Though speed wise I don’t think it would be able to keep up with it… I tried it before and it kept giving me this wierd error about an error on line one of their .js when I add it to my page; strange since it works on their demos.

I was gonna take a stab at rewriting the gears demo in Canvas, just to see if there’s a performance difference.

It’s a cute idea, but that extra library layer between using SVG directly in an interpreted language sours me on the concept.

9

They also pig out on ram for the render buffer, send the cpu off to la-la land with vector calculations, often times are larger than they would be as bitmaps at normal web sizes of 4096 or less pixels (64x64), don’t render consistently across browsers, don’t anti-alias in a meaningful manner at small sizes, etc, etc…

I still consider vectors an intermediary format so far as the web is concerned, you’re usually best off rendering down to a .png or jpg, then hand tweaking the render for better AA.

… and for animations I really think canvas2d is a better technology. I can at least do an animation like that gear one with canvas and use it on my netbook or older 1.7 celery laptop… I open up that gear one in Opera or FF, cpu use slams to 100%, fan slams up to full speed and the system is barely usable.

Cool? Maybe. Ready for deployment on websites? I don’t think it’s there yet.

I think Canvas shows a lot more promise – I also find it a LOT easier to work with - but YMMV.

http://canvastest.comoj.com/

Something I’ve been playing with. Some day it might be come a missile command ripoff (though drawing more from the old trash-80 coco “Polaris” game). I am mostly working on that in free pascal/openGL ES, but for laughs I ported one of my codepoints over to canvas2d/javascript just to see if it could be done. The bezier curve functions actually make the random wave action look cooler than they do in OpenGL (which has no in-built curve capabilites)

10

[ot]I’ve got myopia and find the rendering of fonts on the Mac a lot easier.

I used a PC for nearly ten years and must say that I find reading on the Mac easier. I need to squint my eyes when on a Windows environment because my eyes signal to my brain that I’d like to sharpen the text. That seems contrary to your experience. Of course, it’s also a matter of habitus.

Then I know of a few people who have a deterioration of the eye due to Diabetis II as well as one person who has a defect (through too much pressure/bleeding) in the the vitreous body of the eye (corpus vitreum), something that many elderly people have. She, too, finds reading large, bold letters more comfortable (she’s got roughly 40% vision). Mac + Opera = Gold

These aren’t scientific examples, obviously, and you’ve made the exact opposite experience as I have. It merely goes to show that there are vast differences in experiencing one and the same thing. Darn, am I being philosophical.

[/ot]

11
Off Topic:

Actually, quite a few people with very low vision find Mac’s rendering a lot better because the fonts are stronger by default which can (emphasis on can, doesn’t have to) make it easier deciphering the letters on screen. I’m living with someone who has an extremely low vision, she can hardly read the rendering on PCs.