CODEWITHSUNDEEP
htmlcssimagegoogle-chromesvg
Kieranmv95
Kieranmv95

Reputation: 828

SVG images not loading on Chrome (sometimes)

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?

Upvotes: 9

Views: 24777

Answers (2)

MomasVII
MomasVII

Reputation: 5061

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

Upvotes: 4

Marco Aur&#233;lio Deleu
Marco Aur&#233;lio Deleu

Reputation: 4367

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.

Upvotes: 12

Related Questions