title: inline svg in html - how to degrade gracefully?
body: <p>See the code below - I am trying to include inline svg in my website. I am following <a href="http://shepherdinteractive.com/about-us/blog/2008/12/inline-svg-fallback/">a neat suggestion</a> to use the svg switch element so that it degrades gracefully on older browsers. The idea is that browsers which support svg use the first element in the switch block; those which don't ignore all the svg tags and just show the img buried in the second element (i.e. the foreignobject tag) of the switch block.</p>
  
  <p>It works really well ... except that my svg (which is sheet music) necessarily includes text elements and they get rendered (as well as the foreignobject) by older browsers.</p>
  
  <p>Ironically it is easy to deal with this in IE8 and below using conditional comments.</p>
  
  <p>For other older browsers I have a javascript work-around inside the foreignobject which redefines the class of the svg text. It works ... but it feels like a real hack.</p>
  
  <p>Is there a better way to do this (better javascript, a css solution, another way of doing the svg text ...)?</p>
  
  <p>Anyway here is the bare bones of the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;!-- this deals with elements using the svgtext class in old IE browsers --&gt;
  &lt;!--[if lte IE 8]&gt;
  &lt;style type="text/css"&gt;
  .svgtext { display: none; }
  &lt;/style&gt;
  &lt;![endif]--&gt;
  &lt;style type="text/css"&gt;
  .donotdisplay { display: none; }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;svg ...&gt;
  &lt;switch&gt;
  &lt;g&gt;
  &lt;!-- the svg goes here --&gt;
  &lt;text class="svgtext"&gt;this gets rendered unless I deal with it&lt;/text&gt;
  &lt;/g&gt;
  &lt;foreignObject ...&gt;
  &lt;script type="text/javascript"&gt;
  window.onload=function(){
    var inputs=document.getElementsByTagName('text');
    for(i=0;i&lt;inputs.length;i++){
      inputs[i].className='donotdisplay';
    }
  }
  &lt;/script&gt;
  &lt;!-- the replacement img tag goes here --&gt;
  &lt;/foreignObject&gt;
  &lt;/switch&gt;
  &lt;/svg&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>