¿Puedo reducir el tamaño de archivo de un SVG para estar más cerca de su equivalente JPEG?

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?

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:

• Eliminar todos los metadatos y similares. Inkscape tiene Guardar como SVG simple para esto. Supongo que otros programas tienen algo similar.
• Elimine los nodos que agregan poco a las formas, por ejemplo, hay nodos espurios en la forma de su controlador.

Esto me hace pensar que quizás las capas en el original están causando el gran tamaño.

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.

¿La imagen con la que estoy trabajando es demasiado compleja para ser adecuada para SVG?

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

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:o sodipodi: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 menos xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapey xmlns:sodipodi. Si hay un xmlns:svgatributo redundante , elimínelo también. Los únicos atributos de espacio de nombres que debería haber dejado en este momento son:

  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"

• La <svg>etiqueta también tiene muchos otros atributos inútiles que puedes eliminar de forma segura, como enable-backgroundy xml: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.) El viewBoxatributo también se puede quitar con toda seguridad esta imagen, ya que simplemente repite los valores de los x, y, widthy heightatributos.

• También puede eliminar con seguridad los atributos encodingy standalonede la <?xml ... ?>etiqueta.

• Ahora vamos a las entrañas de los datos de la imagen. Por alguna razón, Inkscape insiste en asignar idatributos a cada elemento, incluso si nunca se hace referencia a ellos. Cualquier idatributo 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 su lg1lugar.

• 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 mismo transformatributo (o ninguno); también es seguro fusionarlos.

• Por alguna extraña razón, Inkscape guarda una ruta Bezier redundante ( datributo) para los <circle>elementos. Eso ocupa espacio sin ningún motivo, así que simplemente elimínelos. (Deje los datributos en los <path>elementos; esos se usan realmente para algo).

• A Inkscape también le gusta usar CSS en styleatributos donde los atributos más específicos serían más cortos, por ejemplo, reescribiendo fill="#4888fa"a los más detallados style="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 los xlink:hrefatributos, puede eliminar el xmlns:xlinkatributo 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.0000859píxeles a solo 1.

• 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:

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></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.

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.

Puede convertirlo a un SVG comprimido (SVGZ) y poner el image.svgz en su página web:

gzip image.svg
mv image.svg.gz image.svgz

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:

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes

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.

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.42kby justo 1.4kbdespués de ser comprimido.