Three and a half ways to use SVG in a blogger post
There are three ways to include SVG in your blog.
1. You can link to an SVG object by using the Blogger HTML editor to point to SVG hosted somewhere else. For example:


You end up with:

Note, that blogger doesn't like the embed tag which is what Adobe generally recommends using. With the embed tag, blogger complains that there is an open tag. This is because blogger uses XHTML 1.0 Transitional by default and the embed tag is not kosher because it doesn't close properly. It may be possible to change the Blogger template to something that tolerates the embed tag like HTML 4, but I don't know if blogger permits anything except XHTML 1.0 transitional so you'll probably have to use the object tag. Keep in mind that the image will display in the Adobe SVG Viewer, but not in Opera because it is not an SVG Tiny document. If you are an Opera user, hang in there, I'll get to you in a momment.

There's a good tutorial about how to embed QuickTime movies which may be helpful since they also use object tags.
Now above you should have seen this svg like you do on this page. If you didn't, try downloading the Adobe SVG Viewer.

Keep in mind that you can host your blog on your own server. See How do I setup an FTP (or sFTP) connection to my external web host? for details about how to do this. Why? In some cases, the Adobe Viewer is purposefully limited in what it can do in the sense that data can't be exchanged between servers from different domains. I don't believe some of the other SVG viewers and SVG enabled browsers have the same problem that Adobe does with cross domain linking, but I have not tried them.

2. Using the HTML editor, include JavaScript that will emit the SVG. [I'll add an example of this when I get a chance.] The main thing this provides is the ability to keep the SVG on the blogger server, rather than linking somewhere else. This probably also gets you around the security problems mentioned above.

3. Using the HTML editor, include the SVG inline with the HTML. This won't work with the Adobe SVG Viewer either, but it will work with some others like Firefox' Deerpark.

The Adobe Viewer is no longer the only alternative out there. You can view SVG that is SVG Tiny 1.1 compliant using Opera 8. No plug-ins required.


For some reason, the Adobe SVG Viewer does not like it when you include the type="image/svg+xml" attribute to the object tag. I believe this is a failure to follow the relevant specifications. In any case, for now just set make sure to set mime type on the server where the SVG will reside and I think everything will work just fine.

4. In theory, you can also use SVG content embedded inline as a fragment within a parent XML document. In this case, your blogger entry, which is an XHTML document. For example:



The only problem with this is that I'm not sure if anything but the Adobe Viewer can render this type of embeded namespace. For more information about including namespaces, check out this paper. Note, also will require modification to the blogger template, and I'm not sure if it will break anything on the blogger end.

While I haven't gotten inline name spaces working yet, here's another way to include svg. The following iframe links to an HTML document which has an SVG inlined namespace.

While the SVG displays, the downside with this approach is the SVG isn't fully interactive&emdash;you can't search text, zoom in, etc.
- posted by Michael @ Sunday, August 14, 2005