Chrome not rendering SVG referenced via

Question

I am having issues with google chrome not rendering svg with an img tag. This happens when refreshing the page and initial page load. I can get the image to show up by \"

Answer 1

A simple and easy way; according to https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ You have to open the .SVG file with a text editor (like notepad) and change

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

to:

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

it worked for me!

Answer 2

.svg image does not have it's initial height and width. Therefore it is not visible. You have to set it.

You can do either in-line or in css file:

In-line:

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

Css file:

<img src="../images/Aged-Brass.svg" class="image" alt="logo">

.image {
    width: 100px;
    height: 50px;
}

Answer 3

Content type in the HTTP header from the server was the problem for me. I have a node.js server, added:

if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}

pageName is my local variable for what is requested.

My guess is this is a common problem! Am using the current version of Chrome (Mar 2020).

Answer 4

I make sure that I add the Style of the Image. It worked for me

style= "width:320; height:240"

Answer 5

I also got the same issue with chrome, after adding DOCTYPE it works as expected

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Before

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

After

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

Answer 6

I came here because I had a similar problem, the image was not being rendered. What I found out was that the content type header of my testing server wasn't correct. I fixed it by adding the following to my .htaccess file:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz