Now that Firefox 1.5 is out with support for SVG (Scalable Vector Graphics) included by default, and the same coming for Safari, perhaps some of us might want to actually use SVG for something.
Of course, Firefox 1.5 still represents a small minority of web users. Unless your application is somehow limited to this small slice of internet users, you can’t really use SVG in-line unless you can have a safe fall-back for browsers that don’t (yet) support SVG.
It turns out this is relatively easy to do. It turns out the <object> tag can help us out.
The Code
The object tag is like a more generic version of the img tag. Rather than include images, it can include all kinds of objects (hence the name). You may have seen it in use to include Flash or Audio/Video content into a web page.
For a simple test case, let’s imagine we want to include an SVG image on a page. However, for browsers that don’t support SVG inline and don’t have an SVG plug-in installed, we want to show them a simple PNG image instead.
The XHTML code is simple:
<object data="image-svg.svg" type="image/svg+xml" height="48" width="48"> <img src="image-png.png" height="48" width="48" alt="this is a PNG" /> </object>
The object tells the browser that it’s including an SVG object (type=”image/svg+xml”) and points to the SVG file (data=”image-svg.svg”).
Contents of the object tag are used as alternate content if the object cannot be displayed. Think of what lives inside of the opening and closing object tags like “alt” text on an img tag. However, rather than a simple text alternative, we can include more XHTML.
In this case, we’re including the familiar img and displaying a normal PNG image.
Browser Support (and the lack thereof)
This technique seems to be relatively well supported in the more popular web browsers. The browsers that support SVG (only Firefox 1.5, or other browsers with the Adobe SVG Viewer plug-in installed, so far), and other browsers degrade nicely and show the alternative content (a PNG in our test case). The only unfortunate display side-effect is that Firefox 1.0.x displays an addition plug-in notice at the top of the page (screenshot). This table shows the support in various browsers:
| Firefox 1.0.x | Displays PNG and Plug-In Notice (screenshot) |
| Firefox 1.5 | Displays SVG |
| Safari | Displays PNG |
| Internet Explorer | Displays PNG |
Why Would I Want To Do This?
A situation in which you might want to use SVG inline on a website is a bit difficult to imagine right now. The reason I looked into this was for a site where we want to display SVG graphics to show off that they are actually graphics created using SVG - not the most common or practical case. That said, we have to start somewhere.
I’m sure I’ve made some mistakes here. Feel free to post corrections or additions in the replies to this post.
Comments
Isaac Grant - January 4, 2006 11:46 am
Camino 1.0b2 supports SVG as well. Not sure about pre-1.0 releases and too lazy to download - but 1.0 will be out of beta shortly, so its all a bit moot.
Stefan Hayden - January 4, 2006 1:08 pm
I can't wait till the whole web runs on svg! Anyone want to guess how long that will take? 10? 20 years?
SXSW, which I'll be attending for the first time, doesn't even have a panel covering SVG.
Jeff Schiller - January 4, 2006 1:24 pm
SVG in web pages? I can think of a lot of good reason:
What about on-the-fly graphics generated from XML/XSLT? Web statistics packages like Mint already do this and I've seen some other sites/blogs that have hand-rolled solutions.
What about saving bandwidth (compressed SVG is typically smaller than rasters).
SVG can also be interactive, animated and dynamic, so think games, cartoons, slideshows, zoomable and scalable maps/diagrams/schematics, interactive and rich GUIs...
Regards,
Jeff
Alexei - January 4, 2006 5:11 pm
IE 6. Actually the page crashes my browser! Go figure. :)
LeoPetr - January 4, 2006 5:31 pm
Works nicely in Opera 8.51. The right-click menu lets me zoom in, zoom out, and return to original size.:)
Jim - January 5, 2006 12:18 am
Am I missing something? This isn't including SVG inline at all. This is referring to an external SVG image. To include SVG inline, you do something like:
...<br>
<div><br>
<svg:svg ...>...</svg:svg><br>
</div><br>
...
Steven Garrity - January 5, 2006 10:33 am
Jim: Good point - "in-line" might have been a bad choice of words. This article shows how to include SVG as you would a bitmap image. Including the SVG XML inline with the XHTML code is a whole other issue.
James - January 17, 2006 1:37 pm
I'm surprised that no one else has mentioned that Opera has support for SVG too.
Dave - January 26, 2006 11:38 pm
I seem to be able to view SVG on XP using Internet Explorer just fine with the free Adobe Plugin. This should get 99% of Web users up and running with SVG no problems. Have a look at the URL above to get the plugin.
nandakumaran - February 7, 2006 7:47 am
need help
how to open a new svg file in an existing file with Mozilla
forks - February 13, 2006 6:33 pm
Getting all kinds of weirdness with scrollbars if I try to "scale" the SVG to anything but it's "natural" size.
mdonoughe - February 14, 2006 5:03 pm
A nice picture of Safari rendering the SVG:
http://bot24.ig3.net/gallery/d/73-1/Picture+2_001.png
The current builds of WebKit from nightly.webkit.org will render the SVG just fine.
Matt - February 23, 2006 6:31 pm
Why svg in a webpage?
I am working on a corporate site right now. It would be nice to use the same svg in various places / sizes instead of using different sized jpegs or pngs.
As browsers improve, there is the possibility that an svg may render better (or more appropriately for a particular user) than a jpeg or png exported from Illustrator.
But not being able to use an svg directly in an img is a big downer. The MIME type is image/svg+xml, so it seems logical that browsers should support it in an img. From the document's standpoint, there is an unnecessary element. The stylesheet shouldn't care about the type, it should just have to style one thing. On the server side, content negotation should be able to take care of sending the right file to the browser.
Daniel Schierbeck - February 25, 2006 3:13 pm
Try not using fixed widths and heights (
@widthand@height) on the<object/>element. Maybe then Firefox will scale it better.Justin - June 20, 2006 5:49 am
Page crashes my browser too haha :P
Ms Stewart - June 26, 2006 11:57 pm
Have any of you used SVG in developing educational material. If so, how have you used the tool?
Tuggle - August 12, 2006 1:51 pm
Looking forward to the day when this can actually be deployed on a public app...