Cómo simplificar el código SVG usando formas básicas

Hay diferentes formas de trabajar con íconos, pero la mejor solución siempre incluye SVG, ya sea implementada en línea o vinculada como un archivo de imagen. Esto se debe a que están “dibujados” en código, lo que los hace flexibles, adaptables y escalables en cualquier contexto.

Pero cuando se trabaja con SVG, siempre existe la posibilidad de que contenga una gran cantidad de código innecesario. En algunos casos, el código para un SVG en línea puede ser tan largo que hace que el desplazamiento del documento sea más largo, incómodo para trabajar y, sí, un poco más pesado de lo necesario.

Podemos solucionar esto reutilizando fragmentos de código con el useelemento o aplicar variables nativas para administrar nuestros estilos SVG desde un solo lugar. O, si estamos trabajando en un entorno del lado del servidor, siempre podemos agregar un poco de PHP (o similar) para extraer el contenido del archivo SVG en lugar de colocarlo directamente.

Todo eso está bien, pero ¿no sería genial si pudiéramos resolver esto a nivel de archivo en lugar de recurrir a enfoques basados ​​en código? Quiero centrarme en una perspectiva diferente: cómo hacer las mismas figuras con menos código usando formas básicas . De esta manera, obtenemos los beneficios de íconos más pequeños, controlables y semánticos en nuestros proyectos sin sacrificar la calidad ni los cambios visuales. Revisaré diferentes ejemplos que explorarán el código de íconos de uso común y cómo podemos redibujarlos usando algunas de las formas SVG más fáciles que podemos crear.

Estos son los íconos en los que trabajaremos:

Veamos las formas básicas que podemos usar para crearlas que mantengan el código pequeño y simple.

Psssst! ¡Aquí hay una lista más larga de íconos simples que creará en holasvg.com! Después de este artículo, sabrás cómo modificarlos y hacerlos tuyos.

Simplificando un icono de cierre con el lineelemento

Este es el código para el ícono de “cerrar” o “cruz” que se descargó de flaticon.com y fue creado por pixel-perfect:

En este ejemplo, todo sucede dentro pathde muchos comandos y parámetros en el atributo de datos ( d). Lo que hace este SVG es trazar la forma desde sus bordes.

Si está familiarizado con Illustrator, esto equivale a dibujar dos líneas separadas, convertirlas en formas y luego combinarlas con el buscador de caminos para crear una forma compuesta.

El pathelemento nos permite dibujar formas complejas, pero en este caso podemos crear la misma figura con dos líneas, manteniendo la misma apariencia:

svg  viewBox="0 0 50 50" overflow="visible" stroke="black" stroke-width="10" stroke-linecap="round"   line x1="0" y1="0" x2="50" y2="50" /   line x1="50" y1="0" x2="0" y2="50" //svg

Empezamos definiendo un viewBoxque va de 0,0 a 50,50. Puedes elegir las dimensiones que prefieras; el SVG siempre se escalará bien a cualquier ancho y alto que defina. Para facilitar las cosas, en este caso también definí un ancho y alto en línea de 50 unidades, lo que evita cálculos adicionales en el dibujo.

Para utilizar el lineelemento, declaramos las coordenadas del primer punto de la línea y las coordenadas de su último punto. En este caso específico, comenzamos desde x=0 y=0y terminamos en x=50 y=50.

Así es como se ve en el código:

line x1="0" y1="0" x2="50" y2="50" /

La segunda línea comenzará x=50 y=0y terminará en x=0 y=50:

line x1="50" y1="0" x2="0" y2="50" /

Un trazo SVG no tiene un color de forma predeterminada; es por eso que agregamos el blackvalor en el strokeatributo. También le dimos al stroke-widthatributo un ancho de 10 unidades y un stroke-linecapvalor roundpara replicar esas esquinas redondeadas del diseño original. Estos atributos se agregaron directamente a la svgetiqueta para que ambas líneas los hereden.

svg ... stroke="black" stroke-width="10" stroke-linecap="round" ...

Ahora que el trazo es 10 unidades más grande que su tamaño predeterminado de 1 unidad, es posible que la línea se recorte con el archivo viewBox. Podemos mover los puntos 10 unidades dentro viewBoxo agregar overflow=visibleestilos.

Los valores iguales a 0 se pueden eliminar, ya que 0 es el valor predeterminado. Eso significa que las dos líneas terminan con dos líneas de código muy pequeñas:

line x2="50" y2="50" /line x1="50" y2="50" /

Con solo cambiar a patha line, no solo creamos un archivo SVG más pequeño, sino también un fragmento de código más semántico y controlable que hace que cualquier mantenimiento futuro sea mucho más fácil. Y el resultado visual es exactamente igual al original.

Misma cruz, diferente código.

Simplificando un icono de reloj con los elementos circleypath

Tomé este ejemplo de un ícono de reloj creado por barracuda de The Noun Project:

Esta forma también se dibujó con path, pero también tenemos muchos espacios de nombres e instrucciones XML relacionadas con el software utilizado y la licencia del archivo que podemos eliminar sin afectar el SVG. ¿Puedes decirnos qué editor de ilustraciones se utilizó para crear el ícono?

Recreemos este desde cero usando un círculo y un camino con comandos más simples. Nuevamente, necesitamos comenzar con viewBox, esta vez de 0,0 a 100,100, y con un ancho y alto que coincidan con esas unidades.

svg  viewBox="0 0 100 100" fill="none" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"  circle cx="50" cy="50" r="40"/  path d="M50 25V50 H75" / /svg

