Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I

by Shelley Powers

12 Reader Comments

Back to the Article
  1. 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.

    Copy & paste the code below to embed this comment.
  2. 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.

    Copy & paste the code below to embed this comment.
  3. 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 ;)

    Copy & paste the code below to embed this comment.
  4. 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 ;-)

    Copy & paste the code below to embed this comment.
  5. 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.

    Copy & paste the code below to embed this comment.
  6. 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.
  7. 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.

    Copy & paste the code below to embed this comment.
  8. 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

    Copy & paste the code below to embed this comment.
  9. 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?

    Copy & paste the code below to embed this comment.
  10. 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.

    Copy & paste the code below to embed this comment.
  11. Sorry, typo: that’s IE9, not IE(

    Copy & paste the code below to embed this comment.
  12. 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 ?

    Copy & paste the code below to embed this comment.