Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II

by Shelley Powers

22 Reader Comments

Back to the Article
  1. Otherwise . . . great articles!
    Copy & paste the code below to embed this comment.
  2. Hi Shelley, great article(s)! I did a little demo a while back on using SVG and background masks to create scalable graphics: http://www.alexandtheweb.com/2009/08/skinnable-icons-with-css3-gradients-and-background-masks/ :)
    Copy & paste the code below to embed this comment.
  3. Hey Shelley, cool article, but is that </span> supposed to be in the first code sample above? I totally love that people are using this, but with all the limitations still, I honestly don’t see myself diving in too deeply just yet… But thanks, I love to see new uses, and hope someday this will finally come of age…
    Atg
    Copy & paste the code below to embed this comment.
  4. I’ve heard a lot about SVG already, but never bothered to look at it in detail. Reading these articles got eager to learn more about SVG!
    Copy & paste the code below to embed this comment.
  5. I also can’t see anything but text in Firefox 3.6. Example 3, on the other hand, displays just fine.
    Copy & paste the code below to embed this comment.
  6. I just a novice on SVG.
    I would like to know if SVG can replace Flash as used in the web (other than video and audio—handled by HTML5 tags—).
    I suppose that JavaScript can handle dynamics.
    Is there any other way of doing animations than “hand coding”?
    Is there any application that let “non-programing artist” work easyly with SVG?
    Copy & paste the code below to embed this comment.
  7. Thanks for kind words, folks. The example 4 is a demonstration of using SVG in HTML via the HTML5 spec. The only browser that supports this currently is Firefox 3.6. And unfortunately, we’re now finding out Firefox 3.6 only seems to support it in the Mac. SVG-in-HTML5 support is enabled by default, and it is showing in my Mac Firefox 3.6, but just checked with an updated Windows version, and it isn’t. Well, isn’t this fun? Which just goes to show that SVG-in-HTML is still very new, very raw, and you might want to stick with either SVG-in-XHTML, or use the scripting libraries such as SVGWeb to incorporate in HTML. It will be a few years before we see widespread support for SVG in HTML. Aaron, yes, that object code is copied as is directly from Jeff’s site. The span would normally enclose fallback text. Imasanti, several applications support SVG, including Inkscape and Adobe Illustrator. I don’t think there’s a Flash-like equivalent for SVG, yet. I know folks were looking at creating one of these a year or so ago.
    Copy & paste the code below to embed this comment.
  8. Alexa, great article. Thanks for posting link.
    Copy & paste the code below to embed this comment.
  9. Example four doesn’t work for me either. Is Snow Leopard the problem perhaps? Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
    Copy & paste the code below to embed this comment.
  10. Alex, not Alexa!
    Copy & paste the code below to embed this comment.
  11. Folks, my apologies: I did not include in the article directions for enabling HTML5 in Firefox 3.6. I did this so long ago, that I forgot. You have to enable HTML5 support before the SVG will show. The only way to enable support for HTML5 is by typing the following into the location bar: about:config In the page that opens, after the warning, you then look for a property: html5.enable You need to set this to true. This is only for folks that are comfortable with this bleeding edge change. In the meantime, I have an XHTML version that you can all see at http://burningbird.net/svg/example4.html
    Copy & paste the code below to embed this comment.
  12. I think when HTML5 becomes the norm, we will see a lot more of SVG on the web. That is why I added a bunch of support for SVG in the 1.5 release of Firebug. It’s fun to tinker like that!
    Copy & paste the code below to embed this comment.
  13. I saw that in the release notes, Steve. I think it’s a terrific addition to an excellent development tool.
    Copy & paste the code below to embed this comment.
  14. Shelley already mentioned that she had forgotten she had flipped the html5.enable pref to true. Since I implemented the preference in Firefox, I thought I’d clarify a few of things:
    # Firefox 3.6, as shipped in its default configuration, does _not_ support SVG in text/html.
    # There is no Mac vs. other difference here. The hidden pref is cross-platform.
    # The pref does more than enables SVG in text/html. Flipping the pref replaces the entire HTML parser in Gecko with a snapshot of an HTML5 parser as of end of June 2009. If you use the old snapshot of the parser, you’ll be exposed to bugs that have been fixed since the end of June. Thus, if you want to be on the edge and use an HTML5 parser, it’s much better to do so with “trunk nightlies”:http://nightly.mozilla.org/ than with the 3.6 release.
    Copy & paste the code below to embed this comment.
  15. I was wondering about all that SVG stuff, had no idea about it.There is a lot to learn for me, this will be my starting point. Thank you for this great article!
    Copy & paste the code below to embed this comment.
  16. Embedding SVGs into websites is something that concerns me. It’s not because I don’t trust your word or not believe what you’re saying—I do. I just don’t feel comfortable using a filetype that takes so much work for such minor results. However, I’m going to keep this article in mind and look for a situation where I can use SVG images in the future. But it’s doubtful that it’ll be applicable to the type of sites I design. Either way, thank you for taking the time to write up this two-part article. Regards,
    Luke
    Copy & paste the code below to embed this comment.
  17. Hi Shelley! :-) Great article(s)! Few nits: bq. For example, Safari/Webkit does not currently render a transparent background for the object element. FWIW(For What It’s Worth), that’s “bug 10687”:https://bugs.webkit.org/show_bug.cgi?id=10687. If one’s interested, just CC to that issue, as the WebKit bug tracker doesn’t allow voting. ;-) Also, at first I didn’t understand the empty span element when embedding SVG within an object tag. That will be used as fallback content, so it is useful whenever SVG is *only* for decoration. When it’s used for functionality, then one *will* definitely want to display fallback content. :-) Details in a “related SVG Developers thread”:http://tech.groups.yahoo.com/group/svg-developers/message/60373… ;-)
    Copy & paste the code below to embed this comment.
  18. Just noticed the Textile interpreter has messed up my entry, changing up the “noses” (’-’ character) in my entry to a strikeout. This didn’t occur in the “suggested link”:http://textism.com/tools/textile/ on Textile…
    Copy & paste the code below to embed this comment.
  19. This is a really good article but it does little to counter the feeling that a lot of work is needed to achieve, well, not a lot actually.
    Copy & paste the code below to embed this comment.
  20. Hi Shelley, first off thanks for these articles. Nice read. As pointed out in the 2nd comment, the <span>-tag (with funny ending slash?) should be removed because as you can see, it’s confusing. ;) And some people might even copy and paste it as is. Another little mistake from the same paragraph: you tell readers to “set the src attribute to the SVG file”. This should be the “data attribute”, of course, as seen in the example you provide.
    Copy & paste the code below to embed this comment.
  21. Hi, I’m currently working on a project for a client and i’m using a resizable background image. I want the website to look fresh on every load so want two use the rotator.php for this. Anyone knows what is the best solution to make a website where background img height and with always is 100%, resizes when you scale the brower and renews the image on every load? Thanks, Janis Sevens
    Copy & paste the code below to embed this comment.
  22. would love to see web page and code examples of how svg can be positioned and scaled in place of gif and jpg graphics (not just backgrounds )and how to give the user zoom control of the graphic that could scale (top z index) over the rest of the page.
    thanks
    Copy & paste the code below to embed this comment.