¿Cuándo debo usar SVG o SVGZ para mis gráficos web?

Desde mi entendimiento,

El SVGZ es un tipo de archivo comprimido de un SVG. Me encanta usar imágenes SVG y he tenido mucha experiencia con ellas.

Todas las veces que los usé, nunca tuve un gráfico que superase unos cientos de kilobytes.

Uso SVG para gráficos receptivos mientras hago sitios web receptivos. También los uso ya que mi estilo de diseño favorito son los gráficos basados en vectores. Mi mayor fuerza de diseño es ilustrador, especialmente cuando se trata de diseño gráfico.

La otra razón por la que usaría un gráfico SVG se debe a la facilidad de animar ciertos elementos del gráfico, como brazos, piernas, etc.

Especialmente elementos de fondo, como una ciudad que se extiende por toda la página mientras yo animé algunas luces parpadeantes, etc.

Si el archivo está comprimido, ¿perderá el código SVG para que no pueda animarlo?

¿Hay alguna razón por la que deba usar un SVGZ sobre solo un SVG?

Actualizar

¡Bueno, decidí hacer un SVG y SVGZ para ver cómo actuaban con la web desde que descubrí que mis trabajos antiguos CS3 pueden salvar SVGZ!

Después de probar me encontré con un problema muy inesperado con el tipo de archivo SVGZ. (Probado en Chrome, Firefox e IE) Si va a la URL directa de la imagen, obtendrá un error. Supongo que no puede acceder al código SVG en estos tipos de archivos, pero después de hacer un violín, ni siquiera parece mostrar la imagen.

¿Son estos inútiles para la web?

.svg

.svgz

JSFIDDLE

adobe-illustrator website-design vector svg Josh Powell
fuente

Parece que podría tratarse en parte de un problema de configuración del servidor web .svgzque se servirá utilizando el tipo MIME correcto, consulte stackoverflow.com/questions/16725380/svgz-doesnt-display . Personalmente, siempre uso Raphael.js para SVG / gráficos vectoriales en la web porque necesito soporte para IE8

user56reinstatemonica8

Hmm, gracias por los enlaces muy útiles. ¿Hay alguna razón para usar un SVGZ? Pensé que tal vez sería bueno reducir el tamaño de un archivo de imagen. Tengo curiosidad por saber si un o SVGZes de alguna manera útil para la web o realmente útil de alguna manera.

Josh Powell el

Si funciona, reducirá bastante el tamaño del archivo. Esto podría ser útil si está utilizando la interactividad en algo complejo, por ejemplo, un mapa mundial SVG muy detallado que se puede ampliar. La zcompresión gzip significa que se utiliza para reducir el tamaño del archivo y prácticamente nada más.

user56reinstatemonica8

@JoshPowell: dado que la mayoría de los servidores http envían contenidos con compresión gzip, no veo el propósito de esta pregunta. Y con algunos servidores, si nombra su archivo .svg.gz, el navegador recibirá una información de que el archivo original no fue comprimido.

user2284570

Respuestas:

El soporte para svg comprimido variará según el navegador, pero debe configurar el servidor para que marque correctamente el archivo svgz con información sobre su codificación para decirle explícitamente al navegador cómo decodificarlo al recibirlo.

La respuesta del servidor para svgz debe configurarse para incluir "Codificación de contenido: gzip"

svg     Content-Type: image/svg+xml

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

Para un servidor web Apache, esto se puede lograr a través de un archivo .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Tenga en cuenta que si lo comprime sobre la marcha o lo hornea antes de colocarlo en el servidor, se debe insinuar la codificación de contenido. Para activos como este, creo que es mejor precomprimirlo. De lo contrario, está comiendo CPU del servidor para cada solicitud del archivo. Puede que esto no parezca mucho, pero este es el tipo de problema de no optimización que derriba, por ejemplo, el sitio web de atención médica de EE. UU.

horacio
fuente

Si su servidor o plataforma es inteligente, realizar la compresión allí está altamente optimizado, ya que puede almacenarse en caché. Este ciertamente no es el tipo de cosa que bloqueará su sitio, y mucho menos healthcare.gov.

Josh Koenig

Es posible que esta no sea la respuesta que espera, pero para la web, no es realmente necesario usar ningún archivo SVGZ. La razón es que un archivo SVGZ es simplemente un SVG que ha sido previamente Gziped.

Los servidores web modernos pueden hacer esto Gzipping ellos mismos antes de servir el activo (consulte esta respuesta en StackOverflow para obtener más información), por lo que si tiene un SVG de 300 KB que es de 50 KB cuando se comprime, será aproximadamente igual cuando el servidor web lo comprima automáticamente. Por lo tanto, no serán 300 KB más adelante, serán 50 KB y luego el navegador no los comprimirá.

Taylor Jasko
fuente

¿Estás seguro de que el archivo comprimido está en caché en alguna parte? Es mucho trabajo descomprimir estos recursos svg una y otra vez para 5000 visitantes.

bokan

@bokan: algunos servidores ofrecen la opción de precomprimir los contenidos agregando una extensión de archivo .gz. Entonces, si un cliente busca index.html, el servidor responderá con el archivo precomprimido llamado index.html.gz.

user2284570

@ user2284570: Entonces debes crear el .gz a mano. De lo contrario, comprimirá los archivos cada vez que los envíe, y eso es mucho trabajo para el servidor.

bokan

@bokan: Sí, y a menudo requiere mucha configuración de servidor adicional que la simple compresión de codificación de contenido. Incluso IE5 lo admite. Crear un script para comprimir todos los archivos estáticos dentro de un directorio sigue siendo simple. En el segundo caso, esto ahorra espacio en disco y ancho de banda.

user2284570