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.
Now here's the "onload" attribute. This is Javascript that is executed (once) when the iframe is first created. I've named the frame ("myIFrame"), so now we can find it:
var idoc = window.frames['myIFrame'].document;
var ihtml = idoc.getElementsByTagName('html')[0];
ihtml.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
var ibody = idoc.getElementsByTagName('body')[0];
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.
Nice, thanks.
ReplyDeleteI'll add this to the SVG resource http://svg.startpagina.nl
I've been wondering how to do this--since I've built some nice graphs in SVG that deserve to be viewed as vector graphics rather than rasterized to something less "lovely"...thanks for the help!
ReplyDeleteuvdiv, I'm trying to make this work for an SVG image that I recently generated:
ReplyDeletehttp://www.energyfromthorium.com/svg/lwrfuel.svg
Could you email me (alpha-sierra-whiskey-3-2-1 at gmail dot com) and help me figure out what I'm doing wrong?
SVG Web makes it possible to embed SVG into normal text/html (i.e. non-XHTML). It also helps IE to display SVG as well. It's in alpha but it would be interesting to see if it suits your needs: http://code.google.com/p/svgweb
ReplyDeleteI've just created a tool converting a simple SVG drawing to XHTML Canvas. No need to upload your SVG somewhere and no need to upload your image: See this post http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html
ReplyDelete