Serve SVG with the Correct Content Type

If you are trying to use SVG like <img src="image.svg"> or as a CSS background-image, and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.

Add this to your .htaccess file at the root to fix it:

AddType image/svg+xml .svg .svgz


  1. anil
    Permalink to comment#

    why not showing svg on safari

  2. Noah
    Permalink to comment#

    I use AWS to serve my asset files, including the external svg file where all my images are defined. These SVGs are not rendering for me, and it doesn’t seem to be a content-type issue. Is there a known issue in regards to serving an SVG file cross origin?

    • Chris Coyier
      Permalink to comment#

      Do you get errors in the console? How are you using the SVG? Demo page?

    • Sam
      Permalink to comment#

      Hi Noah,

      I’m having exactly this issue now. Did you have any solutions?

    • Sam
      Permalink to comment#

      I found the issue with my app, the original image is not broken, only the resized images are broken, I guess that something is wrong with Image Magick

  3. Justin
    Permalink to comment#

    Thank you!!

    In my situation, I also hadn’t defined a width or height to the SVG in the HTML so it was rendering the SVG at 0px by 0px.

    The below code worked for me: (provided a PNG backup for IE8 and below)

    <img alt="My Company" title="Home" width="169" height="50" src="img/logo/my-logo.svg" onerror="this.onerror=null; this.src='img/logo/my-logo.png'">
  4. Andrea
    Permalink to comment#

    Thank you very much!
    SVG image was not showing on Website hosted on 1und1 Webserver. Entering “AddType…” into .htaccess solved the problem!

  5. Johan
    Permalink to comment#

    I did my change on a weblogic server. Works great

    done here


  6. Mac
    Permalink to comment#

    I just came across this problem where when designing and having live preview in chrome I didn’t see svgs when used as img.

    Solution was dead easy – adblock plus switched off on /localhost solved it all.

    Hope that helps

  7. Chung-Min
    Permalink to comment#

    Not htaccess problem, but I also had similar issues while using blob to serve SVG files. Browsers like Safari (Mac & iOS) and Chrome (iOS) do not accept complex MIME type now, such as “image/svg+xml;charset=utf-8”. Mac version of Chrome treats it as usual though. If you have problems with using blob url to load SVG, simply set “image/svg+xml” like this article said should work for all platforms.

    I am also fixing this document now:, since this original one doesn’t work on Safari.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.