Chrome not rendering SVG referenced via <img> element
google-chrome, svg
Solution
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!
Problem
I am having issues with google chrome not rendering svg with an `img` element. This happens when refreshing the page and initial page load. I can get the image to show up by "Inspecting Element" then right clicking the svg file and opening the svg file in a new tab. The svg image will then be rendered on the original page. ``` <img src="../images/Aged-Brass.svg"> ``` Totally at loss here as to what the issue is. The svg image renders fine in IE9 and FF just not in Chrome or Safari. I have my MIME types set as well. (image/svg+xml) EDIT: Here is a simple html page that I built to help illustrate my issue. ``` <!DOCTYPE html> <html> <head> <title>SVG Test</title> <style> #BackgroundImage{ background: url('../images/Aged-Brass.svg') no-repeat scroll left top; width: 400px; height: 600px; } #image_element { width: 400px; height: 600px; margin: 0px; padding: 0px; } </style> </head> <body> <div id="image_element"> <img src="../images/Aged-Brass.svg"> </div> <div id="BackgroundImage"></div> </body> </html> ``` As you can see I am trying to use an svg file in both an `img` element and in css as a background image. Neither work on the initial page load in chrome or safari. When I inspect element right click svg or click link to svg load in another window the svg file will render in original tab.