Enable gzip compression for SVG in Nginx

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 -l

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

    ##
    # Gzip Settings
    ##
    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied expired no-cache no-store private auth;
    #compression level
    gzip_comp_level 6;
    gzip_min_length 1000;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    # files to gzip
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

or you can organize the GZIP types, for easier readability

gzip_types text/plain
           text/css
           text/javascript
           text/xml
           application/json
           application/javascript
           application/x-font-ttf
           application/xml
           application/xml+rss 
           # add svg
           image/svg+xml;

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 content-type

Sidebar