Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel