optimizador - Minimizando el tamaño del archivo SVG

optimizar svg

Question

Estoy guardando imágenes de mapas creadas en Adobe Illustrator como documentos .svg. ¿Cuáles son algunos consejos y trucos para hacer que el tamaño del archivo sea lo más pequeño posible?

Answer 1

1. Desactive "Preserve Illustrator Editing Capabilities", que incluye un enorme blob pseudo-binario propietario en su archivo.

2. GZIP su contenido (ya sea explícitamente, oa través de la configuración de su servidor web) cuando los agentes de usuario que desea ver su trabajo lo admiten.
   SVG es XML, y por lo tanto texto, y por lo tanto bastante compresible.

3. Reducir la precisión numérica innecesaria. (Puede hacer esto con la configuración de "Lugares decimales" al guardar desde Illustrator o mediante el procesamiento posterior de su archivo para reducir la precisión).
   Por ejemplo, las dos rutas siguientes son indistinguibles visualmente:

   <path d="M102.6923828,391.6152344
    c56.8027344,115.9394531-3.8457031-246.1542969,105.3847656-217.6923828
    s218.4609375-53.0766602,243.8457031,40.7695313
    S541.9228516,411.6152344,435,527s-166.1538086,58.4609375-213.8461914-50
    C173.4614258,368.5385742,46.5385742,277,102.6923828,391.6152344z"
   
   <path d="M102.7,391.6c56.8,115.9-3.8-246.2,105.4-217.7s218.5-53.1,243.8,40.8
    s90,196.9-16.9,312.3s-166.2,58.5-213.8-50C173.5,368.5,46.5,277,102.7,391.6z"

4. Factoriza los estilos repetidos basados ​​en atributos en estilos comunes basados ​​en CSS o en entidades.
   Por ejemplo, puede reemplazar

   <rect fill="red" stroke="black" stroke-width="10px"   ... />
   <circle fill="red" stroke="black" stroke-width="10px" ... />

   con

   .bold { fill:red; stroke:black; stroke-width:10px }
   <!-- ... -->
   <rect class="bold"   ... />
   <circle class="bold" ... />

5. Factorizar transformaciones repetidas en elementos agrupados.
   Por ejemplo, reemplazar

   <rect   transform="translate(102,-64) rotate(10.23)" ... />
   <circle transform="translate(102,-64) rotate(10.23)" ... />

   con

   <g transform="translate(102,-64) rotate(10.23)">
     <rect ... />
     <circle ... />
   </g>