Chrome not rendering SVG referenced via <img> element Chrome not rendering SVG referenced via <img> element google-chrome google-chrome

Chrome not rendering SVG referenced via <img> element


A simple and easy way; according to https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/You have to open the .SVG file with a text editor (like notepad) and change

xlink:href="data:img/png;base64,

to:

xlink:href="data:image/png;base64,

it worked for me!


The svg-tag needs the namespace attribute xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>


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).enter image description here

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

This worked for me, hope it was useful.