El Lenguaje de las Formas: Entendiendo el Elemento SVG Path

♪ Hola a todos, mi nombre es Monica Wojcichowska y estoy hablando directamente desde Varsovia, Polonia, donde estoy emocionada de hablarles un poco sobre SVGPAP. Pero antes de comenzar, un poco sobre mí. Nací y crecí en Nueva Jersey, pero regresé a mis raíces y actualmente vivo en Polonia y como todos los pierogi que puedo. Si le preguntas a LinkedIn, oficialmente soy una desarrolladora de front-end y una ingeniera de visualización de datos, pero si le preguntas a mis amigos, probablemente te dirán que soy una viajera del mundo y amante de la naturaleza y el deporte.

Pero antes de convertirme en quien, qué y dónde estoy hoy, hubo algunas otras cosas en el camino, como cambiar de carrera en la universidad, cambiar de carrera de marketing a programación, cambiar de país que ya mencioné, y por supuesto, todas las cosas nuevas en el camino, nuevas pasiones, nuevas personas, nuevas aventuras y la aventura continúa. Y la razón por la que les cuento todo esto con un poco más de detalle que una simple introducción en una diapositiva es mostrar con ejemplos que nuestros caminos rara vez son rectos. Se doblan, se retuercen, se giran, y el camino rara vez se ve así. En realidad, se ve más así. E incluso cuando se ve así, a menudo hay algún tipo de obstáculo que lo hace inaccesible. Pero ese es el camino súper abstracto de la vida. Y por mucho que me encantaría hablar de eso, hoy nos centraremos en un camino un poco menos abstracto, el camino SVG en su lugar. Entonces, ¿qué es el SVG? Bueno, el SVG, como recordatorio para la mayoría de ustedes, significa Scalable Vector Graphic y utiliza formas, números y coordenadas en lugar de una cuadrícula de píxeles para renderizar, lo que lo hace independiente de la resolución y escalable infinitamente. Entonces, si quieres un pequeño gráfico, puede que no haya una gran diferencia, pero cuando comienzas a aumentar el tamaño, la diferencia entre el rasterizado, que son los formatos JPEG, PNG, GIF, y el Vector se vuelve inmediatamente claro como se puede ver en estas imágenes. Esto, junto con la interactividad y la accesibilidad, son grandes ventajas cuando se trata de SVG versus rasterizado. Pero lo que es clave para la presentación de hoy es que no es solo un formato de imagen. En realidad, es un lenguaje para describir estos gráficos 2D. Me gusta decir que SVG es a los gráficos lo que HTML es al texto. Es una forma de mostrar llenar el espacio en blanco en una estructura dada. Entonces, donde HTML tiene elementos como divs, encabezados, listas y elementos de párrafo, SVG tiene elementos como el contenedor de grupo, círculos, rectángulos, líneas e incluso para un objeto. Y, por supuesto, el elemento de ruta SVG, que es el protagonista de hoy. ¿Y por qué exactamente es el protagonista? Bueno, porque todas las formas básicas se pueden crear con un elemento de ruta. Entonces, los otros elementos que mencionamos, como el rectángulo, el círculo, se pueden crear usando una ruta. Tenemos algunas formas básicas y formas menos básicas. Y luego tenemos cosas que ni siquiera clasificarías como formas en absoluto. Como este arco que salta por la pantalla o esta batería interactiva a la derecha aquí. También tenemos cosas como recortes, que nos permiten básicamente crear esta máscara y recortar todo lo que está fuera de esa ruta. Como esta tarta de cumpleaños con diferentes fondos. O un texto en una ruta, que nos permite colocar texto a lo largo de una ruta de nuestra elección. Entonces, antes de profundizar, ¿por qué entender la ruta? Bueno, tiene un gran potencial. Una ruta no es solo una línea visible como acabo de mencionar, sino un conjunto de instrucciones que se pueden

La curva suave de Bézier, curva cúbica de Bézier, es similar a la curva cúbica, excepto que el punto de control del primer punto se calcula automáticamente como una reflexión del punto de control del comando cúbico o cúbico suave anterior. Y si el comando cúbico suave no sigue a otro comando S o C, entonces se asume que ambos puntos de control son iguales. Ambos puntos de control son iguales. Luego tenemos la curva cuadrática de Bézier. Entonces, este es un comando de curva ligeramente más simple que SVG nos proporciona. Y en este caso, solo necesitamos proporcionar un punto de control que es la pendiente en el punto de inicio y final. T significa curva cuadrática de Bézier suave y funciona de manera similar a su contraparte cúbica suave y luego calcula automáticamente el punto de control como la reflexión de la curva Q o T anterior.

