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.
Copy & paste the code below to embed this comment.
oelmekki
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.
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 ;)
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 ;-)
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.
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.
Copy & paste the code below to embed this comment.
Monkian
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.
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
Copy & paste the code below to embed this comment.
Duffers
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?
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.
I usually design for Mobile and smart devices. as different mobile devices have different screen sizes, using adaptability felt like a good option. I created an adaptive layout, with the fonts and everything sizing with the screen size through css and some neat jquery. When i had to have some icons, i thought of using SVG and they turned out beautifully. Scaling with the page width etc.
I was rudely interrupted with my design dream, when i found out on previewing that the svgs were NOTWORKING on andriod. and now im stuck. I guess andriod just decided not to support svg for some reason. Its working find on all IOS devices though.
The only version of andriod that did support was the ice cream sandwich but thats no good as a lot of users are still using older versions and not having andriod support means i have to think of another way to do this without SVG. any ideas ?
12 Reader Comments
Back to the Articlefritz from london
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.
oelmekki
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.
fiveminuteargument
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 ;)
Shelley Powers
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 ;-)
Charlie Clark
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.
Shelley Powers
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.
Monkian
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.
Dena
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
Duffers
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?
Shelley Powers
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.
Shelley Powers
Sorry, typo: that’s IE9, not IE(
shanehussainnaqvi
I usually design for Mobile and smart devices. as different mobile devices have different screen sizes, using adaptability felt like a good option. I created an adaptive layout, with the fonts and everything sizing with the screen size through css and some neat jquery. When i had to have some icons, i thought of using SVG and they turned out beautifully. Scaling with the page width etc.
I was rudely interrupted with my design dream, when i found out on previewing that the svgs were NOT WORKING on andriod. and now im stuck. I guess andriod just decided not to support svg for some reason. Its working find on all IOS devices though.
The only version of andriod that did support was the ice cream sandwich but thats no good as a lot of users are still using older versions and not having andriod support means i have to think of another way to do this without SVG. any ideas ?