23

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

Improve this question
4
  • 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 – user56reinstatemonica8 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. – user56reinstatemonica8 Nov 20 '13 at 18:46
  • @JoshPowell : given that most http servers send contents with gzip compressing I don't see the purpose of this question. And with some servers, if you name your file .svg.gz, then the browser will received an information that the original file wasn't compressed. – user2284570 Jun 10 '15 at 19:47
12

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.

Improve this answer
2
  • If your server or platform is at all intelligent, performing the compression there is highly optimized as it can be cached.This is most certainly not the kind of thing that will crash your site, let alone healthcare.gov. – Josh Koenig Mar 24 '15 at 19:57
  • Do you know if there is any way to view SVGZ files locally in a browser without setting up a local webserver? – cazort Jul 13 at 18:33
11

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), 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.

Improve this answer
5
  • Are you sure the compressed file is cached somewhere ? It's a lot of work to gzip these svg assets again and again for 5000 visitors. – bokan Sep 26 '14 at 23:13
  • @bokan : some the server offer the option to pre-compress the contents by appending a .gz file extension. So if a client looks for index.html the server will answer with the pre-compressed file named index.html.gz. – user2284570 Jun 10 '15 at 19:52
  • @user2284570: So you have to create the .gz by hand. Otherwise it will compress files each time it sends them, and that is lot of work for the server. – bokan Jun 12 '15 at 10:14
  • 1
    @bokan : Yes and it often requires lot of additional server configuration than the simple Content-encoding compression. Even IE5 support it. creating a script for compressing every static files inside a directory remains simple. In the second case, this save both disk space and bandwidth. – user2284570 Jun 12 '15 at 11:47
  • It's far from true that there is no need to use SVGZ. Compressing the files saves storage space server-side, which is often a limiting factor in hosting cost. It also affects upload bandwidth and speed. Because SVG is a text format, the savings are huge. Furthermore, compressing the file only before serving places more CPU load on the server, as it needs to be carried out repeatedly; it's terribly inefficient in the long-run. SVGZ files can be compressed once, saving upload speed & bandwidth, saving on storage long-term, and repeatedly saving CPU. – cazort Jul 13 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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