Ahora pasamos a los arcos. Los arcos son secciones de círculos o elipses. No voy a entrar en demasiados detalles aquí, ya que la documentación de MDN hace un gran trabajo en eso. Pero desde un nivel alto requiere bastantes argumentos más que nuestras curvas o líneas, como el radio X e Y, rotación y algunas banderas que definen qué opciones de color queremos para cualquier dos puntos dados. Y Z representa un camino cerrado que básicamente dibuja una línea desde nuestra posición actual de regreso al punto inicial en la ruta. Pero eso todavía es muchas letras para aprender de golpe, ¿y si pudiéramos simplificar esto? Bueno, V, H y Z son realmente solo atajos para expresar una línea que conecta dos puntos. Entonces, tomemos la notación no abreviada y expresemoslos como una línea en su lugar. Podemos agrupar las curvas cúbicas junto con las curvas S que pueden ser representadas por curvas C. Lo mismo ocurre con las curvas cuadráticas y podemos dejar los arcos por sí mismos. Así que eso es un poco de simplificación. Pero también porque las curvas cuadráticas, que requieren tres puntos para definirlas, pueden ser escritas como curvas cúbicas, que requieren cuatro puntos, también podemos agrupar todas estas curvas juntas ya que las cuadráticas pueden ser representadas por cúbicas. Y con una definición adecuada de los puntos de control donde el primer punto de control es igual al segundo punto de control, que es igual al punto medio del inicio y el final, todas las líneas también pueden ser escritas como curvas cúbicas. Así que básicamente nos quedan solo tres comandos para entender el lenguaje de las formas. Realmente necesitamos entender el significado de M, C y A. Y eso es mucho más manejable para comprender que una cadena enorme de números y letras. Pero hay algo que todavía me molesta de esto y es el comando de arco y todas las variables necesarias para definirlo. Entonces, como ya estamos en el estado de ánimo de simplificación, vamos a por todas. Y resulta que también podemos definir un arco como una curva. Ahora, esto no es una relación uno a uno donde un arco es igual a una curva. Pero el arco puede, con algunas matemáticas complejas, ser aproximado por una serie de curvas cúbicas. Y este nivel de minimalismo me hace muy feliz.

¡Y las cosas son geniales! Sabemos cómo leer algo como esto. Tenemos una mejor idea de lo que representa estos datos de ruta. Pero si queremos introducir una edición, primero necesitamos encontrar el lugar exacto dentro de los datos de ruta donde queremos introducir esa edición. Así que me gustaría presentarles una herramienta que he creado que hace precisamente esto. Pero qué divertido sería si solo dijera, usa esta herramienta, y ya está. En lugar de simplemente usarla para hacer lo que queremos, vamos a ver cómo se hizo detrás de escena dada nuestra nueva comprensión del lenguaje de las rutas.

Entonces, para ver dónde estamos en la ruta, primero necesitamos dividirla en segmentos. Afortunadamente, sabemos que los segmentos son comandos. Entonces, el pseudocódigo se ve así. Primero, analizamos nuestros datos de ruta en formato JSON, un formato que conocemos y amamos. Y eso es más fácil de trabajar que una cadena en la mayoría de los casos. Luego podemos transformar nuestros datos de ruta a formato absoluto, solo la versión en mayúsculas para obtener el punto de inicio y el punto final de cada una de las curvas y cada uno de los segmentos para que quede claro. Luego hagamos la herramienta, rendericemos una sola ruta por comando. Las escalaremos adecuadamente para que la herramienta sea utilizable para rutas grandes y pequeñas. Y agregaremos algunos eventos, como el mouseover para que podamos obtener información mientras nos desplazamos sobre un segmento en particular. Y un evento de cambio, por ejemplo, si editamos el valor de los datos de ruta para que nuestros segmentos se actualicen. Y utilizando una biblioteca llamada datos de ruta SVG, podemos aplicar las transformaciones que estamos buscando. Entonces, básicamente, echando un vistazo rápido al código aquí, esta función, obtener comandos de ruta como curvas cúbicas, está aplicando todas esas transformaciones. Primero, analizamos en formato JSON, hacemos que los valores sean absolutos y luego los normalizamos para obtener solo las curvas cúbicas que estamos buscando. Si tenemos todo en un formato, en el formato C, será más fácil trabajar con ello. Luego, necesitamos obtener nuestra ruta de un solo segmento. Entonces, para todos los segmentos, queremos crear una ruta separada. Solo necesitamos definir el punto de inicio donde queremos tomar nuestro lápiz y colocarlo, y luego la curva. Luego obtenemos nuestros segmentos. Creamos una ruta, aplicamos el efecto mouseover y un efecto de clic para obtener más información, los coloreamos según sea necesario y les proporcionamos los datos que acabamos de definir. Si echamos un vistazo a la herramienta y cómo funciona, deberíamos tener algo de interactividad. Ahora puedo ver en la lista a la izquierda exactamente dónde estoy. También puedo cambiar esto a formato analizado, lo que facilita aún más el trabajo. Por ejemplo, si quiero aplicar una edición aquí.

