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

Comments

  1. User Avatar
    anil
    Permalink to comment#

    why not showing svg on safari

  2. User Avatar
    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?

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

    • User Avatar
      Sam
      Permalink to comment#

      Hi Noah,

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    Johan
    Permalink to comment#

    Thanks
    I did my change on a weblogic server. Works great

    done here
    C:\weblogic10\domain-pb-7.0.2-Dev\config\mimemappings.properties

    svg=image/svg+xml

  6. User Avatar
    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. User Avatar
    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: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas, since this original one doesn’t work on Safari.

  8. User Avatar
    Diego Ramos
    Permalink to comment#

    Hey, there’s another problem beyond this.
    Some Windows server not render SVG files.
    To allow HOST that use Windows as OS:

    Create a “web.config” file in root folder with this code:
    <configuration>
    <system.webServer>
    <staticContent>
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
    </system.webServer>
    </configuration>

    This solution solves the problem in Windows host.

    • User Avatar
      Ty Whalin
      Permalink to comment#

      Isn’t that the same as adding the addType to the .htaccess file?

      AddType image/svg+xml svg
      AddType image/svg+xml svgz

      I have been trying to enable compression on the svg file format for Google Page Speed, but having difficulties doing so. Any clue of how to do that?

  9. User Avatar
    dFallenOne
    Permalink to comment#

    thanks a lot, chaning the content type did the trick

  10. User Avatar
    Alex
    Permalink to comment#

    Thank you! This fix solved my problem!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag