The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Serve SVG with the Correct Content Type

Last updated on:

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?

  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>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed