Images in SVG Image tags not showing up in Chrome, but displays locally?

Asked 17/12, 2016 at 5:30 Answered 16/11, 2023 at 10:53

For some reason, Chrome is displaying the SVG without the images in its Image tags.

Here is a sample from my SVG:

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

blocker.png is a local file, but I also tried uploading it to imgur, but that didn't work either.

Here is the svg tag:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Here is what it looks like locally:

https://i.sstatic.net/Ga7je.png

Here is what it looks like on a live webpage:

https://i.sstatic.net/aeNmt.png

As you can see, the two players are missing. This doesn't happen when I upload the SVG online, but when I try to link that URL to my page, the same thing happens

Not sure if it's relevant, but here is the HTML code for the page:

<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title> 
<style>
img{
    width: 100%;
    height:auto;
    max-width: 800px;
}
</style>
</head>

<body>

<div>
    <img src="svg.svg"/>
</div>

</body>
</html>

Executant answered 17/12, 2016 at 5:30 Comment(2)

Did you make sure to change the path of the <image> tag to reflect the changes? I.e. change blocker.png to http://imgur.com/you/ABCDEF or whatever else the link is – Autostrada 17/12, 2016 at 5:46

@Autostrada Yes, I made sure I did. I loaded it up locally, it showed up. Loaded on my webpage, it did not. – Executant 17/12, 2016 at 5:51

PaulLeBeau's answer is right. But another solution is to use an embed tag instead of an img tag for the picture.

<embed src="svg.svg">

Here are some ways to embed svg images in HTML.

Alcinia answered 17/12, 2016 at 6:15 Comment(2)

Wow! What a sleek answer! How did you find out this embed tag? – Ivie 20/10, 2020 at 18:33

Warning: This solution caused my page to load forever. My cpu on local machine clocked to %100! – Mercado 7/2, 2022 at 15:8

Another solution that worked for me is, open SVG image in any editor (Vs code or Notepad++) and replace

xlink:href="data:img/png;base64,

xlink:href="data:image/png;base64,

img to image.

Hope this helps if someone is still looking for it.

Whitman answered 29/6, 2020 at 15:28 Comment(3)

This worked well for me. Thank you. To speed it up if you have a lot of svg files: sed -i '' -e 's/data:img/data:image/g' *.svg – Loire 3/9, 2020 at 16:54

it looks like your examples are incomplete, you have left an open quote tag in your xlink:href, could you elaborate how this would look with a local image? I'm attempting with xlink:href="data:image/jpg;base64,/path/to/jpeg.jpg" and doesn't seem to function how I'd expect it to. – Trona 7/12, 2022 at 17:4

@Trona the example was provided to replace img with image text only, rest will be the same. – Whitman 9/12, 2022 at 7:54

When you load an SVG into a webpage using an <img> element, the SVG has to be self-contained. It cannot link to third part resources like you are doing by linking to the PNG files. This a privacy restriction imposed by the browser.

Possible solutions are:

Convert your PNG to Data URI format and include them in your SVG that way.
Convert your blocker PNG(s) to actual SVG elements, such as a <path>.

Margarita answered 17/12, 2016 at 5:49 Comment(3)

If that were true, it wouldn't work either when I upload it to online image hosting websites, which it did. – Executant 17/12, 2016 at 5:53

Viewing the SVG in your browser (ie. the .svg file) is fine, because you are not loading it via an <img>. The same applies if your image hosting site hosts and serves the .svg file directly rather than embedding it via an <img>. – Margarita 17/12, 2016 at 5:57

Why this is needed? – Zeidman 13/2, 2023 at 15:40

I happened to find out that Chrome [v 58.0.3029.81 (64-bit)] doesn't show the image inside svg if the image file is not located at html root directory. The .svg and the embedded .png files were placed in /images -folder, the .svg content came up right in Chrome, but not the embedded .png. When the .png was copied to (../) the html root, Chrome works.

However, Firefox [v 52.0.2 (32-bit)] seems to work fine when .svg and .png are in the same /images folder.

Edit: Actually in my case I load the svg with d3.xml(..) method for getting js handle to the actual svg elements.

Quintus answered 20/4, 2017 at 17:42 Comment(0)

Add this to the .htaccess file in the root:

AddType image/svg+xml .svg .svgz

This is what I had in the Headers >> Network >> Content-Type. Should be 'image/svg+xml' not 'txt/plain....'

By adding the above code, my SVGs rendered within img tags.

Ackley answered 20/1, 2022 at 9:4 Comment(0)

-2

we should add the one namespace identifier in the src tag in img.src file

xmlns="http://www.w3.org/2000/svg" add this to the src tag as attribute in the img.svg file.

Ameliaamelie answered 16/11, 2023 at 10:53 Comment(0)

Recommended topics

Hot tags