SVGs are a great way to have losslessly scalable vector images. Unlike other image types like png and jpg, svgs can be gzipped to compress them even further. Gzip compression can reduce file size dramatically. For example, you can shrink SQL files so they are 10% of their original size.
This tutorial will show you how to measure the benefits of gzipping SVG files, enabling SVG gzip compression in nginx and verifying the gzip compression is working using pingdom.
Test Benefits of gzipping SVG Files
Download a test svg to compress with gzip
cd /tmp wget https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg
gzip the svg file and give it a new name
Arctic_big.svg.gz so we can easily compare the size
cat Arctic_big.svg | gzip > Arctic_big.svg.gz
List the size of the
/tmp directory and only display files that contain
ls -lh /tmp | grep Arctic
The large Arctic SVG went from
1.5 MB to
424 KB after gzipping it
That is under 33% of its original size!
-rw-r--r-- 1 wpbullet wpbullet 1.5M Oct 7 2013 Arctic_big.svg -rw-r--r-- 1 wpbullet wpbullet 424K Feb 13 03:08 Arctic_big.svg.gz
To see detailed statistics you can use gzip with the
gzip -l Arctic_big.svg.gz
You will see the compressed and uncompressed sizes as well as the compression ratio
compressed uncompressed ratio uncompressed_name 433649 1468466 70.5% Arctic_big.svg
Let’s enable gzip in nginx as well.
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;
sudo nano /etc/nginx/nginx.conf
gzip types line and add
image/svg+xml to the end of the line as shown below
or you can organize the gzip types like this for easier readability
Test the nginx configuration
sudo nginx -t
If it worked then reload nginx
sudo service nginx reload
You can verify gzip is working for svg files by using pingdom.
Find your svg file and click the down arrow on the right.
content-encoding header, you can also see the
content-type header value
nginx Mime Types and gzip
nginx Server configs
Large Arctic SVG