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

Incredible Demos

  • By
    CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

  • By
    HTML5 Context Menus

    One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so...

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!