SVGZ frente a SVG: elige un archivo para editar o entregar

SVGZ es un archivo SVG comprimido con gzip. Descomprímelo y recuperas el documento SVG, incluidos sus trazados, colores, texto y cualquier imagen incrustada. El registro del tipo de medio SVG del W3C define .svgz como un alias de .svg.gz.

Elige entre SVGZ y SVG según el proceso receptor. Conserva un .svg corriente cuando alguien necesite marcado legible o una aplicación espere ese formato. Utiliza .svgz cuando el destinatario lo admita y tengas un motivo para entregar un archivo comprimido. Para un sitio web, comprueba la compresión HTTP antes de cambiar nombres de archivo: una URL terminada en .svg puede enviar ya contenido comprimido.

El siguiente ejemplo comprime una insignia original de 332 bytes a 243 y después restaura los bytes originales exactos. Es el resultado de un archivo, no una promesa sobre tu diseño o la velocidad de una página.

¿Qué cambia cuando SVG se convierte en SVGZ?

La guía de tipos de archivo SVG de MDN distingue SVG de texto corriente y SVG comprimido con gzip, y explica la configuración de servidor que requiere SVGZ. Si no conoces el documento subyacente, empieza por qué contiene un archivo SVG.

Una copia comprimida es una forma útil de empaquetado. Conserva el original editable por separado para inspeccionar objetos, hacer correcciones y exportar el formato que necesite la siguiente herramienta.

Prueba una compresión y descompresión SVGZ con una pequeña insignia

Esta ilustración original contiene un hexágono verde azulado, un sol coral y una montaña clara. Guarda lo siguiente como badge.svg en una carpeta de pruebas:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

En un sistema con gzip, cmp y wc, ejecuta estos comandos en esa carpeta. Utiliza nombres de salida nuevos si esos archivos ya contienen trabajo que necesitas conservar.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

El primer comando escribe una copia comprimida conservando el original. La opción -n omite el nombre de archivo y la marca de tiempo originales de la cabecera gzip. El segundo descodifica la copia comprimida en otro archivo. cmp comprueba los bytes y wc -c indica sus cantidades.

Ejecutamos esta secuencia con Apple gzip 457.140.3. Todos los comandos finalizaron correctamente y cmp no encontró diferencias entre el SVG original y el descodificado.

El archivo comprimido ahorró 89 bytes, aproximadamente el 26.8% del tamaño original. El espacio en blanco, los finales de línea, los metadatos, el diseño o los ajustes de compresión pueden cambiar el resultado. La comparación de bytes demuestra que este recorrido conservó el original. No mide el tiempo de transferencia del navegador, el rendimiento de renderizado ni la compatibilidad con una aplicación de edición.

Si solo necesitas abrir un SVGZ en un editor que espera SVG, la descompresión es la operación pertinente. Renombrar badge.svgz a badge.svg deja los bytes comprimidos como estaban. Asimismo, renombrar un SVG a SVGZ no ejecuta gzip.

Distingue compresión y limpieza del diseño

Supón que un logotipo trazado tiene un contorno irregular y cientos de puntos innecesarios. Gzip puede reducir el tamaño almacenado, pero descodificar devuelve esos mismos puntos. Utiliza la guía de limpieza de nodos SVG cuando el problema de edición sea la complejidad geométrica. Compara la silueta durante la simplificación, porque eliminar puntos puede alterar el diseño.

La optimización del marcado es otra operación. Eliminar metadatos, reescribir números o combinar formas compatibles cambia el documento original antes de comprimirlo. Un recorrido gzip idéntico byte a byte no hace nada de eso. Si una herramienta de optimización también edita el SVG, revisa su salida de forma independiente en lugar de atribuir cada cambio a la compresión. La guía de configuración de SVGO y conservación de identificadores demuestra esa revisión con una insignia original cuyo enlace a CSS externo desaparece con el ajuste predeterminado.

Un SVG también puede contener una imagen rasterizada. Comprimir ese documento conserva la imagen incrustada; no crea contornos editables alrededor de los objetos de la imagen. El diagnóstico de imágenes rasterizadas incrustadas ayuda a distinguir un contenedor de imagen de un diseño construido con trazados vectoriales.

Estas distinciones facilitan elegir el siguiente paso: descomprimir para recuperar el marcado, editar para cambiar la geometría y trazar solo cuando un diseño rasterizado adecuado necesite nuevas formas vectoriales.

Un sitio web puede comprimir respuestas SVG corrientes

La compresión HTTP es independiente del nombre de archivo mostrado en una URL. Un servidor puede recibir una solicitud de badge.svg y enviar una representación comprimida de ese SVG. La guía de compresión HTTP de MDN describe la negociación: la solicitud anuncia las codificaciones compatibles y la respuesta identifica la utilizada. Cuando la representación varía según Accept-Encoding, la respuesta utiliza Vary: Accept-Encoding para que las cachés distingan esas versiones.

