Yendo más allá de la compresión SVG automática con el elemento “use”

Si dibuja sus propios archivos SVG o los descarga de Internet, herramientas como este Editor SVG o SVGOMG son sus amigas. Comprime los archivos con esas herramientas solo toma unos segundos y reduce mucho el tamaño del archivo. Pero si necesitas usar su SVG en línea para animar o interactuar con el código, todavía hay mucho que puedes hacer con respecto a la legibilidad del código.

Reutilizar contenido con SVG useno siempre es una opción, pero cuando lo es, no te arrepentirás de tomarte unos minutos extra para ponerlo en práctica.

En este artículo, mostraré un ejemplo en el que pude aprovechar mucho este elemento, no solo para mantener el tamaño del archivo bajo, sino también para un marcado más claro que se volvió más legible y fácil de mantener.

Este es el primer diseño con el que necesitaba trabajar. Fue creado originalmente en Illustrator:

Eche un vistazo al siguiente código, este es el archivo original exportado directamente desde el software, pesa 2,05 kb:

No es un archivo pesado en absoluto. Sin embargo, ábrelo y encontrarás muchas etiquetas vacías, espacios de nombres obsoletos, espacios en blanco innecesarios, comas e información adicional aplicada por el software. Esto hace que sea difícil trabajar con el código, molesto de escanear y crea un gran desplazamiento para esos cientos de líneas en su documento.

También notarás que el archivo utiliza efectivamente elementos usey defs, pero no de la mejor manera que podría. ¡Y eso no es culpa del software! Cada ilustración de astronauta del archivo original tiene una máscara de recorte: un círculo invisible que actúa como una ventana a través de la cual podemos ver a nuestro personaje. Sin él, el traje del astronauta se saldría del círculo. Hay algunas formas de evitar esto en Illustrator, como recortar esas partes adicionales con una opción de buscador de ruta. De esa forma ganaríamos unos cuantos bytes y evitaríamos usar un círculo extra sólo para recortar información del gráfico que no mostraremos. La compresión del archivo comienza en el software. Aún así, hay muchas cosas que podremos mejorar en el código en caso de que no queramos editar el archivo original.

Comprima el SVG con SVGOMG y mantenga las opciones predeterminadas sin exigir ningún esfuerzo y obtendrá un archivo que pesa 1,46 kb . Eso es una reducción del 30% en comparación con el tamaño original y el gráfico se verá exactamente igual.

Reutilizar contenido

Esto analizará el SVG y realizará algunos ajustes. Sé que esta opción lleva más tiempo que el ejemplo anterior, pero no es tan difícil como parece.

Tenemos un elemento repetido, que es el astronauta dentro del círculo. Ese es el que comprimiremos en SVGOMG. El resultado se verá así:

svg xmlns_xlink="https://www.w3.org/1999/xlink" viewBox="0 0 95.8 95.8"style.st3,.st4{fill:#ffcb2f;stroke:#12192c;stroke-width:1.4891;stroke-miterlimit:10}.st4{fill:#69b2b1}/stylecircle cx="47.9" cy="47.9" r="47.9" fill="#12192c"/ circle cx="47.9" cy="47.9" r="40.7" fill="#f6a2a4"/ defscircle cx="47.9" cy="47.9" r="40.7"//defs clipPathuse xlink_href="#SVGID_1_" overflow="visible"//clipPathg clip-path="url(#SVGID_2_)" path d="M63.9 45.6H32c-4 0-7.2 1.9-7.3 4.3l-.8 26.6H72l-.8-26.6c-.2-2.5-3.4-4.3-7.3-4.3z"/ path d="M74.3 86.9L66 88.2C53.8 90 41.4 90 29.1 88.1l-7.7-1.2v-14c0-4 3.2-7.2 7.2-7.2h38.5c4 0 7.2 3.2 7.2 7.2v14z"/ path d="M31.8 47.3h-.6c-.7 0-1.2-.6-1.2-1.2V23.2c0-.7.6-1.2 1.2-1.2h.6c.7 0 1.2.6 1.2 1.2v22.9c0 .7-.6 1.2-1.2 1.2z"/ circle cx="31.5" cy="20.7" r="2.8"/ circle cx="47.9" cy="51.4" r="20.3"/ path d="M64.5 53.1c0 8-7.4 11.2-16.5 11.2S31.4 61 31.4 53.1s7.4-14.4 16.5-14.4 16.6 6.4 16.6 14.4z" fill="#13192d" stroke="#12192c" stroke-width="1.489" stroke-miterlimit="10"/ path fill="none" stroke="#12192c" stroke-width="1.489" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="9.6793,3.7228" d="M65.9 88V76.9"/ path fill="none" stroke="#12192c" stroke-width="1.489" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M29.6 87.9v-11"/ /g /svg

Primeras recomendaciones:

1. Mueva el stylecontenido al archivo CSS (suponiendo que pueda usar su SVG en línea y que tenga una hoja de estilo vinculada en su documento).
2. Cambie el nombre de las identificaciones con algo que tenga sentido para usted.
3. Redondea esos números complicados, stroke-width="1.489"como stroke-width="1.5". Esto es algo que podría suceder si cambia el tamaño de sus vectores en Illustrator con la opción de escalar bordes marcados.
4. Retiramos el stroke-miterlimit="10"ya que no lo necesitamos ya que el nuestro stroke-linejoines redondo.
5. Este código será nuestra plantilla de astronauta. Necesitamos envolver todo en un grupo, agregar una identificación a ese grupo y colocarlo dentro de una defsetiqueta. Observa que ya tenemos un defselemento con un círculo dentro. Podemos eliminar esa ya que será parte de una defsetiqueta más grande.

Observe que los dos primeros círculos son formas rellenas con diferentes radios y colores. Podemos mantener el más pequeño y agregar un trazo lo suficientemente grande para lograr el mismo efecto; Nuevamente, algo que podríamos evitar al usar un círculo con borde en Illustrator en primer lugar.

Otra cosa importante es que nuestro viewBox actual es demasiado pequeño para lo que queremos construir. Hagámoslo más grande y agregamos algo de espacio negativo en el eje X para que podamos comenzar a clonar a nuestra astronauta desde el medio.

Para obtener más información sobre viewBox, consulte esta hermosa guía para escalar SVG de Amelia Wattenberger.

Terminaremos con algo como esto:

svg xmlns_xlink="https://www.w3.org/1999/xlink" viewBox="-400 0 1000 5000" defs g circle cx="94.5" cy="48" r="44" fill="currentColor" stroke="#12192c" stroke-width="8"/clipPathcircle cx="94.5" cy="47.9" r="40"//clipPath g clip-path="url(#a)"path d="M110.5 45.6H78.6c-4 0-7.2 1.9-7.3 4.3l-.8 26.6h48.1l-.8-26.6c-.1-2.5-3.4-4.3-7.3-4.3z"/path d="M121 86.9l-8.3 1.3C100.4 90 88 90 75.8 88.1l-7.7-1.2v-14c0-4 3.2-7.2 7.2-7.2h38.5c4 0 7.2 3.2 7.2 7.2v14z"/path d="M78.4 47.3h-.6c-.7 0-1.2-.6-1.2-1.2V23.2c0-.7.6-1.2 1.2-1.2h.6c.7 0 1.2.6 1.2 1.2v22.9c0 .7-.5 1.2-1.2 1.2z"/circle cx="78.1" cy="20.7" r="2.8"/circle cx="94.5" cy="51.4" r="20.3"/path d="M111.1 53.1c0 8-7.4 11.2-16.5 11.2S78 61 78 53.1s7.4-14.4 16.5-14.4 16.6 6.4 16.6 14.4z" fill="#13192d" /path fill="none" stroke="#12192c" stroke-width="1.5" stroke-linecap="round" d="M112.5 88V76.9"/path fill="none" stroke="#12192c" stroke-width="1.5" stroke-linecap="round" d="M76.3 87.9v-11"//g /g /defs/svg

Lo que entra dentro defsno se mostrará en ninguna parte. Para empezar a clonar a nuestro astronauta, necesitamos vincular su ID dentro de un useelemento como este: Blog sobre peces

use xlink_href="#astronaut"/

xlink:hrefEstá en uso desde SVG2, pero es mejor usarlo por motivos de compatibilidad. Puede usar href en navegadores modernos, pero lo probé en Safari y no funcionaba al momento de escribir este artículo. Si usaxlink:href, asegúrese de incluir este espacio de nombres en su etiqueta SVG: xmlns:xlink="https://www.w3.org/1999/xlink(no lo necesitará si decide usar href).

Ahora podemos agregar el texto correspondiente a esta primera figura y alinearlo con el atributo de transformación. Será mejor que coloquemos ambos elementos dentro de un grupo para que en futuras instancias podamos trasladar todo el grupo a la posición que queremos:

g transform="translate(-95 210)" use xlink_href="#astronaut"/ text transform="translate(25 130)"Tech Leader/text/g

Las líneas de conexión son formas simples que se pueden dibujar directamente con path. Los caminos parecen aterradores pero, para las líneas rectas, no hay mucho de qué preocuparse. Te explicaré este código:

path d="M-4 200v-25h200"/

d=""es para datos y ahí es donde colocaremos nuestros comandos. Mes mover nuestra mano al lugar donde comenzaremos a dibujar (pero no dibuja nada). -4 200significa que colocamos nuestro lápiz cuatro unidades a la izquierda y 200 en la parte inferior de nuestro viewBox (siguiendo la orientación del sistema de coordenadas SVG). ves el comando para comenzar a dibujar una línea vertical que irá desde este lugar hasta -25 unidades hacia arriba. hes para horizontal, así que estamos dibujando una línea desde allí hasta 200 a la derecha. Se siente como un escritor de logotipos.

Separé las líneas en tres caminos, pero podemos usar solo uno con el Mvalor después de una serie de comandos para mover nuestra mano y comenzar a dibujar desde un nuevo punto en el sistema de coordenadas.

Échale un vistazo al documento final. Ahora el archivo pesa 779 bytes y tiene 12 líneas de código legible y escalable:

Si declaramos algún valor en los atributos que definimos en defsentonces no será posible cambiarlo en sus clones debido a la naturaleza del useelemento. Es por eso que en el ejemplo anterior el relleno del círculo principal fue reemplazado por un valor de currentColorpara tener control de los fondos de todas las replicaciones. currentColorheredará el valor de color CSS del elemento (o cualquier elemento encima de él). En SVG, estoy agregando una clase a algunos astronautas replicados y agregando un valor de color en CSS a esas clases. De esta manera, podré cambiar todas las instancias del useelemento con esa clase. Para comprender más sobre usecómo diseñar su contenido, esta publicación de Sara Soueidan tiene todo lo que necesita saber.

Con este código listo, podremos escalar el gráfico a algo como esto mucho más fácilmente:

Aquí están los tres ejemplos uno al lado del otro para comparar la legibilidad y la cantidad de código, pasamos de 241 a 10 líneas ordenadas:

Tal vez te puede interesar:

1. La innovación no puede mantener la Web rápida
2. Rendimiento web ultrarrápido
3. Tabla de contenidos fijos con estados activos de desplazamiento
4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Yendo más allá de la compresión SVG automática con el elemento “use”

Si dibuja sus propios archivos SVG o los descarga de Internet, herramientas como este Editor SVG o SVGOMG son sus amigas. Comprime los archivos con esas herram

programar

es

https://aprendeprogramando.es/static/images/programar-yendo-mas-alla-de-la-compresion-svg-automatica-con-el-elemento-use-1203-0.jpg

2024-09-24

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente