Serve SVG as an Image on Apache with .htaccess

By  on  

I've been a massive fan of SVG since my days creating charts and animations with the Dojo Toolkit.  SVG has been around forever, it even has IE support now, and it's ultra-flexible.  When creating this site's redesign, I used SVG within an IMG tag and it work great locally.  When I pushed to the live server, however, the image displayed as broken and I saw the following notice in the console:

Resource interpreted as Image but transferred with MIME type text/xml: "https://davidwalsh.name/logo.svg".

That was certainly unexpected.  Obviously there was a difference in my local server and my production server, so after a bit of research, I found that the following .htaccess update would resolve the issue:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Serving SVG as XML, what it essentially is, really isn't of use to me -- I want to use it in its visual glory.  Keep this snippet handy in case you also run into this issue!

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    JavaScript Canvas Image Conversion

    At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one...

  • By
    QuickBoxes for Dojo

    Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin...

Discussion

  1. Nice, I always missed that one. But isn’t it better to user dots before the file endings? In the original documentation for AddType the example says so.

    AddType image/svg+xml .svg .svgz
    
  2. With which MIME type will it be transferred after adding this configuration?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!