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

Como ya ha señalado Wrzlprmft, más del 50 % del tamaño de su archivo SVG lo ocupa una imagen de mapa de bits PNG incrustada que se utiliza para crear un efecto de sombreado bastante sutil en el controlador. Simplemente deshacerse de esa imagen y reemplazarla con un degradado radial simple es suficiente para reducir el SVG a unos 10 kb.

               
^{Imagen original con elegante sombreado de mapa de bits a la izquierda, versión editada con degradado radial simple a la derecha.}

Mientras está en eso, también debe verificar sus rutas para ver si hay algo que simplificar allí. No encontré mucho, pero el contorno de su controlador tiene algunos nodos adyacentes (cerca de la mitad superior e inferior) que se pueden fusionar sin hacer ninguna diferencia visible.

Eso es un ahorro fácil del 50% allí mismo, pero no nos detengamos todavía. Si sabe un poco sobre el formato SVG , puede hacerlo mucho mejor que eso.

Primero, ejecute "Definiciones de vacío" en Inkscape para deshacerse de las definiciones inútiles y luego guarde la imagen como "SVG simple". Ahora es el momento 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 existen 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. Eliminarlo 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 hasta el cierre incluido </metadata>.

• Además, incluso si guarda el archivo como "SVG simple", Inkscape aún lo llena con un montón de atributos personalizados. Encuentre todos los atributos que comiencen 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. Debería ser seguro eliminar al menos xmlns:rdf, xmlns:dc, xmlns:ccy . Si hay un atributo redundante, elimínelo también. Los únicos atributos de espacio de nombres que debería haber dejado en este punto son:xmlns:inkscapexmlns:sodipodixmlns:svg

  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 puede eliminar de forma segura, como enable-backgroundy xml:space="preserve". (Los inserta el exportador SVG de Illustrator, e Inkscape no es lo suficientemente inteligente como para darse cuenta de que son inútiles). El viewBoxatributo también se puede eliminar de forma segura de esta imagen, ya que solo repite los valores de los atributos , xy y.widthheight

• También puede eliminar de forma segura los atributos encodingy de la etiqueta.standalone<?xml ... ?>

• Ahora vayamos 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 identificaciones que debe conservar son las de los degradados y posiblemente las de cualquier otro objeto (p. ej., rutas) que se encuentre dentro de <defs>las secciones.

• Además, a Inkscape le gusta generar identificaciones largas como linearGradient4277. Considere abreviar cualquier ID que no pueda simplemente eliminar en algo corto como lg1en su lugar.

• También hay varias <defs>secciones una detrás de la otra. Combinarlos 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 varios 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 ninguna razón, así que simplemente elimínelos. (Deje los datributos de los <path>elementos; esos se usan 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 ahorrar algunos bytes dividiendo esos estilos en atributos individuales (y eliminando los que simplemente repiten inútilmente la configuración predeterminada), pero eso requiere un poco más de familiaridad con el formato SVG que la mayoría de los cambios anteriores.

• Además, si hay <use ... >elementos, es posible que pueda guardar algunos bytes reemplazándolos con el elemento real al que se vinculan. (Por supuesto, esto solo ahorra espacio si los elementos vinculados solo se usan una vez). También parece que a Inkscape le gusta definir degradados 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 degradado radial y deshaciéndose del degradado lineal que ahora no se usa. 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 redondéelos 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 frutas al alcance de la mano como, por ejemplo, redondear un valor de 1.0000859píxeles a solo 1.

• Finalmente, limpie la sangría y los espacios en blanco en el archivo. Para minimizar absolutamente el conteo de bytes, necesitaría poner todo en una línea (o al menos, solo poner saltos de línea delante de los atributos, donde se requieren espacios en blanco de todos modos), pero eso es realmente difícil de leer. Aún así, es posible lograr un equilibrio decente entre la legibilidad y la compacidad con una sangría simple y conservadora.

De todos modos, esto es lo que logré editar a mano 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 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, comprimir este código SVG con gzip lo reduce a solo 1846 bytes (!), apenas un cuarto del tamaño de su versión JPEG.

Su SVG contiene un gráfico de píxeles incrustado para la sombra en la parte inferior derecha del controlador. Esto es responsable de alrededor de ⅔ 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 degradado.

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 falsos en la forma de su controlador.

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

A menos que esté utilizando muchas capas absurdas (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 mágico de complejidad más allá del cual explotan los tamaños de los archivos (probablemente esto sea válido para cualquier formato vagamente razonable). Por supuesto, si solo elige la resolución lo 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 debas usar SVG.

^{¹ Eso es en particular sin seguimiento y similares. 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, con suerte, sentido común.}

Estoy un poco sorprendido de que nadie haya mencionado la extensión " Scour ". Se incluye con Inkscape (a partir de la v0.47) y realiza muchas de las optimizaciones mencionadas por Ilmari Karonen.

Puede convertirlo a un SVG comprimido (SVGZ) y colocar la imagen.svgz en su página web:

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

O, en Adobe Illustrator, simplemente guárdelo como "SVG comprimido", que escribirá un archivo image.svgz.

Sin embargo, para su imagen de prueba, aún es más grande que el JPG:

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

SVGOMG! es una aplicación web impresionante para la optimización de SVG

Según el creador de la aplicación, SVGOMG es la " G UI perdida " de SVGO .

Ejecutarlo en la imagen provista lo reduce a solo 3.42kb, y justo 1.4kbdespués de ser comprimido con gzip.

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 los archivos SVG requiere mucho menos tiempo que jugar al golf manualmente.