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