133

I am having issues with google chrome not rendering svg with an img element. This happens when refreshing the page and initial page load. I can get the image to show up by "Inspecting Element" then right clicking the svg file and opening the svg file in a new tab. The svg image will then be rendered on the original page.

<img src="../images/Aged-Brass.svg">

Totally at loss here as to what the issue is. The svg image renders fine in IE9 and FF just not in Chrome or Safari.

I have my MIME types set as well. (image/svg+xml)

EDIT: Here is a simple html page that I built to help illustrate my issue.

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #image_element {
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="image_element">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

As you can see I am trying to use an svg file in both an img element and in css as a background image. Neither work on the initial page load in chrome or safari. When I inspect element right click svg or click link to svg load in another window the svg file will render in original tab.

4
  • 1
    Can you put up an example or post some example code here?
    – Sirko
    May 24, 2012 at 12:06
  • 1
    We really do need to be able to see and reproduce this ourselves if you want help.
    – Phrogz
    May 25, 2012 at 2:49
  • By any chance, did your "Aged-Brass.svg" contain an embedded image? I had the same problem, and that is what I traced it to ...
    – McGarnagle
    Feb 1, 2015 at 23:38
  • 1
    Chrome browser will not display svg image, if it doesn't have with attribute with value in svg source code. Edit your SVG source code and add width attribute with desired value. Jan 26, 2022 at 7:53

28 Answers 28

184

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!

3
  • my svg does not contain image tag at all. instead it is a group of <path>, gradients and line tag. how do i solve this issue Nov 28, 2021 at 22:52
  • 1
    According official documentation developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href, the xlink:href is deprecated. You should use href instead of xlink:href
    – kentuckyss
    Jul 30, 2022 at 9:52
  • Can you please elaborate on how this would look fully complete, I've seen twice now where people have shown this example and have open quotes. how would this tag look completed? xlink:href="data:image/png;base64,/path/to/image.png"?
    – Gloat
    Dec 7, 2022 at 17:14
71

The svg-tag needs the namespace attribute xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>
2
  • This. And I had to load it as a background-image of a div.
    – casey
    Apr 5, 2018 at 2:44
  • 1
    The svg still needs the namespace. Just make sure it's defined in the SVG file that you use as a background.
    – bang
    Apr 8, 2018 at 10:02
30

i came here because i had the same problem, when i inspect the element i can see the file, but on the site i can't (even when using localhost)

the answer to my problem was in saving the SVG file. If you saved it from illustrator make sure to click 'embed' and not 'link'. as link will just refer to your local files rather than include the data (If i understand it correctly). enter image description here

I read about it on the adobe website which has some other useful tips for exporting http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

This worked for me, hope it was useful.

4
  • 1
    Anyone know if there is a way to do this with a smart object in Photoshop? Opening up illustrator and re-exporting with this option in illustrator was the only thing that let me show svgs in chrome, after multiple attempts at other fixes. May 17, 2018 at 17:02
  • 5
    What effect does that option has on the actual SVG code? Dec 28, 2018 at 13:42
  • Seconding the comment from @JānisElmeris - this must have some effect on the SVG code itself for it to suddenly work.
    – bsplosion
    Nov 26, 2021 at 21:14
  • This will bloat the size of your SVG though Feb 24, 2022 at 12:34
30

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
3
  • 3
    Thanks. Setting Content-Type to image/svg+xml fixed it.
    – samir105
    Jan 17, 2020 at 6:11
  • Note that image/svg offers the file for downloading, it has to have +xml. May 5, 2020 at 9:18
  • In my case I was uploading the SVG to Amazon S3. Setting the content type to image/svg+xml fixed it for me. Thanks for getting me on the right track! Oct 27, 2021 at 13:59
15

Use <object> instead (of course, replace each URL with your own):

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}
<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>

0
14

I had a similar problem and the existing answers to this either weren't applicable, or worked but we couldn't use them for other reasons. So I had to figure out what Chrome disliked about our SVGs.

In our case in turned out to be that the id attribute of the symbol tag in the SVG file had a : in it, which Chrome didn't like. Soon as I removed the : it worked fine.

Bad:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

Good:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>
3
  • 2
    it was this! [quadrule upvote] Oct 20, 2021 at 20:33
  • 1
    Lifesaver. Any idea why this is? Nov 2, 2021 at 13:13
  • 1
    @kevindeleon I never knew why, but I just did some searching and found this SO answer that seems to get to the bottom of things: stackoverflow.com/a/69805130/1042398 Dec 16, 2021 at 16:22
11

Adding the width attribute to the [svg] tag (by editing the svg source XML) worked for me: eg:

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>
10

