Tengo una imagen que estoy usando en un sitio web. Me gustaría usar un SVG para que sea de cualquier tamaño y se vea nítido.
- Este buzón contiene el archivo SVG y el archivo original de Illustrator.
Esta es una exportación JPEG:
El SVG tiene un tamaño de archivo mucho mayor que el JPG. ¿Es posible optimizar el SVG para que tenga un tamaño de archivo similar? Podría ser capaz de perder parte de la calidad si eso ayudara. He probado este optimizador SVG , pero no hay mucha diferencia.
Si guardo el archivo de ilustrador como un JPG, trazo el resultado y lo guardo como un SVG, entonces obtengo un tamaño de archivo mucho más pequeño pero alguna pérdida de calidad. Esto me hace pensar que quizás las capas en el original están causando el gran tamaño. ¿La imagen con la que estoy trabajando es demasiado compleja para ser adecuada para SVG?
Respuestas:
Su SVG contiene un gráfico de píxeles incrustado para la sombra en la parte inferior derecha del controlador. Esto es responsable de aproximadamente ⅔ del tamaño del archivo. Si lo elimina, su archivo SVG está a la par con su JPEG. Probablemente pueda lograr un efecto adecuadamente similar con un gradiente.
Otras técnicas para reducir el tamaño del archivo SVG incluyen:
A menos que esté utilizando absurdamente muchas capas (piense en una capa para cada objeto), las capas no deberían hacer una contribución relevante al tamaño del archivo, e incluso entonces, solo sería una fracción.
Si puede crear razonablemente una imagen desde cero, no debería ser demasiado compleja para el formato SVG. No existe un umbral de complejidad mágica más allá del cual explotan los tamaños de archivo (probablemente esto se cumple para cualquier formato vagamente razonable). Por supuesto, si solo elige la resolución suficientemente gruesa, puede exportar cada SVG a un JPEG que tenga un tamaño de archivo más pequeño. Pero eso no significa necesariamente que no deba usar SVG.
¹ Eso es en particular sin seguimiento y similar. Para dar un ejemplo extremo: si desea reproducir exactamente cada píxel de una fotografía con primitivas SVG (es decir, sin incrustar gráficos de píxeles en SVG), podría considerar que el resultado es demasiado complejo para ser representado de manera eficiente en el formato SVG . Pero eso es de esperar sentido común.
fuente
Como Wrzlprmft ya ha señalado, más del 50% del tamaño de su archivo SVG está ocupado por una imagen de mapa de bits PNG incrustada utilizada para crear un efecto de sombreado bastante sutil en el controlador. Simplemente deshacerse de esa imagen y reemplazarla con un simple degradado radial es suficiente para reducir el SVG a aproximadamente 10 kb.
Imagen original con sombreado de mapa de bits elegante a la izquierda, versión editada con degradado radial simple a la derecha.
Mientras lo hace, también debe verificar sus caminos para ver si hay algo que simplificar allí. No encontré mucho, pero el esquema de su controlador tiene algunos nodos adyacentes (cerca del medio superior e inferior) que se pueden combinar sin hacer ninguna diferencia visible.
Eso es un ahorro fácil del 50%, pero no nos detengamos todavía. Si sabe un poco sobre el formato SVG , puede hacer mucho mejor que eso.
Primero, ejecute "Vacuum Defs" en Inkscape para deshacerse de definiciones inútiles, y luego guarde la imagen como "SVG simple". Ahora, es hora de abrirlo en un editor de texto y ver de qué podemos deshacernos. Idealmente, debe usar un editor con una vista previa SVG integrada, para que pueda ver rápidamente qué efecto (con suerte, ninguno) tienen sus ediciones en la apariencia de la imagen. Yo uso emacs para eso, pero hay otros editores con características similares. .
De todos modos, con el archivo SVG abierto en su editor de texto, ¡comencemos a simplificarlo!
Justo en la parte superior, hay un gran inútil
<!-- comment -->
. Solo bórralo.Si está editando un SVG directamente desde Illustrator, también hay una
<!DOCTYPE ... >
línea inútil . Bórralo también.Inkscape insiste en pegar un bloque de metadatos RDF inútil en su imagen. Simplemente ubique la
<metadata ...>
etiqueta y elimínela, junto con todo, incluido el cierre</metadata>
.Además, incluso si guarda el archivo como "SVG simple", Inkscape todavía lo llena con un montón de atributos personalizados. Encuentre todos los atributos que comienzan con
inkscape:
osodipodi:
y elimínelos.Con los metadatos y los atributos específicos de Inkscape desaparecidos, puede eliminar todos los atributos de espacio de nombres XML no utilizados de la
<svg>
etiqueta. Debe ser seguro para eliminar al menosxmlns:rdf
,xmlns:dc
,xmlns:cc
,xmlns:inkscape
yxmlns:sodipodi
. Si hay unxmlns:svg
atributo redundante , elimínelo también. Los únicos atributos de espacio de nombres que debería haber dejado en este momento son:La
<svg>
etiqueta también tiene muchos otros atributos inútiles que puedes eliminar de forma segura, comoenable-background
yxml:space="preserve"
. (Los que se insertan por el exportador Illustrator SVG, Inkscape y no es lo suficientemente inteligente como para darse cuenta de que son inútiles.) ElviewBox
atributo también se puede quitar con toda seguridad esta imagen, ya que simplemente repite los valores de losx
,y
,width
yheight
atributos.También puede eliminar con seguridad los atributos
encoding
ystandalone
de la<?xml ... ?>
etiqueta.Ahora vamos a las entrañas de los datos de la imagen. Por alguna razón, Inkscape insiste en asignar
id
atributos a cada elemento, incluso si nunca se hace referencia a ellos. Cualquierid
atributo cuyo valor nunca se repita en otra parte del archivo (¡búsquelo!) Es seguro de eliminar. Básicamente, las únicas ID que debe mantener son las de los gradientes y, posiblemente, cualquier otro objeto (por ejemplo, rutas) que se encuentre dentro de las<defs>
secciones.Además, a Inkscape le gusta generar ID largos como
linearGradient4277
. Considere abreviar cualquier ID que no pueda simplemente eliminar en algo corto como en sulg1
lugar.También hay varias
<defs>
secciones una tras otra. Fusionarlos ahorra unos pocos bytes (y simplifica la estructura del documento en general).También hay varios grupos vacíos (
<g>
elementos) al final del archivo. Solo deshazte de ellos. También puede haber múltiples grupos consecutivos con exactamente el mismotransform
atributo (o ninguno); también es seguro fusionarlos.Por alguna extraña razón, Inkscape guarda una ruta Bezier redundante (
d
atributo) para los<circle>
elementos. Eso ocupa espacio sin ningún motivo, así que simplemente elimínelos. (Deje losd
atributos en los<path>
elementos; esos se usan realmente para algo).A Inkscape también le gusta usar CSS en
style
atributos donde los atributos más específicos serían más cortos, por ejemplo, reescribiendofill="#4888fa"
a los más detalladosstyle="fill:#4888fa"
. Puede guardar algunos bytes dividiendo esos estilos en atributos individuales (y eliminando los que simplemente repiten la configuración predeterminada de manera inútil), pero que requieren un poco más de familiaridad con el formato SVG que la mayoría de los cambios anteriores.Además, si hay algún
<use ... >
elemento, puede guardar algunos bytes reemplazándolos con el elemento real al que están vinculando. (Por supuesto, esto solo ahorra espacio si los elementos vinculados solo se usan una vez). También parece que a Inkscape le gusta definir gradientes circulares indirectamente, primero definiendo las paradas en a<linearGradient>
y luego haciendo referencia a ellas en a<radialGradient>
; puede simplificar eso moviendo las paradas directamente dentro del gradiente radial y deshaciéndose del gradiente lineal ahora no utilizado. Como beneficio adicional, si, al hacer esto, logró deshacerse de todos losxlink:href
atributos, puede eliminar elxmlns:xlink
atributo de la<svg>
etiqueta.Si realmente desea exprimir hasta el último byte adicional, busque valores numéricos con demasiados decimales y redongalos a algo más sensato. Aquí es donde la vista previa en vivo realmente ayuda, ya que le permite ver cuánto puede redondear el valor antes de que comience a ser visible. Sin embargo, incluso si no desea probar cuidadosamente cada número para ver cuánto se puede redondear, al menos puede elegir fruta baja como, por ejemplo, redondear un valor de
1.0000859
píxeles a solo1
.Finalmente, limpie la sangría y el espacio en blanco en el archivo. Para minimizar absolutamente el recuento de bytes, necesitaría poner todo en una línea (o al menos, solo poner saltos de línea delante de los atributos, donde el espacio en blanco se requiere de todos modos), pero eso es realmente difícil de leer. Aún así, es posible lograr un equilibrio decente entre legibilidad y compacidad con una sangría simple y conservadora.
De todos modos, esto es lo que logré editar manualmente en tu imagen SVG:
Esta imagen SVG parece casi indistinguible de la segunda imagen de ejemplo anterior, y solo ocupa 5189 bytes, considerablemente menos que su imagen JPEG. Estoy seguro de que podría optimizarse aún más, pero esto es realmente solo un ejemplo de lo que puede hacer en unos minutos con la práctica. (Me tomó mucho más tiempo escribir esta respuesta que editar el código SVG).
Finalmente, al comprimir este código SVG con gzip lo reduce a solo 1846 bytes (!), Apenas un cuarto del tamaño de su versión JPEG.
fuente
Estoy un poco sorprendido de que nadie haya mencionado la extensión " Scour ". Se incluye con Inkscape (a partir de v0.47), y hace muchas de las optimizaciones mencionadas por Ilmari Karonen.
fuente
Puede convertirlo a un SVG comprimido (SVGZ) y poner el image.svgz en su página web:
O, en Adobe Illustrator, simplemente guarde como "SVG comprimido", que escribirá un archivo image.svgz.
Sin embargo, para su imagen de prueba todavía es más grande que el JPG:
fuente
Recientemente encontré una herramienta en https://petercollingridge.appspot.com/svg-editor ( código fuente ) que ayuda a optimizar los archivos SVG. Tiene buenos resultados en este caso, reduciendo el tamaño del archivo a 3.7kB, que es un poco más de la mitad del tamaño del JPG, con un pequeño ajuste manual:
El uso de esta herramienta para optimizar archivos SVG requiere mucho menos tiempo que jugar al golf manualmente.
fuente
SVGOMG! es una aplicación web impresionante para la optimización de SVG
Según el creador de la aplicación, SVGOMG es la " M U G GI de SVGO ".
Ejecutarlo en la imagen proporcionada lo reduce a justo
3.42kb
y justo1.4kb
después de ser comprimido.fuente
<radialGradient>
y<path>
desde mi código optimizado a mano, SVGOMG optimiza la imagen resultante de 5.8 kB a 4.02 kB (4.11 kB prettified), y parece hacer un trabajo bastante completo; Realmente no veo ninguna oportunidad obvia perdida. (Jugando un poco más, me di cuenta de que a veces no se fusionan grupos consecutivos con atributos idénticos; Inkscape a veces parece generarlos, por ejemplo, al ajustar la página para que se ajuste al dibujo).