Chrome not rendering SVG referenced via

Question

I am having issues with google chrome not rendering svg with an img tag. This happens when refreshing the page and initial page load. I can get the image to show up by \"

Answer 1

I was able to use your sample to create a test page, and it worked just fine. My assumption is that there is something wrong with your svg file. Can you paste that here as well? Here is the sample I used.

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>

Answer 2

Had the same problem. If server is configured correctly and .htacces is not the answer, might want to look the svg source you are embedding. Mine were created with text editor, rendered well on Chrome&Safari inside html5 code, once embedded, nothing was visible. Added correct version, dimensions etc to the svg code and works like a charm. Also, all styles inline.

Ie

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>

Answer 3

Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>