Consejo rápido menos nodos = encendedor SVG

Recientemente me encontré jugando en el sitio snap.svg (échale un vistazo si aún no lo has usado). Tiene un fondo de polígono SVG realmente agradable en el encabezado, que pesa apenas 2.2Kb. Porque soy raro, decidí intentarlo y hacerlo más pequeño..

En ilustrador

El archivo SVG se ve así cuando se abre en Illustrator:

A continuación, si marca la vista de esquema (Ver> Esquema) ve todas las rutas vectoriales dispuestas sin colores de relleno:

“¡Qué desastre!” Pensé: “Estoy seguro de que puedo arreglar eso y reducir el tamaño del archivo”. Así que me dediqué a limpiar las líneas para eliminar todas las superposiciones innecesarias.. 

Misterioso

Con el Pionero herramienta que puede utilizar objetos para "cortar" su forma de los objetos que se encuentran debajo. De esta manera, puede evitar que las formas se superpongan, en lugar de crear un efecto más "rompecabezas".

De esto… … a esto

Mucho mejor. Una vez que hice lo mismo con toda la ilustración, estaba mirando esto:

Estaba equivocado

Al hacer esto, el tamaño del archivo no se redujo, creció. Mientras que el original pesaba 2.217Kb, la nueva versión pesaba 2.269Kb. Una pequeña diferencia en términos reales, pero el "ordenamiento" de las cosas ha hecho que el archivo sea más pesado. En un gráfico más grande, el efecto podría haber hecho una gran diferencia.

¿Pero por qué? Todo se reduce a nodos, o anclajes; Las articulaciones a lo largo de un camino vectorial. Los archivos SVG no son más que datos XML, y cada nodo a lo largo de una ruta requiere coordenadas adicionales. El archivo original puede haber sido construido a partir de un montón de triángulos superpuestos, pero estratificación no cuesta en absoluto el tamaño del archivo (cualquier objeto dentro de un documento XML se muestra inherentemente en orden). Lo que creó el tamaño extra fue que hice polígonos cuadriláteros (cuatro lados) a partir de los triángulos. Ups.

Así es como se ven como código SVG, primero uno de los originales:

Y ahora una de mis formas "mejoradas":

Más datos. Simple como eso.

Limpia tus nodos

La lección para llevar de esto es eliminar los nodos no deseados de sus archivos SVG, pero no se preocupe por la superposición. La eliminación de nodos es la forma número uno de reducir la complejidad y, por lo tanto, el tamaño del archivo.

Utilizar el Eliminar herramienta de punto de anclaje (-) para eliminar un ancla de un camino. ¡Se sorprenderá de la cantidad de anclajes que necesita una ruta vectorial y al mismo tiempo conserva su forma! Un ancla bien colocada hará el trabajo de tres mal pensadas.

Puntos perdidos

Un último consejo es eliminar los puntos perdidos de su SVG. Los puntos extraviados a menudo son invisibles porque no se pueden rellenar, pero le costarán todos los datos. En Illustrator, vaya a Seleccionar> Objeto> Puntos perdidos para seleccionarlos todos, luego pulsa borrar para eliminarlos.

Puntos de anclaje perdidos molestos

Espero que hayas aprendido algo de esto! Es una de esas cosas aparentemente obvias que nunca había pensado antes. Te tuve?