Mantenemos los mismos estilos que el icono anterior dentro de la svgetiqueta. filles blackel valor predeterminado, por lo que debemos darle explícitamente un nonevalor para eliminarlo. De lo contrario, el círculo tendrá un relleno negro sólido, oscureciendo las otras formas.

Para dibujar circlenecesitamos indicar un punto central desde donde se ubicará el radio. Podemos lograr eso con cx(centro x) y cy(centro y). Entonces r(radio) declarará qué tan grande será nuestro círculo. En este ejemplo, el radio es ligeramente más pequeño que el viewBox, por lo que no se recorta cuando el trazo tiene 10 unidades de ancho.

¿Qué pasa con todas esas cartas? Consulte la guía ilustrada de Chris Coyier para obtener una introducción a la sintaxis SVG.

Podemos usar a pathpara las manecillas del reloj porque tiene algunos comandos muy útiles y sencillos para dibujar. Dentro de d(datos) debemos comenzar con el Mcomando (mover a) seguido de las coordenadas desde donde comenzaremos a dibujar que, en este ejemplo, es 50,25 (cerca de la parte superior central del círculo).

Después del Vcomando (vertical), solo necesitamos un valor ya que solo podemos movernos hacia arriba o hacia abajo con un número negativo o positivo. Un número positivo bajará. Lo mismo para H(horizontal) seguido de un número positivo, 75, que se dibujará hacia la derecha. Todos los comandos están en mayúsculas, por lo que los números que elijamos serán puntos en la cuadrícula. Si decidimos usar minúsculas (comandos relativos) los números serán la cantidad de unidades que nos movemos en una dirección y no un punto absoluto en el sistema de coordenadas.

Mismo reloj, diferente código.

Simplificando un icono de sobre con los elementos rectypolyline

Dibujé el ícono del sobre en Illustrator sin expandir las formas originales. Aquí está el código que surgió de la exportación:

Illustrator ofrece algunas opciones SVG para exportar el gráfico. Elegí "Elementos de estilo" en el menú desplegable "Propiedades CSS" para poder tener una styleetiqueta que contenga clases que quizás desee mover a un archivo CSS. Pero, por supuesto, existen diferentes formas de aplicar los estilos en SVG.

¡Ya tenemos formas básicas en este código! Deseleccioné la opción "Dar forma a los trazados" en Illustrator, lo que me ayudó mucho. Podemos optimizar esto aún más con SVGOMG para eliminar comentarios, instrucciones XML y datos innecesarios, como elementos vacíos. Desde allí podremos eliminar manualmente otros extras, si es necesario.

Ya tenemos algo un poco más conciso:

svg version="1.1"  x="0" y="0" viewBox="0 0 310 190" xml_space="preserve"  style.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}  /stylerect x="5" y="5"/  polyline points="5 5 155 110 305 5"//svg

Podemos eliminar aún más cosas sin afectar la apariencia visual del sobre, incluyendo:

• version="1.1"(esto ha quedado obsoleto desde SVG 2)
• id="Layer_1"(esto no tiene significado ni utilidad)
• x="0"(este es un valor predeterminado)
• y="0"(este es un valor predeterminado)
• xml:space="preserve"(esto ha quedado obsoleto desde SVG 2)

svg  x="0" y="0" viewBox="0 0 310 190"  style.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}  /style  rect x="5" y="5"/  polyline points="5 5 155 110 305 5"//svg

Podemos mover los estilos CSS a una hoja de estilo separada si realmente queremos ser realmente agresivos.

rectnecesita un punto de partida desde donde extenderemos un ancho y un alto, así que usemos x="5"y y="5"cuál es nuestro punto superior izquierdo. A partir de ahí, crearemos un rectángulo de 300 unidades de ancho con una altura de 180 unidades. Al igual que el ícono del reloj, usaremos 5,5 como punto de partida porque tenemos un trazo de 10 unidades que se recortará si las coordenadas estuvieran ubicadas en 0,0.

polylinees similar a line, pero con una cantidad infinita de puntos que definimos, como pares de coordenadas, uno tras otro, dentro del atributo puntos, donde el primer número del par representará xy el segundo será y. Es más fácil leer la secuencia con comas, pero se pueden reemplazar con espacios en blanco sin afectar el resultado.

Mismo sobre, diferente código.

¡Formas extra!

No incluí ejemplos de íconos que se pueden simplificar polygony ellipseformas, pero aquí hay una forma rápida de usarlos.

polygones lo mismo que polyline, solo que este elemento siempre definirá una forma cerrada. Aquí hay un ejemplo que viene directamente de MDN:

¿Recuerdas el círculo que dibujamos antes para el ícono del reloj? Reemplace el r(radio) con rxy ry. Ahora tienes dos valores diferentes para el radio. Aquí hay otro ejemplo de MDN:

Terminando

¡Cubrimos mucho aquí en poco tiempo! Si bien usamos ejemplos para demostrar el proceso de optimización de SVG, esto es lo que espero que termines con esta publicación:

• Recuerde que la compresión comienza con cómo se dibuja el SVG en el software de ilustración.
• Utilice las herramientas disponibles, como SVOMG, para comprimir SVG.
• Elimine los metadatos innecesarios a mano, si es necesario.
• Reemplace caminos complejos con formas básicas.
• usees una excelente manera de “integrar” SVG, así como de establecer su propia biblioteca de íconos reutilizables.

¿Cuántos íconos se pueden crear combinando estas formas básicas?

Estoy trabajando en mi lista en holasvg.com/icons, constantemente estaré subiendo más íconos y funciones aquí, y ahora sabes cómo modificarlos fácilmente con solo cambiar algunos números. ¡Anímate y hazlos tuyos!