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
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • 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...

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

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!