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

Con la llegada del formato SVG (imágenes vectoriales) desde hace ya bastantes años, es necesario configurar nuestros servidores correctamente para servirlo de la mejor manera. Aunque este es solo 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.

CC BY 2.5

¿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 enviá 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 nginx.conf que sería /etc/nginx/. En Windows igualmente en el mismo directorio que el archivo de configuración principal, solo que la localización varia según el tipo de instalación.

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 linea 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 usara Deflate para comprimir los archivos SVG que básicamente son archivos de texto con XML.

Conclusiones y notas

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

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