I had this problem when i exported images from figma. Check source code of svg, if you have colon : in ids like this: id="paint1_linear_23:318" it'll make you the problems with rendering in chrome.

Just remove all colons in ids.

Don't forget make the same with referring to this ids like this: fill="url(#paint1_linear_23:318)".

2
  • worked for me too! thank you so much!
    – nvipash
    Nov 5, 2021 at 17:53
  • life saver.. the colons in svg, cause chrome to not render svgs..
    – RRR
    Nov 10, 2021 at 6:48
7

.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;
}
0
6
Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
6

I had the same problem. This problem was solved when I checked the file type that was accepted and set in headers "Content-Type", "image/svg+xml":

response.setHeader("Content-Type", "image/svg+xml");
2
  • 2
    Where do you set this? Nov 2, 2021 at 9:36
  • For future readers: This is a server-side change, in this case probably some Java-based HTTP server. Dec 13, 2022 at 15:31
3

I was able to use your sample to create a test page, and it worked just fine. My assumption is that there is something wrong with your svg file. Can you paste that here as well? Here is the sample I used.

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>
3

looks like a Chrome bug, i did something else as i almost got crazy because of this... using Chrom debugger if you change the css of the svg object it shows on the screen.

so what i did was: 1. check for screen size 2. listen to the "load" event of my SVG object 3. when the element is loaded i change its css using jQuery 4. it did the trick for me

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}
width: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>

2

In my case this problem persisted when I created and saved the svg using Photoshop. What helped, was opening the file using Illustrator and exporting the svg afterwards.

2
  • What changed in the actual SVG code? I'm using neither Photoshop nor Illustrator, I need to fix an existing SVG file. Dec 28, 2018 at 13:49
  • In this case try @Sharif answer! Jan 17, 2020 at 13:18
1

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>
2
  • What is the difference between these two code snippets? I'm not seeing it.
    – rgilligan
    Jul 13, 2018 at 15:44
  • @rgilligan my bad, first one was supposed to without doctype Jul 14, 2018 at 9:17
1

I exported my svg from Photoshop CC initially and had to manually add

version="1.1" into the <svg> tag

to get it showing on chrome.

1

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

1

For me setting width / height to the img worked. <asp:Image runat="server" ID="Icon" Style="max-width: 50px; max-height: 50px; position: relative;" />

0
1

I tried most of the solutions above, but didn't worked for me. I used a svg sanitizr https://svg.enshrined.co.uk/ which worked.

1

I had a similar issue I think trying to set Sharepoint Icon to SVG and the file did not load properly (while Png did).

See thread: file-format-can-an-svg-file-be-used-as-a-site-icon-in-sharepoint-online

The reason for the issue is that the height and width flags are not set in the tag.

For instance, setting this works

I was able to fix the issue by:

  1. Open SVG in a text editor (e.g. Notepad)
  2. Include in the first SVG header code Width="80" Height="80" (perhaps can play with optimizing the size)
  3. Save file and upload. IT WORKS!

So the first tag of my SVG looks like this

<svg height="80" width="80" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.60458 114.60458">
2
  • Thanks. My svg had viewbox but was missing width and height.
    – maxorcist
    Jul 1, 2022 at 10:23
  • Note xmlns="http://www.w3.org/2000/svg" and viewBox="0 0 114.60458 114.60458" are the only two parts you actually need. The height and width is useful for preventing the SVG from being enormous by default though. id and data-name are not needed at all. Jul 16, 2022 at 5:58
0

Had the same problem. If server is configured correctly and .htacces is not the answer, might want to look the svg source you are embedding. Mine were created with text editor, rendered well on Chrome&Safari inside html5 code, once embedded, nothing was visible. Added correct version, dimensions etc to the svg code and works like a charm. Also, all styles inline.

Ie

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>
0

Be careful that you don't have transition css property for you svg images

I don't now why, but if you make: "transition: all ease 0.3s" for svg image on Chrome the images do not appear

e.g:

* {
   transition: all ease 0.3s
  }

Chrome do not render svg.

Remove any transition css property and try again

0

On problems try to open the images first with a program that is capable to read svg-images.
If that fails, then the svg-image is somehow corrupted.

I had that case and copied the svg-paths in a new svg-image and adjusted all details of the svg-tags.

I never tested the reason that it was not rendering but suppose that some invisible special signs caused the render-error. Getting sometimes files edited on Mac I had this issue in other context already.

0

I was having the same issue with an SVG image included via the IMG tag. It turned out for me that Chrome didn't like there being a blank line directly at the top of the file.

I removed the blank line and my SVG immediately started rendering.

0

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

