title: Not able to render SVG image in Safari
body: <p>As the title states, I have a svg image, but I am not able to render it in safari, and opera. But it works perfectly fine in Firefox. I found this post </p>
  
  <p><a href="https://stackoverflow.com/questions/6117380/doctype-problem-displaying-svg-with-safari">Doctype problem displaying SVG with Safari</a></p>
  
  <p>which has mentioned to change the content to xhtml. So, I added this on the top of my html page, </p>
  
  <pre><code>&lt;meta http-equiv="Content-Type" content="application/xhtml+xml"&gt;
  </code></pre>
  
  <p>But still it doesn't work.</p>
  
  <p>I am embedding the svg image in my JS file like this</p>
  
  <pre><code>this.my_object.innerHTML = '&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;&lt;image xlink:href="img/gauge.png" width="122" height="127"/&gt;&lt;g id="needle" transform="rotate(0,62,62)"&gt;&lt;circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/&gt;&lt;rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/&gt;&lt;polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/&gt;&lt;/g&gt;&lt;text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"&gt;&lt;/text&gt;&lt;/svg&gt;';
  </code></pre>
  
  <p>Can this be the reason? I am not calling it by conventional mechanism.</p>
  
  <p>I am also pasting the svg code here, </p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;g name="gauge" width="122px" height="127px"&gt;
          &lt;image xlink:href="gauging.png" width="122" height="127"/&gt;
      &lt;circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none"&gt;
          &lt;animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
          values="none;#f88;#f00;#f88;none;" repeatCount="0"/&gt;
      &lt;/circle&gt;
          &lt;g id="needle" transform="rotate(0,62,62)"&gt;
              &lt;circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/&gt;
              &lt;rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/&gt;
              &lt;polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/&gt;
          &lt;/g&gt;
          &lt;text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"&gt;&lt;/text&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Can anyone suggest the problem?</p>