A while back, I asked my readers about embedding SVG (vector) graphics in Blogger. I'm happy to report I've solved the problem myself. Here's the trick to do it, for anyone who is interested.
The problem, it seems, is that Blogger serves its documents with html mime types - which should be obsolete - and so no part of a document can ever contain an SVG element (which is not supported by plain html). The solution is to create a new document in an inline frame.
Here's the iframe:
<iframe type="text/xml" src="about:blank" name="myIFrame" ... onload="..." > </iframe>
If you are hosting an XML document elsewhere, you can simply point the 'src' attribute to that URI and you're done! But I will show how to create a new document, on the fly.
var idoc = window.frames['myIFrame'].document; var ihtml = idoc.getElementsByTagName('html'); ihtml.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); var ibody = idoc.getElementsByTagName('body');
And now, we have an XML document in which we can (dynamically) create an SVG object, and draw stuff in it:
var isvg = idoc.createElementNS('http://www.w3.org/2000/svg', 'svg'); isvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); isvg.setAttribute('version', '1.1'); ... ibody.appendChild(isvg); var ishape = idoc.createElementNS('http://www.w3.org/2000/svg', 'circle'); ishape.setAttribute('cx', 50); ... isvg.appendChild(ishape);
And that's all. The blue circle in this post is a proof of concept: you can find it in the source code (search for "myIFrame").
In related news, I've improved (I think) the blog's geometric layouts - the CSS. I've shrunk the width of the main text, and added sidebars on the right side (blogroll, links, archives browser). To keep large tables from being clipped off, I've changed the overflow: property to 'visible'. Let me know if there are any reading difficulties or missing objects. :)
(update) To clarify - if you are hosting a static SVG document somewhere and wish to include it in Blogger, try this template:
<div style="margin: 10px 10px 10px 10px"> <iframe type="text/xml" src="http://www.your-svg-document-uri.svg" width="500px" height="500px" style="border: none; overflow: hidden;"> This is an error message. If you are reading this, something broke. You may need to upgrade your browser. </iframe> </div>
The 'src' attribute is for the URI where your document is hosted. You should set the 'width' and 'height' attributes to the same values as your SVG object, otherwise your graphic will either take too much space, or have parts of it clipped off.