SVG images not loading on Chrome (sometimes)
Solution 1
When using SVG in Chrome, you need to make sure that your root tag has xmlns="http://www.w3.org/2000/svg"
Edit
I haven't been able to find the problem, but one alternative would be
<object data="yours.svg" type="image/svg+xml"></object>
this seems to do the trick for all browsers.
Solution 2
For what it's worth I had an image like this
<img src="public/image/circles/circle.svg" class="circle_img" />
If you open the svg in an editor I changed
xlink:href="data:img/png;base64
to xlink:href="data:image/png;base64
Kieranmv95
I am a Web Developer who is #SOreadytohelp. I have had brief past experience in web development and i am now trying to improve my web development skills. I did a programming course in college and then did an apprenticeship in programming. These both entailed some basic web development. I began to enjoy web development more than i did programming so decided to make the switch and self taught a lot of the pieces i didn't know. Now i am a junior web developer (still training as much as i can). Currently working on my first public WordPress theme! Still early days at the moment though! Check it out on github
Updated on June 19, 2022Comments
-
Kieranmv95 almost 2 years
Hi i have started converting a lot of my sites old image to SVG format and i cannot get them to display in the page.
The images do load if I open the image seperatly and then view the page after opening it. The SVG's are in the correct file path that I am referencing but nothing appears. Although on some refreshes it does appear.
<img class="padlock-img" src="content/img/cf/padlock.svg" alt=""> <img src="content/img/tips/progress.svg" alt=""> <img class="padlock-img" src="content/img/cf/padlock.svg" alt="">
Here are some of my examples
Attempts
I have attemted turning src into
xlink:href
and this stopped the images from loading at allI have tested this on 3 other browsers and the images load it is only happening on chrome on localhost and on file://
Any ideas on how to fix this?
-
Kieranmv95 over 8 yearsI have this tag on all my svg's anyway still doesnt wokr
-
Kieranmv95 over 8 yearsits in question now :)