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

For me setting width / height to the img worked. <asp:Image runat="server" ID="Icon" Style="max-width: 50px; max-height: 50px; position: relative;" />

Answer 2

I exported my svg from Photoshop CC initially and had to manually add

version="1.1" into the <svg> tag

to get it showing on chrome.

Answer 3

i came here because i had the same problem, when i inspect the element i can see the file, but on the site i can't (even when using localhost)

the answer to my problem was in saving the SVG file. If you saved it from illustrator make sure to click 'embed' and not 'link'. as link will just refer to your local files rather than include the data (If i understand it correctly).

I read about it on the adobe website which has some other useful tips for exporting http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

This worked for me, hope it was useful.

Answer 4

In my case this problem persisted when I created and saved the svg using Photoshop. What helped, was opening the file using Illustrator and exporting the svg afterwards.

Answer 5

Be careful that you don't have transition css property for you svg images

I don't now why, but if you make: "transition: all ease 0.3s" for svg image on Chrome the images do not appear

e.g:

* {
   transition: all ease 0.3s
  }

Chrome do not render svg.

Remove any transition css property and try again

Answer 6

On problems try to open the images first with a program that is capable to read svg-images.
If that fails, then the svg-image is somehow corrupted.

I had that case and copied the svg-paths in a new svg-image and adjusted all details of the svg-tags.

I never tested the reason that it was not rendering but suppose that some invisible special signs caused the render-error. Getting sometimes files edited on Mac I had this issue in other context already.