Agregar soporte y compresión para imágenes SVG en Nginx

Con la llegada del formato SVG (gráficos vectoriales escalables) desde hace ya bastantes años, es necesario configurar nuestros servidores correctamente para servirlo de la mejor manera. Aunque este es únicamente soportado en los navegadores web modernos, usarlo adecuadamente nos dará buenos beneficios como la posibilidad de usar solo una versión escalable de una imagen en lugar de varias dependiendo de la resolución de pantalla de los usuarios.

⇧

¿Por qué es necesario configurar Nginx?

Los navegadores tratan los archivos de diferente manera según su tipo MIME. Cuando hablamos del mundo web, las extensiones son ignoradas por los navegadores y en su lugar usan este tipo de identificación, para que el cliente pueda visualizar o manejar correctamente las respuestas y archivos recibidos. Normalmente el servidor envía en la cabecera de respuesta el tipo MIME del archivo o página.

⇧

Agregar soporte SVG en Nginx con el tipo de MIME adecuado

SVG debería usar el tipo MIME image/svg+xml para los archivos con extensión svg o svgz (este último es un svg comprimido con gzip).

Para agregar el soporte para este tipo de archivo editamos el archivo mimes.types que en Debian y Ubuntu se encuentra en el mismo directorio que el archivo nginx.conf que es /etc/nginx/. En Windows está igualmente en el mismo directorio que el archivo de configuración principal, solo que la localización varía según el tipo de instalación. En algunos casos también se encuentra en el archivo nginx.conf.

Este archivo es una lista de tipos de MIME por ejemplo:

types {
    text/html        html htm shtml;
    # más entradas...
}

Primero hay que verificar que no se encuentre image/svg+xml y luego lo agregamos:

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

Hay que reiniciar Nginx y con esto sabrá que debe enviar en la cabecera de respuesta el tipo de mime correcto para este archivo.

⇧

Activar GZIP para SVG

GZIP comprime al instante cada archivo para enviarlo en cada petición, pero para ello tenemos que agregar en una lista que tipos de MIME deben de ser comprimidos. Por ejemplo no tiene caso comprimir una imagen JPG porque ya es un formato con compresión y sería en teoría inútil.

Editamos nuestro archivo nginx.conf y en la sección http buscamos la opción gzip_types.

Hay que ser cuidadosos con esta opción porque podría estar en una línea o en múltiples, pero es una sola opción.

Ejemplo de la opción:

gzip_http_version 1.0;
gzip_types
        application/atom+xml
        application/javascript
        # más entradas...
        application/json;

No hay que olvidar que la lista termina con un punto y coma.

Lista con SVG agregado:

gzip_http_version 1.0;
gzip_types
        application/atom+xml
        application/javascript
        # más entradas...
        image/svg+xml
        application/json;

De esta manera Gzip usará Deflate para comprimir los archivos SVG que básicamente son archivos de texto con XML.

⇧

Activar Brotli para SVG

Para activar el soporte de SVG con compresión Brotli hacemos lo mismo que con la compresión GZIP, pero usamos una opción diferente, usamos brotli_types, agregando "image/svg+xml", respetando el cierre al final de la lista con punto y coma.

​brotli_types
        application/atom+xml
        application/javascript
        # más entradas...
        image/svg+xml
        application/json;

Básicamente o para efectos prácticos el contenido de gzip_types y brotli_types debe ser idéntico. Si no encontramos la opción brotli_types hay que buscarla en algún archivo de configuración en el mismo directorio donde se encuentra nginx.conf, en mi caso lo tengo en un archivo personalizado dentro de la carpeta /etc/nginx/conf.d. Si estamos seguros de que no se encuentra y que nuestro servidor tiene el módulo compilado, entonces si la agregamos con el contenido de gzip_types.

Si no tenemos soporte para Brotli en Nginx, lo podemos compilar con esta guía.

⇧

Conclusiones y notas

Para comprobar que no exista ningún error en nuestro archivo de configuración, antes de reiniciar, ejecutamos:

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

La salida debe ser:

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

Como recomendación hay que crear una copia de seguridad de los archivos a modificar.

Finalmente, reiniciamos Nginx, por ejemplo, en un sistema con systemd:

sudo systemctl restart nginx

Es necesario recalcar que aunque el soporte para este tipo de imágenes está creciendo aún es probable que no todos los navegadores lo soportan, pero aun así podemos usarlo con algún "fallback" para mostrar la versión escalable solo si es soportada, y de lo contrario una alternativa.

⇧