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.