Y hermoso. No sé si eso es hermoso, pero aplicamos la edición. Ahí vamos. Entonces, misión cumplida. ¡Genial! Lo logramos. Encontramos el lugar en la ruta. Pero ¿no sería un poco más fácil si esta manipulación de rutas fuera de doble sentido? Si pudiéramos ir de los data a lo visual y también de la representación visual de vuelta a los data. Bueno, para hacerlo, necesitaríamos algún tipo de funcionalidad de clic y arrastre. Cuando hacemos clic en una parte de lo visual, sus data se actualizan en consecuencia. Y aquí es donde nuevamente la simplificación de los comandos en el formato de Bezier cúbica es realmente útil.

Entonces, nuestro pseudocódigo nuevamente se vería algo así como representar cada comando como la versión de Bezier cúbica. Renderizar los puntos definidos por ese comando. Es decir, el punto final y los dos puntos de control. Agregar funcionalidad de clic y arrastre a estos puntos. En este caso, vamos a usar React Dragable. Al arrastrar, actualizamos los data de la ruta que se encuentra en nuestro estado local. Y una vez que el arrastre termina, tenemos una devolución de llamada que actualizará los data de la ruta que se encuentran globalmente entre la lista y la visualización. Echemos un vistazo al pseudocódigo simplificado. Aquí, obtenemos nuestros puntos que queremos visualizar. Les proporcionamos los comandos de la ruta. Y para cada uno de los comandos, creamos un segmento con controladores de arrastre. Y proporcionamos esos controladores de arrastre a los elementos arrastrables de React. Entonces, si nuestros puntos son visibles, manejamos ese arrastre y al detenerlo tenemos una devolución de llamada que actualizará nuestros data. Echemos un vistazo a la herramienta en acción. Y comencemos desde el principio. Escalémoslo como queramos. Ya exploramos nuestros segmentos, así que no necesitamos hacer eso. Pero ahora estamos interesados en estos puntos. Digamos que quiero hacer que esto parezca aún más ventoso que el original. Arrastro estos puntos en cualquier dirección.

Curvemos esto aquí. Y también puedo cambiar los puntos de control para doblar como desee. Y pudimos aplicar algunas ediciones. Así que puedo copiar todo esto y luego usarlo en alguna animación o como desee más adelante. Así que, voilà. Editar texto a gráfico y de gráfico a texto. La calle de doble sentido que estábamos buscando. Y una vez que puedas ajustar todas tus rutas, solo imagina todo el potencial de animación.

Mi tiempo es corto. Y solo un par de ejemplos rápidos para mostrar lo que puedes hacer ejemplos rápidos para mostrar lo que se puede hacer. El primero muestra nuestro clip aquí y estamos usando una animación de interpolación de Pop Motion combinada con Flubber, lo que nos permite hacer la transición de una ruta a la siguiente. Entonces aquí, solo tenemos tres versiones para ajustar una original y estamos cambiando de una a la otra. En nuestro próximo ejemplo, aquí estamos usando D3, que es mi favorito, mi elección para la animación de un estado a otro, donde básicamente lo combinamos con una animación de color. Y cosas como esta realmente pueden agregar mucho mucho sabor a tu sitio o aplicación. Pero las posibilidades son realmente infinitas con la biblioteca de animación que elijas.

Entonces, para concluir en una nota filosófica, solo quería decir que la ruta es algo hermoso, no solo basado en el producto, sino en el proceso de su creación, en el lenguaje que utiliza para llegar allí. Entonces, la estructura no limita ni obstaculiza nuestra libertad, sino que nos capacita para realizarla. Muchas gracias. Los enlaces a las diapositivas al repositorio, donde se encuentra la herramienta, además de la herramienta en sí, se pueden encontrar aquí, así como también parte de mi información. Si tienes alguna pregunta o comentarios o especialmente destinos turísticos principales para nómadas digitales amantes del surf como yo, no dudes en comunicarte y revisar los recursos que he enlazado aquí también.

