25: Optimización manual de SVG en Illustrator - Trucos CSS

Anonim

El video fue eliminado en este. Lo volveré a disparar algún día pronto. Si estás leyendo esto y todavía no lo he hecho, no dudes en ponerte en contacto conmigo y molestarme al respecto.

A veces, el SVG que desea usar se ve perfectamente bien en Illustrator, pero no es exactamente como le gustaría usarlo en la web.

Una de las cosas que vemos en este video es una forma simple que parece ser una forma única, pero en realidad son cuatro formas colocadas una encima de la otra. Para simplificar eso, simplemente seleccionamos todas las formas y usamos las herramientas Buscatrazos en Illustrator para combinarlas en una sola forma. Podemos ver eso reflejado inmediatamente en el código. A veces es un poco divertido tener el archivo SVG abierto tanto en Illustrator como en un editor de código para que, al guardarlo, pueda ver lo que le está haciendo al código.

El Pathfinder es ideal para la optimización manual de formas; vale la pena conocer qué hacen esos botones y qué hacen con la tecla de opción presionada también.

El tamaño de un archivo SVG está, en gran medida, determinado por la cantidad de puntos que ocurren en las formas. Hay otros factores, pero ese es el problema. Otra cosa que vemos en este video es el uso de la función Simplificar ruta de Illustrators para reducir el número de puntos en algunas formas con textura para reducir el tamaño del archivo.

Otra cosa que debe saber: las rutas compuestas pueden ser útiles. Dos formas que están totalmente separadas entre sí pueden seguir siendo un camino. Como, literalmente uno. La sintaxis permite esencialmente "coger el bolígrafo, moverlo a otro lugar, dibujar algo nuevo". Entonces, cuando crea una ruta compuesta en Illustrator (por ejemplo, múltiples formas independientes, Objeto> Ruta compuesta> Crear), así es como sale. Puede conducir a una salida SVG simplificada / optimizada.