XML/XSL Portal

Multiple Stylesheet Aware
HideXML Documenting CodeHide
     
  
 
 

InlineSVG

I was kicking around ideas with DaveP about xhtml and he wanted to know if SVG could be embedded into HTML. The stock answer to this is no. Unless you mean by using the Adobe SVG Viewer and the EMBED tag.

This got me thinking though and I hacked around a bit and came up with this little demo. If you do a view source on the new window you will see that SVG is inlined within the HTML.

OK it's not perfect and there are a few provisos but at least it is a step in the right direction for when IE supports SVG natively.

All you need to do to make it happen is include a script tag in your HTML and it just works. iiiix

<script language="JavaScript" src="inlinesvg_3.js"></script>

If you want a demo of it in use with XML/XSLT to produce a bar-graph then check out the filtering tutorial.

V3 download.

V4 which should work with Adobe V3beta download.

V5 download.

V6 download.

The latest dummy.svg download. All versions require the dummy.svg file to be in the same folder. Although this has changed the latest should be backwards compatable.

Provisos

Your SVG nodes must have a namespace prefix i.e. <svg:svg <svg:g <svg:text.

The top level <svg:svg must have and id attribute.

 
 
  
     
Open

Delete

View XML
View XSL