Inicio Todo lo relacionado a Internet, Programación y Tecnología

Agregar soporte y compresión 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 sólo 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.

svg logo
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 envía en la cabecera de respuesta el tipo MIME del archivo o página.

nginx logo

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

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.

Conclusiones y notas

Para comprobar que no exista ningún error en nuestro archivo de configuración 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.

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 una alternativa de lo contrario.

Comentarios

© 2020 ImperioWeb.net Todos los derechos reservados.