SVG images not loading on Chrome (sometimes)

Question

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

Example of one of the SVG's

Attempts

1. I have attemted turning src into xlink:href and this stopped the images from loading at all

2. I 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?

Answer 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.

Answer 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