SVG images as CSS backgrounds

I’m a lucky lady. I’m sitting here on the couch while my new husband cooks dinner (my turn tomorrow) which gives me the time to play with some new technology that’s caught my eye: using SVG images in CSS.

Creating the SVG background

To try it out I decided to make me some tabs with rounded corners because they’re always a pain to do without creating heaps of extra markup and they never seem to go out of fashion.

SVG images are just text so you can create them in any text editor. There are also heaps of tools to that create SVG images. I thought Inkscape looked interesting.

My image is very simple, just two rectangles. One rectangle with rounded corners to make the top of the tab and one without to make the bottom:

I gave it a glassy looking gradient (colors of which I pinched from the buttons in Opera):

Complete example

Using it as a CSS background

Using an SVG image as a CSS background isn’t any different to using a png or jpg. The only difference is you might want to use the new CSS3 background-sizing css property to make it scale across the whole element:

Complete example

Here’s how it looks in Safari and Opera:

What’s neat about using SVG

It’s really neat being able to use a vector image in a webpage. It’s easy to make an image that looks great when you zoom in and can expand into a container of any width or height.

It’s easy to change the styling of the images because it’s all done through CSS. The SVG styling can live in the same CSS file as the rest of your webpage’s style. Different SVG images can share the same CSS file.

The SVG files are just text so you can generate them dynamically with a server side language.

It also means that the file tends to be pretty small. A bitmap image gets larger as the image gets bigger. A vector image like SVG only gets larger as it gets more complicated. You don’t get a lot of pixels for 200kb but you get a lot of SVG instructions. The file that I created was around 2kb.

It’s can be a nice solution for rounded corners and gradients (for things that are a bit too complicated for the CSS3 border-radius property). It doesn’t require multiple images, so you don’t need to worry about cutting the images up or the browser having to make a heap of requests.

Limitations

I was kind of hoping that I’d be able to put script in my SVG file so I could have some logic run when the image loaded. This works for SVG images included using the object tag but not for ones that are used as background images.

Browser support

In mid-2009 this technology is still pretty experimental.

IE – no SVG support without using a plugin.

Firefox – supports SVG images in the object tag, it doesn’t support using it in CSS yet.

Safari/Chrome – Safari 4.02 and Chrome 2.0 both support using SVG as CSS background images but I found the support a bit flaky. For example I had trouble when my SVG images had an external stylesheet or had the width and height of the SVG image set in percentages rather than absolute pixels. In both these cases the image just didn’t render as a background image but worked fine when included in the page through an object tag.

Opera – has supported SVG as CSS background images since 2007 and the version I have installed (9.63) didn’t have any problems with my simple example.