Hola. Hola. Gracias de nuevo por unirse a nosotros. De hecho, tenemos algunas preguntas de su audiencia, así que vamos a entrar en ello, si eso está bien para ti.

Suena genial. Genial. Entonces la primera pregunta es sobre el rendimiento. En términos de rendimiento, ¿hay algo importante en lo que pensar? Por ejemplo, ¿es mejor renderizar un solo camino largo o múltiples caminos pequeños? Esa es una buena pregunta, y de hecho estaba pensando en eso al hacer la herramienta que discutí, así como en general. Entonces, la documentación no entra en detalles cuando se trata del rendimiento de la propiedad de datos del camino SVG. Pero por experiencia personal, hay una ligera diferencia, ¿qué un solo camino más largo es el ganador? Pero nuevamente, esto es solo a partir de pruebas de referencia personal, y en mi herramienta utilizo un enfoque donde renderizo segmentos sobre el camino largo único, y el camino largo único se renderiza más rápido. Entonces, eso es algo a tener en cuenta. Pero nuevamente, es una diferencia mínima y, idealmente, en un mundo ideal, los diferentes segmentos o partes diferentes del camino largo se renderizarían en paralelo. Entonces, nuevamente, una ligera diferencia, pero el camino largo único es el ganador.

Eso es increíble. Habría adivinado completamente que serían varios caminos cortos, pero supongo que si la diferencia no es tan grande. Genial. ¿El camino SVG tiene alguna limitación en cuanto a lo que puede dibujar, o básicamente se puede hacer cualquier cosa con SVG?

Esa también es una buena pregunta. Así que hablé mucho sobre cómo es como el bloque de construcción definitivo, cómo puedes dibujar todo con él. Una limitación es cuando se trata del comando de arco. En realidad, no se puede dibujar o tiene dificultades para dibujar un círculo completo o una elipse completa. Eso se debe a que estás definiendo el punto de inicio y el punto final como el mismo punto, y hay un número infinito de círculos que básicamente se podrían crear a partir de este único punto de inicio y final. Entonces, una forma de solucionarlo es crear el punto final con un ligero desplazamiento desde el punto de inicio, podría ser mínimo, pero nuevamente, alguna diferencia para que sepa dónde comenzar y dónde terminar, y luego conectarlos con un segmento de camino separado. O tener círculos, por ejemplo. Entonces, nuevamente, se puede dibujar cualquier cosa con el camino SVG, pero tal vez no con un solo comando.

Increíble. Los círculos son formas realmente especiales, ¿verdad? Lo son. Genial. Tenemos un par de preguntas más. Veamos. Si alguien quiere aprender sobre SVG en general, ¿hay algún recurso que te guste especialmente o que recomendarías

Entonces, FlubberJS. Es una biblioteca pequeña y fácil de usar. Defines el primer forma o el primer camino y el segundo camino y simplemente interpolas entre los dos. Y ahí, los caminos no necesitan tener la misma longitud. No necesitan tener la misma cantidad de puntos o comandos. Y produce el efecto que busco. Entonces, nuevamente, si quisieras alguna función de morfismo especializada o algo así, entonces podrías experimentar con escribir la tuya propia, pero Flubber básicamente logra lo que yo quería obtener de él. Genial. La gente quiere saber, supongo que ya has hablado un poco sobre comenzar con iconos, pero si tienes alguna otra herramienta que uses en tu flujo de trabajo y cómo comienzas a crear SVGs o los obtienes en general. De acuerdo. Yo, generalmente solo busco iconos gratuitos en Google. No quiero tener problemas legales al usar iconos que no se me permite usar. Pero sí, hay otras herramientas disponibles que son similares a Adobe Illustrator. No tengo una licencia de Adobe Illustrator. Lo he usado antes, pero en el día a día, especialmente como desarrollador, no como diseñador completo, simplemente voy a sitios que imitan eso. No tengo los nombres en la punta de la lengua, pero existen. Así que eso es genial. Eso es todo por ahora. Recuerda que puedes visitar a Mónica en su sala de conferencias después de esto. Mónica, muchas gracias por unirte y espero que te diviertas en tu sala de Zoom. Gracias. Fue genial estar aquí.