Para una respuesta SVG codificada con gzip, las cabeceras pertinentes son:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type identifica el medio descodificado. Content-Encoding indica al destinatario cómo descodificar el cuerpo de la respuesta. La referencia de Content-Encoding de MDN explica esa distinción. Estas cabeceras deben describir los bytes realmente enviados; añadir Content-Encoding: gzip a un SVG sin comprimir no lo comprime.

Para un .svgz almacenado que se sirve como imagen SVG, las indicaciones de servidor SVGZ de MDN requieren el tipo de medio SVG y la codificación de contenido gzip. Inspecciona la respuesta final en el panel Red del navegador, incluido cualquier comportamiento de la CDN. Abrir correctamente un archivo local no verifica esa respuesta.

Antes de sustituir un SVG existente por SVGZ, comprueba si la respuesta SVG corriente ya está comprimida. Compara las respuestas reales bajo las mismas condiciones, incluido el estado de caché, en lugar de comparar el tamaño de un archivo SVG local con un tamaño de transferencia de red. Nuestra prueba de insignia anterior no realiza esa comparación web.

Envía un archivo que pueda utilizar la siguiente aplicación

Para una entrega editable, pregunta qué formato importa el destinatario. Si acepta SVG, pero rechaza SVGZ, proporciona el SVG descomprimido y prueba esa copia. Descomprimir no añade compatibilidad con funciones SVG que la propia aplicación no entienda.

Abre el archivo aceptado en la aplicación prevista e inspecciona sus objetos. Comprueba letras, recortes, imágenes incrustadas, colores y los detalles más pequeños que importen. Mantén esta revisión separada de la descodificación: bytes originales idénticos pueden seguir interpretándose de forma diferente en aplicaciones con compatibilidades distintas.

Si un archivo aparece en blanco, establece primero si se descodificó en SVG legible. Después investiga el documento y su contexto de visualización con la guía de problemas de SVG en blanco. La compresión repetida no repara pintura invisible, contenido ausente ni un lienzo inadecuado.

Conserva el original, la copia de entrega y una nota breve con el nombre de la herramienta receptora. Eso es más útil que elegir el archivo local más pequeño antes de saber adónde irá.

Cuando el original aún necesita trazados vectoriales

Si falta el original vectorial y solo queda un logotipo plano PNG o JPG, el proceso de imagen a vector de PerfectVector puede ayudar a preparar una alternativa SVG editable. Compara la vista previa con el original, inspecciona los huecos y las regiones separadas y abre el archivo descargado en el editor previsto. Elige la compresión solo después de aceptar el diseño.

PerfectVector no hace falta para desempaquetar un SVGZ existente. Utiliza la descompresión para esa tarea. Conserva fotografías o efectos pictóricos rasterizados cuando así mantengas la apariencia prevista y utiliza un original vectorial existente siempre que esté disponible. Las guías de formatos y edición del blog explican esas elecciones del original antes de empaquetarlo.

Preguntas frecuentes

¿Tiene SVGZ más calidad que SVG? No. La compresión gzip cambia la representación almacenada. Una descompresión correcta restaura el original SVG; no mejora sus trazados, colores ni imágenes incrustadas.

¿Cómo convierto un SVGZ en SVG? Descomprímelo con una herramienta que maneje gzip y después guarda el SVG descodificado. Por ejemplo, gzip -dc badge.svgz > roundtrip.svg escribe una copia descodificada. Renombrar únicamente la extensión no realiza esa operación.

¿Hace siempre SVGZ más rápido un sitio web? La extensión no implica una mejora fija de velocidad. Una respuesta SVG corriente puede utilizar ya compresión HTTP. Comprueba las cabeceras reales de respuesta, los bytes transferidos, las condiciones de caché y el comportamiento de la página.

¿Reduce comprimir SVG su número de nodos? No. Gzip conserva el original al descodificar. La simplificación de trazados u otra optimización SVG es una operación independiente que necesita su propia revisión gráfica.

Fuentes

1. W3C — Registro del tipo de medio SVG — define SVGZ como SVG comprimido con gzip y su relación con SVG.GZ.
2. MDN — Primeros pasos con SVG — distingue las formas de archivo y documenta las cabeceras de respuesta SVGZ.
3. MDN — Content-Encoding — explica la descodificación y la relación entre codificación y tipo de medio.
4. MDN — Compresión en HTTP — aborda la negociación de compresión de respuestas y la variación de caché.

Adapta el archivo de entrega a la herramienta receptora y después verifica el diseño descodificado. Si partes de un logotipo rasterizado que necesita formas editables, prepara una alternativa SVG y revisa sus trazados antes de decidir cómo comprimirlo.