kaioa.com

Intro

In this week's episode of I hate repeating myself I'll explain how to make Apache send the right headers. With the correct headers SVG and SVGZ can be displayed directly in all browsers which support it.

I'll try to keep it as brief as possible and as detailed as necessary. If there are any questions feel free to ask.

Testing

To check the current situation and to verify the results of our changes we need to know how the desired result should look like.

As you can see the Content-Type headers for SVG and SVGZ are identical, but SVGZ also comes with a Content-Encoding header, which is used by the client to determine how to decode the data.

Unfortunately Opera doesn't rely on the Content-Encoding header to determine the encoding. It always probes the data and gunzips it automatically. This means you cannot verify if it works correctly with Opera itself. I really wish they hadn't done that.

So, for verification I recommend to use Firefox and the awesome Web Developer Extension. With that extension you can easily view the response headers via:

Information -> View Response Headers

Be also sure to clear the cache each time you change Content-Type or Content-Encoding headers, because CT/CE caching is a bit aggressive. That function is accessible via:

Miscellaneous -> Clear Private Data -> Cache

Without the Web Developer Extension it's a bit more long-winded:

Tools -> Options... -> Advanced -> Network -> Cache -> Clear Now

The easy way: .htaccess

.htaccess is pretty unproblematic and it can be also often used on cheap shared hosting. Additionally, no restart is necessary. The .htaccess file can be placed in any directory and all changes are applied to this directory and all of its subdirectories (as long as the rules aren't overwritten again via another .htaccess file).

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

If you already have some .htaccess in your root directory just add those lines at the beginning.

Some FTP clients don't show the .htaccess file, which is sorta troublesome if you want to download the currently used one. The reason for this is that files starting with a '.' are "hidden" on unixoid file systems. To show hidden files check the view menu. In Filezilla's case it's Server -> View hidden files. (Interestingly the file is visible either way with the version of Filezilla I'm currently using. It wasn't like that with older versions.)

Clear the browser's cache, reload, and check the headers.

The global way: httpd.conf & mime.types

httpd.conf is located at "apache/conf/httpd.conf". You should have there a <IfModule mime_module> (or similar) section. Ensure that these two lines are there:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Alternatively you can only add the AddEncoding line and take care of the mime type via mime.types in the same directory. Ensure that the following line is there:

image/svg+xml svg svgz

Restart Apache then clear the browser's cache, reload, and check the headers.

If everything fails: nagging

If both options aren't available just nicely ask the provider/hoster to fix this issue. In many cases they are surprisingly cooperative and fix it in a matter of hours (or days - be a bit patient ;)).

Test Data

If you're fixing this for someone else you need of course some test data:
test_data.zip (2kb)

Included files:
test.svg
test.svgz