style= "width:320; height:240"

0

In my case it was not loading svg due to image tag's id containing _ (underscore) in it so I removed that from

<image id="image0_1166:0000"> to <image id="image0"> and it worked. And don't forget to remove the same here 
<use xlink:href="#image0">
-1

Lighttpd

My problem was that was missing a mime handler for svg files in lighttpd configuration file. Adding these to your lighttpd.conf could solve your problem:

mimetype.assign             = (
  ".pdf"          =>      "application/pdf",
  ".sig"          =>      "application/pgp-signature",
  ".spl"          =>      "application/futuresplash",
  ".class"        =>      "application/octet-stream",
  ".ps"           =>      "application/postscript",
  ".torrent"      =>      "application/x-bittorrent",
  ".dvi"          =>      "application/x-dvi",
  ".gz"           =>      "application/x-gzip",
  ".pac"          =>      "application/x-ns-proxy-autoconfig",
  ".swf"          =>      "application/x-shockwave-flash",
  ".tar.gz"       =>      "application/x-tgz",
  ".tgz"          =>      "application/x-tgz",
  ".tar"          =>      "application/x-tar",
  ".zip"          =>      "application/zip",
  ".mp3"          =>      "audio/mpeg",
  ".m3u"          =>      "audio/x-mpegurl",
  ".wma"          =>      "audio/x-ms-wma",
  ".wax"          =>      "audio/x-ms-wax",
  ".ogg"          =>      "application/ogg",
  ".wav"          =>      "audio/x-wav",
  ".gif"          =>      "image/gif",
  ".jpg"          =>      "image/jpeg",
  ".jpeg"         =>      "image/jpeg",
  ".png"          =>      "image/png",
  ".svg"          =>      "image/svg+xml",
  ".xbm"          =>      "image/x-xbitmap",
  ".xpm"          =>      "image/x-xpixmap",
  ".xwd"          =>      "image/x-xwindowdump",
  ".css"          =>      "text/css",
  ".html"         =>      "text/html",
  ".htm"          =>      "text/html",
  ".js"           =>      "text/javascript",
  ".asc"          =>      "text/plain",
  ".c"            =>      "text/plain",
  ".cpp"          =>      "text/plain",
  ".log"          =>      "text/plain",
  ".conf"         =>      "text/plain",
  ".text"         =>      "text/plain",
  ".txt"          =>      "text/plain",
  ".spec"         =>      "text/plain",
  ".dtd"          =>      "text/xml",
  ".xml"          =>      "text/xml",
  ".mpeg"         =>      "video/mpeg",
  ".mpg"          =>      "video/mpeg",
  ".mov"          =>      "video/quicktime",
  ".qt"           =>      "video/quicktime",
  ".avi"          =>      "video/x-msvideo",
  ".asf"          =>      "video/x-ms-asf",
  ".asx"          =>      "video/x-ms-asf",
  ".wmv"          =>      "video/x-ms-wmv",
  ".bz2"          =>      "application/x-bzip",
  ".tbz"          =>      "application/x-bzip-compressed-tar",
  ".tar.bz2"      =>      "application/x-bzip-compressed-tar",
  ".odt"          =>      "application/vnd.oasis.opendocument.text", 
  ".ods"          =>      "application/vnd.oasis.opendocument.spreadsheet", 
  ".odp"          =>      "application/vnd.oasis.opendocument.presentation", 
  ".odg"          =>      "application/vnd.oasis.opendocument.graphics", 
  ".odc"          =>      "application/vnd.oasis.opendocument.chart", 
  ".odf"          =>      "application/vnd.oasis.opendocument.formula", 
  ".odi"          =>      "application/vnd.oasis.opendocument.image", 
  ".odm"          =>      "application/vnd.oasis.opendocument.text-master", 
  ".ott"          =>      "application/vnd.oasis.opendocument.text-template",
  ".ots"          =>      "application/vnd.oasis.opendocument.spreadsheet-template",
  ".otp"          =>      "application/vnd.oasis.opendocument.presentation-template",
  ".otg"          =>      "application/vnd.oasis.opendocument.graphics-template",
  ".otc"          =>      "application/vnd.oasis.opendocument.chart-template",
  ".otf"          =>      "application/vnd.oasis.opendocument.formula-template",
  ".oti"          =>      "application/vnd.oasis.opendocument.image-template",
  ".oth"          =>      "application/vnd.oasis.opendocument.text-web",

# make the default mime type application/octet-stream.
  ""              =>      "application/octet-stream",
)

References

Alternative of AddType in lighthttpd

-2

Recently I've faced such an issue. And the solution was very simple: remove "-" from the file name.

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