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!

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 in triple backtick fences like this:

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

We have a pretty good* newsletter.