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
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes...

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. 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!