Discuss: Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
by Shelley Powers
- Editorial Comments
2 Beginning times, just like html and javascript
I’m going to say something horrible, but let’s face it, as we probably will meet it : when SVG will be in all major browsers, what about replacing html by svg and directly write php/rails/whatever code in svg templates?
I like the fact that you instantaneously draw the borders of good usages of svg, but maybe it will have to be far more stressed.
I pretty sure lots of people will be delighted to directly put online what they’ve draw in illustrator/inkscape with a few more lines of code, and it will be the end of separation between content and styles.
posted at 10:40 am on January 26, 2010 by oelmekki
3 'Major' browsers
I agree with fritz’ comment: that statement certainly stood out and started ringing alarm bells. I suggest the word “major” be replaced with the word “good”; the statement would then read perfectly ;)
posted at 11:49 am on January 26, 2010 by fiveminuteargument
4 Good point
Fritz, your point is good, and originally the editor had it first. I switched the two. My only excuse is I didn’t want people to immediately dismiss SVG because of the current lack of SVG support. Mea culpa.
Having said this…please don’t dismiss SVG just because of current issues with IE ;-)
posted at 02:48 pm on January 26, 2010 by Shelley Powers
5 SVG vs Canvas?
These articles are a good introduction to the subject with well-chosen examples.
Surely using the browser canvas directly is where a lot of the interest is now going? SVG’s only advantage over other vector formats is that it is open. This comes at the not inconsiderable advantage of XML as the serialisation format. I currently have an application that uses Graphviz to turn dot to SVG which the browser then parses and renders. But now there is a javascript library (http://code.google.com/p/canviz/) that renders the dot directly on the canvas. Great separation of client and server and much more efficient data transfer (JSON is much more compact than XML) and easier event handling for animation. That would leave illustration for SVG but why even that? Any application that can generate the XML for SVG can just as well generate the javascript for the canvas.
posted at 09:44 pm on January 26, 2010 by Charlie Clark
6 SVG and Canvas are complementary
Charlie, it’s not really either/or with SVG and Canvas. The two technologies are complementary rather than competitive.
If I were doing a frame based animation, I’d be more likely to use Canvas, which is an in-memory graphic. However, for site design, I’d rather stay with SVG, which works whether JavaScript is turned off in the browser or not. We can also do things like copy graphics from online sites, like the ones I mention in the second article, and modify and re-use for our needs using graphics tools, such as Illustrator and Inkscape. You really can’t do anything like that with Canvas.
Both tools have their uses. I’ve used both, and cover both when I write on web graphics. I’m glad they both have a home in HTML5, and hopefully someday, IE.
posted at 01:57 am on January 27, 2010 by Shelley Powers
7 Hmmm
Every time we work around IE’s shortcomings, we allow Microsoft the wiggle room to not fix those shortcomings. (because everytime we pander to IE’s failings, Microsoft doesn’t hear complaints from people about their poor browsing experience)
And to list “major browsers” omitting the only one with >50% market share is … beyond misleading. It makes you look stupid.
Use the wonderful modern features, and have a fallback for IE that just doesn’t look as good. Thats the only way pressure is brought to bear on MS to raise their game; when it becomes widely known that the best browsing experience is ‘anything but IE’ – thats when MS will wake up and play the standards game.
posted at 08:28 am on January 27, 2010 by Monkian
8 Web vectors
By the nature of SVG’s, i’m urged to use them for clients’ web design. It’s scalable, lightweight, everything you need. But somehow as always, IE manages to ruin anything beautiful that ever existed… :(
I’m just hoping vectors get more support in the future so i wouldn’t have to become best pals with photoshop again. He’s a betrayer :P
Nice article overall
Tasarim
posted at 05:18 am on February 2, 2010 by Dena
9 Accessibility Optional?
Firstly let me say that this is a great article and very informative.
I’d like to look at a slightly tangential discussion though, you make the statement : “creating a challenge for sites that use SVG where accessibility is a requirement”. I can’t imagine a site where accessibility isn’t a requirement, can you clarify what you mean?
posted at 06:24 am on February 21, 2010 by Duffers
10 SVG is supported in IE(
Just a quick note to say that Microsoft has confirmed today, with the alpha preview of IE9, support for SVG. Not only SVG, but CSS3, HTML5 new elements, as well as parsing XHTML as application/xhtml+xml.
posted at 06:33 pm on March 16, 2010 by Shelley Powers
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)




1 "The major browsers support SVG"
As much as I dislike IE, this intentionally misleading section grates. You can’t list Chrome and Opera as a ‘major browser’ and not IE, and then a few paragraphs down the say ‘there is one one exception…” I find that approach dishonest, you should say it straight up.
I enjoyed the next, hands on article more.
posted at 09:40 am on January 26, 2010 by fritz from london