The exploration here is if the current status of Inline SVG.

Currently in the url bar add /indexhist to the url as this will render the page as with the XHTML mime type not the HTML mime type. No you don't have to type it, just click here.

Don't bother if you are browsing with IE. Microsoft has zero ability to deal with XHTML.

As we include svg in XHTML the first consideration is what will happen with just an object tag.

Raw svg inside an object

Chart in Object Tag

This appears to work in xhtml as it does in html

<object type="image/svg+xml"
        style="float:left"
        data="/chart/barchart?symbol=ORCL"
        height="300" width="50%"/>

<div id="putSvgDomHere" />
<script type="text/javascript"> /*<![CDATA[ */
  svgObject = document.createElement('object');
  svgObject.setAttribute('type', 'image/svg+xml');
  svgObject.setAttribute('height', '300');
  svgObject.setAttribute('width', '400');
  svgObject.setAttribute('data','/chart/candlechart?symbol=BMY&days=90');
  //document.getElementById('putSvgDomHere').appendChild(svgObject);
  $('putSvgDomHere').appendChild(svgObject);
 /* ]]>*/
</script>

<script type="text/javascript"> /*<![CDATA[ */
  svgReq = new XMLHttpRequest();
  svgReq.onreadystatechange=function() {
    if (svgReq.readyState==4) {
      if (svgReq.status==200){
        svg = svgReq.responseXML.documentElement;
        $('putSvgDomHere').appendChild(svg);
      }
      else alert("Status is "+svgReq.status)
    }
  }
  svgReq.open('GET','/chart/barchart?symbol=IBM');
  svgReq.send(null);
 /* ]]>*/
</script>

Char as Inline SVG

Interestingly, browsers appear to have some difficulties with text included this way.

Opera

Gets things right! Yey Opera

Firefox

Firefox ver 2.x appears to render text with a 'stroke' but does not appear to 'fill'. It looks like this is fixed in current Firefox 3beta versions but the fonts look grainy there. If you don't explicitly put in the 'stroke' attribute the text disappears

Safari

I've only checked this in osx but support is improving. Of course you need the v3.0 or better to get svg included. 3.1 gets the fonts right.

InternetExplorer

A bad browser on so many fronts.

will not display svg unless you install a plugin
will not respect xhtml at all. Needs the server to send xthml as html and some other hacks.
requires special rendering (see hacks)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="100" width="100">
<path d="M43,90 c-88,-16 -21,-86 41,-51 l9,-6 v17 h-26 l8,-5 c-55,-25 -86,29   -32,36 z" fill="#ccc"/>
<path d="M43,90 v-75 l14,-9 v75 z" fill="#f60"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="30" width="30">
<path d="M43,90 c-88,-16 -21,-86 41,-51 l9,-6 v17 h-26 l8,-5 c-55,-25 -86,29   -32,36 z" fill="#ccc"/>
<path d="M43,90 v-75 l14,-9 v75 z" fill="#f60"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <circle cx="150" cy="100" r="50" />
</svg>

Highlighting

Get code-block directives working in resturctured text

Make sure that the N3 stuff comes along for the ride

#it it working
is = True
print is

Return to the FrontPage | Edit SVGandXHTML | Title List