multiple backgrounds

It’s here! A working version of the SVG image replacement script.

Purpose

This script substitutes specified images and background images with SVG images for web browsers that support them. This makes it perfect for anyone who would like to start using SVG for their site design, but wants to make sure it will look okay for browsers that do not yet support it.

Features

Future-proof – Checks for actual support, no browser sniffing
Unobtrusive – Only affects browsers with support, uses fallback content without support or if javascript is disabled
Simple to use – Just include one javascript file to your pages and use the appropriate image names
Small file – Only 1.8 KB!

SVG Multiple Images and Rounded Corners

UPDATE March 17, 2009:

For an easy way to generate rounded corner SVG files, see my border-radius for all! post.

One of the geekier things that excite me (okay, I guess there’s a lot of those) are upcoming features in web browsers. Specifically when it comes to new and improved support for things like CSS3, Javascript and SVG.

The recently released Opera 9.5 alpha is known for it’s improved CSS support, but what excited me most was the ability to use an SVG file as a background image. Why is this great? It allows for all sorts of neat things. Small file scaling gradients, multiple raster images, even animation!

Sure, no other browser supports this yet, but I’m not going to let that ruin my fun in designing for the future. Besides, one could always use javascript to fix stuff for other browsers if really necessary.