Serve SVG as an Image on Apache with .htaccess
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!
![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...
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![Dynamically Load Stylesheets Using MooTools 1.2]()
Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different.
![Digg-Style Dynamic Share Widget Using MooTools]()
I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...
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.
With which MIME type will it be transferred after adding this configuration?
image/svg+xml