: 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.
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
More posts by @Shelton719
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.