Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
It looks like it might be partly a web server configuration issue setting .svgz to be served up using the right MIME type, see stackoverflow.com/questions/16725380/svgz-doesnt-display . Personally I always use Raphael.js for SVG/vector graphics on the web because I need IE8 support –  user568458 Nov 20 '13 at 18:35
    
Hmm, Thank you for the very useful links. Is there any reason to use an SVGZ? I thought maybe it would be nice to cut down on an image file size. I am just curious whether or not an SVGZ is in any way useful for the web or really useful in any way. –  Josh Powell Nov 20 '13 at 18:40
    
If it works, it'll cut file size down quite a lot. This might be useful if you're using interactivity on something complex - e.g. a very detailed SVG world map that is zoomable. The z means gzip compression which is used to cut down file size and pretty much nothing else. –  user568458 Nov 20 '13 at 18:46
    
@user568458 Thank you for a good example! –  Josh Powell Nov 20 '13 at 18:53
add comment

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
add comment

This might not be the answer you're expecting, but for the web, it's not truly needed to use any SVGZ files. The reason being is that a SVGZ file is simply a SVG that has been pre-Gziped.

Modern web servers can do this Gzipping themselves before serving the asset (see this answer on StackOverflow for more info: http://stackoverflow.com/questions/4949853/enable-gzip-compression), so if you have a 300KB SVG that is 50KB when compressed, it will be around the same when Gzipped by the web server automatically. So it won't be 300KB down the line, it'll be 50KB and then will be uncompressed by the browser.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.