Add SVG images support and compression in Nginx

With the arrival of the SVG format (Scalable Vector Graphics) many years ago, it is necessary to configure our servers correctly to serve it in the best way. Although this is only supported in modern web browsers, using it properly will give us good benefits such as the possibility of using only one scalable version of an image instead of several depending on the screen resolution of the users.

⇧

Why is it necessary to configure Nginx?

Files are treated differently by browsers based on their MIME type. When we talk about the web world, extensions are ignored by browsers and instead use this type of identification, so that the client can correctly view or manage the responses and files received. Usually, the server sends the MIME type of the file or page in the response header.

⇧

Add SVG support in Nginx with proper MIME type

SVG should use MIME type image/svg+xml for files with extension svg or svgz (the latter is a gzip compressed svg).

To add support for this type of file we edit the file mimes.types that in Debian and Ubuntu is in the same directory as nginx.conf which would be in /etc/nginx/. In Windows also in the same directory as the main configuration file, only the location varies depending on the type of installation. In some cases it is also in the nginx.conf file.

This file is a list of MIME types, for example:

types {
    text/html        html htm shtml;
    # more entries...
}

First check that image/svg+xml is not found and then add it:

types {
    text/html        html htm shtml;
    image/svg+xml    svg svgz;
}

You need to restart Nginx and with this it will know that it must send the correct mime type for this file in the response header.

⇧

Enable GZIP for SVG

GZIP instantly compresses each file to send it on every request. But for this we have to add in a list what MIME types should be compressed. For example, there is no point in compressing a JPG image because it is already a compressed format and would be theoretically useless.

We edit our file nginx.conf and in the section http we look for the option gzip_types.

You have to be careful with this option because it could be in one line or in multiple lines, but it is only one option.

Example of the option:

gzip_http_version 1.0;
gzip_types
        application/atom+xml
        application/javascript
        # more entries...
        application/json;

Don't forget that the list ends with a semicolon.

List with SVG added:

gzip_http_version 1.0;
gzip_types
        application/atom+xml
        application/javascript
        # more entries...
        image/svg+xml
        application/json;

In this way, GZIP will use Deflate to compress SVG files that are basically XML text files.

⇧

Enable Brotli for SVG

To activate SVG support with Brotli compression we do the same as with GZIP compression, but we use a different option, we use brotli_types, adding "image/svg+xml", respecting the closing at the end of the list with a semicolon.

​brotli_types
        application/atom+xml
        application/javascript
        # more entries...
        image/svg+xml
        application/json;

Basically or for practical purposes, the content of gzip_types and brotli_types should be identical. If we cannot find the brotli_types option, we must look for it in a configuration file in the same directory where nginx.conf is located, in my case I have it in a custom file within the /etc/nginx/conf.d folder. If we are sure that it is not found and that our server has the compiled module, then we add it with the content of gzip_types.

Whether we don't have Brotli support in Nginx, we can compile it with this guide (in Spanish).

⇧

Conclusions and notes

To check that there is no error in our configuration file, before restarting,  we execute:

nginx -t -c /etc/nginx/nginx.conf

The output should be:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

As a recommendation, you should create a backup copy of the files to be modified.

Finally, we restart Nginx, for example with systemd:

sudo systemctl restart nginx

It is necessary to emphasize that although the support for this type of images is growing, it is still probable that not all browsers support it, but even so we can use it with some "fallback" to show the scalable version only if it is supported, and otherwise an alternative.

⇧