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?
You might need to make a little CSS-helper JavaScript to read the image out of an offscreen img and put it into your object tag. That way you can still control with CSS.
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.
Last time I tried, almost a year ago, it didn't work. You can, however, already mix svg and xhtml markup. Only problem there is that the page has to have correct mime type (application-xml or something like that) or browsers will ignore the svg.
Inline svg is not a perfect solution if you want strict separation of content and presentation, but is seemed to be the most supported way of using svg.
As far as I know, Opera 9 and WebKit (== Safari & Chrome) do it on PCs, and rumour has it, that FF3.5 will also be able.
Actually, since Apple added SVG support to iPhone's Safari just half a year ago, I'm not sure, if it works, but it's worth a try.
Cheers,
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.