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!
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![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...
![CSS Filters]()
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...
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