SVGs are a great way to losslessly scale vector images. Unlike other types of images like PNG, JPG and SVGs, gzipped can compress them even better. Gzip compresses well, for example you can compress SQL files so that they are 10% of their original size.
This tutorial will show you how to compress files with the SVG extension, allowing SVG to compress using GZIP in Nginx, and check out how GZIP compression using Pingdom works.
Test the benefits of compressed SVG file format
Download Sample SVG File for Gzip Compression
cd /tmp wget https://...../Anderyex_big.svg
Compress the file with the extension SVG and give it a new name
Andreyex_big.svg.gzso that we can easily compare the size
cat Andreyex_big.svg | gzip > Andreyex_big.svg.gz
Lists the / tmp directory and only show files that contain Arctic.
ls -lh /tmp | grep Andreyex
Original SVG file with size
1.5 MB began to weigh
424 KB after being gzipped.
I.e 33% from its original size!
-rw-r--r-- 1 termin termin 1.5M Oct 7 2013 Andeyex_big.svg -rw-r--r-- 1 termin termin 424K Feb 13 03:08 Andeyex_big.svg.gz
To see detailed statistics you can use GZIP with the switch
gzip -l Andreyex_big.svg.gz
You will see compressed and uncompressed size and compression ratio
compressed uncompressed ratio uncompressed_name 435659 1458456 70.12% Andreyex_big.svg
Let’s enable GZIP in Nginx
Enable SVG GZIP Compression in Nginx
Make sure you have svg in your mime types (should be there by default)
sudo nano /etc/nginx/mime.types
Find the image line or add it if it is missing
image/svg+xml svg svgz;
Open nginx config file
sudo nano /etc/nginx/nginx.conf
Find the line
gzip types and add
image/svg+xml to the end of the line as shown below
or you can organize the GZIP types, for easier readability
Check your Nginx configuration
sudo nginx -t
If it worked, then restart Nginx
sudo service nginx reload
You can check if GZIP works for SVG files with Pingdom…
Find your file and hit the SVG down arrow on the right.
Check the title
content-encoding, you can also see the header value