There are two common methods for adding SVG to a page - inline, via <svg>, and externally, via <object>.
The <object> element is bad. It's not semantic - it may as well be called <other> or <miscellaneous>. Although useful in the short term for displaying SVG, I would hope that this use will diminish.
The inline <svg> element is also bad, for the same reason - it's not semantic. It's the equivalent of having a <jpg> element, rather than using <img> - it's named after the format, rather than the purpose.
From the semantic perspective, there are three potential uses of SVG.
- Foreground images: use <img src="x.svg"> to point to an SVG file
- Background images: use CSS "background-image" to point to an SVG file
- Inline with connected DOM: use <iframe> to point to an SVG file.
These are much better because they re-use existing semantic elements.
The other advantage of <img> and CSS background-image over <svg> is that you don't need to use XHTML. Standard HTML gets round a whole series of issues with mime types, browser control, and backwards compatibility.
Advantages of SVG as image format
SVG images fill a lot of gaps with HTML styling:
- rounded rectangles, circles, and any polygon
- fancy borders (arcs, swirls, etc)
- opacity, color gradients and filters
- shape hyperlinks and :hover, rather than pixel maps
- interaction via the DOM (for foreground images)
- scaling of background images multiple backgrounds (in one SVG)
- background text (e.g. graffitti, murals, etc)
- intricate website 'themes' to each page
The possibilities for graphical designers are huge.
I'm very pleased to see that the next version of Opera will support SVG images via <img> and background-image. Unfortunately, it's not on the schedule for either Firefox 3 or Safari 3, although it's an aspiration for both teams.
There are four possible methods of using SVG in a webpage - <svg>, <object>, <img>, and CSS backgrounds.
The SVG implementation status for Firefox and Safari is marked at around 55%. Personally, while they only support two of these four methods, I'd hold them at half this - 22%.