SVG in background-image

Warning This article was written over six months ago, and may contain outdated information.

Update: There’s a more practical look at this subject in a later post, Using SVG in background-image.

If adopted widely, the use of SVG in <img /> and background-image could be responsible for some big changes in website design.

Take a look at this example of images in SVG (you’ll need an SVG-capable browser), which displays four photos at random positions and sizes on the page. Images could be pulled at random from Flickr (or wherever) and rotated, resized, and placed in the page as a background. Combined with multiple images, you could create layers of effect, almost like collages… pretty revolutionary.

div { background-image:
url('layer1.svg') left top,
url('layer2.svg') left top,
url('layer3.svg') left top;
}

It looks like Opera will be first to implement this feature with their 9.5 release, previews of which should be available soon. No definitive word on whether they’ll implement multiple backgrounds, but I’m hopeful.

7 comments on
“SVG in background-image”

  1. Then again, with server-side scripting this is also possible.

    Stijn [July 30th, 2007, 23:31]

  2. This is really cool, I bet SVG will eat the expensive Flash! :D

    Kaiman [August 20th, 2007, 18:59]

  3. The prospect of using SVG as background images is really exciting and something I have been looking forward too. It will require a different method of design though – i.e. no photoshop.

    Mutiny Design [August 24th, 2007, 10:10]

  4. Depends on what you’re using it for; for some images, Photoshop (or similar) will be fine. But for logos, buttons, icons, etc, Illustrator (or similar) will be better.

    Personally, I use Inkscape; its SVG support is pretty fantastic.

    Peter [August 24th, 2007, 10:25]

  5. Looks like fun!

    FMN Media [July 29th, 2008, 14:34]

  6. This is really cool and great, will be seen more in the coming days. As will be used instead of flash for sure.

    Creativ Era's [August 5th, 2008, 08:55]

  7. I now love SVGs.

    Jai Leeworthy [October 3rd, 2008, 07:12]