Is it possible to add SVG images to a web page through CSS?

Question

I just started experimenting with SVG in web pages, and I discovered that it is only possible to add SVG images into HTML using <object /> tags, not <img /> like I would have expected. Most of the time, I add graphics to web pages through CSS because they are part of the presentation of the site, not the content.

I know it is possible to apply CSS to SVG, but is it possible to add a vector image to an HTML element using purely CSS?

Answer 1

SVG is supported in <img> and in CSS (list-image, background-image, content) since Opera 9. Opera 10 is better still. Webkit/Safari supports svg in <img> too.

Some examples here, a couple more at dev.opera.com and annevankesteren.nl

If you're looking for inline svg examples, have a look at Sam Ruby's site.

Answer 2

You can try to reference an SVG file with the content property, but I don't think it's supported. If it was supported it would look like this:

.putapicturehere:before {
  content: url(mysvgfile.svg);
}

This definitely won't work in IE - it might work in the newest Firefox.

I always reference quirksmode.org for css browser support questions.