Home Everything related to Internet, Programming and Technology

Add SVG images support and compression in Nginx

With the arrival of the SVG format (vector images) 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.

svg logo
CC BY 2.5

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.

nginx logo

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.

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.

Activate 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.

Conclusions and notes

To check that there is no error in our configuration file 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.

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 an alternative to it. contrary.

Comments

© 2021 ImperioWeb.net Todos los derechos reservados.