adobe illustrator - When should I use SVG or SVGZ for my web graphics?

From my understanding,

The SVGZ is a compressed file type of an SVG. I love using SVG images and have had a lot of experience with them.

All of the times I used them I have never had a graphic that went over a few hundred kilobytes.

I use SVG for responsive graphics while making responsive websites. I also use them since my favorite design style is vector based graphics. My strongest design strength is illustrator, especially when it comes to graphic design.

The other reason I would use an SVG graphic is due to the ease of animating certain elements of the graphic, like arms, legs, etc.

Especially background elements, like a city to span across the entire page while I animate some flickering of lights and so on.

If the file is compressed, would it lose the SVG code so I couldn't animate it?

Is there any reason I should use an SVGZ over just an SVG?

Update

Well I decided to just make an SVG and SVGZ to see how they acted with the web since I found out my works ancient CS3 can save SVGZ!

After testing I ran into a very unexpected problem with the SVGZ file type. (Tested on Chrome, Firefox, and IE) If you go to the direct URL of the image you get an error. I am assuming you can't access the SVG code on these files types but after making a fiddle it doesn't even seem to display the image.

Are these useless for the web?

.svg

.svgz

JSFIDDLE

Answer

Support for compressed svg will vary by browser, but you need to configure the server to properly flag the svgz file with information about its encoding to explicitly tell the browser how to decode it upon receipt.

Server response for svgz needs to be configured to include "Content-encoding: gzip"

svg     Content-Type: image/svg+xml

svgz    Content-Type: image/svg+xml
        Content-Encoding: gzip

For an Apache web server, this can be achieved via a .htaccess file:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Note that whether you zip it on the fly or bake it in before you place it on the server, the Content-encoding should to be hinted. For assets like this, I think it is better to pre-compress it. Otherwise, you are eating server CPU for each request of the file. This may not seem like a lot, but this is the sort of unoptimization problem that brings down e.g. US healthcare website.