shaunrashid.com

Random thoughts of a digital web weaver

SVG: Set the right MIME type!

As the next part of my redesign, I created an SVG version of my pretty logo so that I could take advantage of the file format for multi-device use. Everything looked good locally so I pushed the image and code live… only to find out that a) I was getting scrollbars on the <embed> element and b) Firefox was asking for a plugin!

I spent quite a bit of time looking through the HTML, CSS, and SVG code trying to find out what was wrong and searching the Internet came up with a lot older posts regarding a Webkit height miscalculation bug. Since that issue had been fixed and I was having the same problem in Firefox, that wasn’t the issue.

Turns out the issue lay with my web hosting provider. They didn’t have the proper MIME-type set up for SVG images. This came as a surprise to me as I assumed they would have this in place but at least I had access to the .htaccess file. With the following two lines and a file upload, I was off to the races with my responsive SVG logo!

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

So if you come across issues where your SVG isn’t rendering on the server, check to see that the MIME-type is properly set up.

Taking the Plunge

Ever since I read Jen Simmons’ post about sitting down and launching her website in one night, I have been determined to do the same. So here is it. I have taken the plunge, scrapped everything that I did before, and put together a very simple WordPress template. It’s probably more stupid looking and has more stupid HTML than Jen’s site (just kidding, Jen. I like your site a lot) but it’s here. It’s without the SVG logo that for some reason works locally but not on the server (which I will figure out eventually) but I’ve launched the minimum shippable product and now, as Jeffrey Zeldman states as part of his 10 commandments of web design (see An Event Apart), it’s time to iterate.