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
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

  • By
    Animated Progress Bars Using MooTools: dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage. The Moo-Generated XHTML This DIV structure is extremely simple and can be controlled...

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!