43

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.stack.imgur.com/Ga7je.png

Here is what it looks like on a live webpage:

https://i.stack.imgur.com/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>
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
    – Jhecht
    Dec 17, 2016 at 5:46
  • 1
    @Jhecht Yes, I made sure I did. I loaded it up locally, it showed up. Loaded on my webpage, it did not.
    – sgruggy
    Dec 17, 2016 at 5:51

6 Answers 6

77

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.

2
  • 4
    Wow! What a sleek answer! How did you find out this embed tag? Oct 20, 2020 at 18:33
  • 2
    Warning: This solution caused my page to load forever. My cpu on local machine clocked to %100!
    – salouri
    Feb 7, 2022 at 15:08
28

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,

to

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

img to image.

Hope this helps if someone is still looking for it.

3
  • 2
    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
    – almyz125
    Sep 3, 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.
    – Gloat
    Dec 7, 2022 at 17:04
  • @Gloat the example was provided to replace img with image text only, rest will be the same. Dec 9, 2022 at 7:54
21

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:

  1. Convert your PNG to Data URI format and include them in your SVG that way.

  2. Convert your blocker PNG(s) to actual SVG elements, such as a <path>.

3
  • 1
    If that were true, it wouldn't work either when I upload it to online image hosting websites, which it did.
    – sgruggy
    Dec 17, 2016 at 5:53
  • 4
    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>. Dec 17, 2016 at 5:57
  • Why this is needed? Feb 13, 2023 at 15:40
2

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.

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.

In the netword tab in dev tools, check that the Headers >> Content-Type is 'image/svg+xml'. The below shows my incorrect setup that did not display svg in img tags

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.