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!
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I've created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you...