Cómo Codificar Imágenes en React con SVG

¡Hola a todos! Mi nombre es Hunor y hoy voy a hablar sobre cómo codificar imágenes en React con SVGs. Y si te preguntas por qué decodificamos una imagen, aquí tienes un par de ejemplos.

Los SVGs se vuelven muy poderosos una vez que comienzas a combinarlos con JavaScript. En este ejemplo, estamos uniendo esta esfera de reloj con elementos SVG y luego estamos girando las manecillas del reloj a la posición con JavaScript. También puedes crear animaciones o generar una infografía o un gráfico. En este caso, estamos uniendo esta animación con un componente de React. En caso de que necesites visualizar algunos datos, puedes lograrlo combinando JavaScript y SVGs. También puedes hacer cosas interactivas, como en el caso de este selector de color, si estoy arrastrando estos controladores, entonces los colores están cambiando, los valores están cambiando. Y lo interesante aquí es que estos controladores que estoy arrastrando no son una superposición sobre una imagen. Son parte de la imagen SVG en sí. Así que puedes asignar un controlador de eventos a parte de un SVG de la misma manera que asignarías un controlador de eventos a cualquier otro elemento HTML. Y puedes llevar esto al siguiente nivel y crear un editor, como este simulador de puertas lógicas. Este es completamente interactivo. Así que si hago clic en las entradas, la salida cambiará. Puedo arrastrar cosas, puedo agregar nuevos elementos, puedo romper conexiones y hacer nuevas conexiones. Y todo esto es un gran React, es un gran SVG que se construye a partir de múltiples componentes. Tenemos un componente para esta puerta, para esta puerta, para las conexiones que están conectando las diferentes puertas, para las entradas, para las salidas. Y luego, a partir de estos pequeños componentes que están todos construidos con React, podemos simplemente ensamblar este gran SVG.

Ahora, el último ejemplo que quiero mostrarles hoy es este juego de Gorillaz. Y este es un poco de un huevo de Pascua, porque en realidad no está usando SVG, aparte de este molino de viento que vamos a cubrir. Pero este está usando HTML canvas. La razón por la que todavía quería mostrarles hoy es que HTML canvas y SVG tienen conceptos bastante similares. También tienen formas básicas, como para los edificios en este caso. Y también podemos construir formas más complejas a partir de diferentes segmentos de ruta, como líneas rectas y curvas y arcos. Así que en este caso, el cuerpo del gorila se construye a partir de una ruta que utiliza líneas rectas. Luego, el brazo del gorila es una gran curva que se define como una curva de Bezier cuadrática a partir de diferentes propiedades. Y puedes definir una curva de Bezier cuadrática de la misma manera básicamente en HTML canvas y en SVG, aunque uno está en JavaScript y el otro está en HTML, pero tienen los mismos parámetros. Así que volveremos a esto una vez que estemos hablando de curvas. Y ahora veamos si puedo golpear al enemigo. ¡Y sí! Bien, así que después de esta introducción, veamos el código fuente de un SVG básico y recorramos algunas formas básicas, estilos y algunas formas más avanzadas.

Así que este está mostrando un círculo, un círculo rojo, y eso es básicamente todo. Como ves, la sintaxis se basa en XML. Y lo genial de esto es que desde HTML5, puedes simplemente incluir todo esto dentro de HTML.

Ahora, por supuesto, hay algunos límites estrictos aquí. Así que dentro del elemento SVG, solo podemos tener elementos específicos de SVG, como el círculo. No podemos tener un header o un párrafo o un div. Si quieres tener un texto, entonces podemos usar el elemento text. Si quieres agrupar cosas, entonces podemos usar el elemento group. Así que hay elementos similares, pero no podemos usar los elementos HTML regulares a los que estamos acostumbrados. Y esto también funciona al revés. Así que no podemos usar el elemento circle fuera del elemento SVG porque para posicionar este círculo, necesitamos tener un sistema de coordenadas y eso lo define el elemento SVG.

Ahora, ¿por qué estamos hablando de esto? Por supuesto, podemos simplemente generar todo esto con un componente de React. Y no solo así, sino que también podemos descomponer un SVG más complejo en múltiples componentes y luego ensamblarlos juntos. Ahora echemos un vistazo más de cerca al elemento SVG. Como vemos, tiene un ancho y un alto, y también tiene una propiedad view box, que también define un ancho y un alto. Así que veamos esto. Aquí tenemos dos imágenes, y tienen el mismo contenido. Ambas imágenes tienen un círculo con una posición central en 100, 100, y el radio de 50.

Esta es la misma definición exacta de círculo. Ahora, la imagen de la izquierda es obviamente más pequeña, y eso es porque el ancho y el alto son más pequeños. Esto está afectando el tamaño real de la imagen. Y luego tenemos esta propiedad view box, que está definiendo el sistema de coordenadas, que ha definido el lienzo en el que podemos dibujar. Y esto dice en ambos casos que el sistema de coordenadas comienza en 0, 0 en ambos casos, y el ancho y el alto es 200, 200 cada uno, lo cual no es una unidad de píxel. Esta es una unidad arbitraria que es utilizada por el elemento de imagen. Así que en ambos casos, estos círculos, piensa en el espacio disponible como un lienzo de 200 por 200 unidades de ancho y alto. Y si posicionamos este círculo en 100, 100, entonces estarán en el centro de la imagen, sin importar cuán grande sea la imagen real. Todo lo que importa para los elementos de imagen es el view box. Usualmente esto está alineado, así que tenemos los mismos números en ambos casos, como en este caso, tenemos 200 en ambos casos. Pero si no coincide, entonces la imagen simplemente se reduce o se agranda.

Como vemos, el círculo tiene una posición central. No tenemos alineaciones como alinear a la izquierda o grid o flexbox o las alineaciones habituales de CSS. Necesitamos usar coordenadas.

Ahora, el view box no tiene que comenzar en 0, 0. También podemos comenzar en cualquier otro número. Así que en este caso, comenzamos en menos 100, menos 100 y el ancho y la altura siguen siendo 200. Y en este caso, el centro de la imagen estará en 0, 0. Y ni siquiera tenemos que decir eso para el círculo porque es el valor predeterminado.

Ahora, después de aclarar el view box, hablemos del elemento circle con un poco más de detalle. El elemento circle es una forma muy básica. Solo tiene una posición central como vimos y el radio para definir el tamaño. Ahora, por defecto, como ves, esto se va a llenar con un color negro. Si quieres cambiar eso, puedes establecer el color de relleno. Y aquí lo establecemos en rojo, pero podemos establecerlo en cualquier otro valor que sea válido en CSS para valores de color. Así que también podemos usar un valor de color hash. Podemos usar la función RGB y así sucesivamente.

Ahora, si no quieres llenar esta forma, pero queremos tener el contorno de ella, entonces podemos usar las propiedades stroke y stroke width. Esto es bastante similar a lo que tenemos en CSS para elementos HTML como el color del borde y el ancho del borde, pero dentro de SVG, tenemos que usar las propiedades stroke. Y también tenemos que decir específicamente que no queremos llenar este elemento porque de lo contrario, será negro. Ahora, lo genial de esto, si definimos esto en HTML o en un componente de React, entonces podemos mover todas las propiedades de estilo a CSS. Aquí podemos establecer una clase para el círculo, para el círculo en sí, no para toda la imagen, sino específicamente para cada elemento. Y luego podemos definir las propiedades de estilo en CSS. Solo podemos mover las propiedades de estilo, sin embargo. Así que no podemos mover las propiedades que realmente definen la forma en sí. Así que en el caso de un círculo, no podemos mover la posición central y no podemos mover el radio. Ahora, esto es cierto para el estilo, estas propiedades de estilo son verdaderas para cualquier otra forma también. Así que no voy a repetir cada vez.

Así que tenemos el fill y el stroke, incluso si tienes un path o un rectangle o un circle.

Ahora veamos otra forma básica, que es un rectangle. Este también es muy simple. En lugar de tener una posición central, tenemos la posición superior izquierda y luego tenemos un width y tenemos un height y eso es todo. Ahora con este conocimiento, ya podemos dibujar un gráfico básico. Aquí hay un código fuente para un componente de React que está mapeando algunos puntos de datos en rectángulos. Y aquí para cada rectángulo, tenemos que averiguar la posición X e Y y el width y el height basado en los puntos de datos. Y eso es todo. Por supuesto, si necesitas un gráfico más avanzado, entonces probablemente vas a usar la biblioteca D3 u otra biblioteca de gráficos, que por cierto, muy probablemente usará SVG en su núcleo. Pero si quieres tener algo personalizado, puedes hacerlo tú mismo con SVGs.

Ahora los rectángulos y círculos son agradables, pero si estás abriendo cualquier SVG, entonces vas a encontrar un elemento path dentro de él. Y el elemento path es básicamente un elemento de forma libre, que podemos construir a partir de múltiples segmentos de path. Podemos tener líneas rectas y curvas y arcos, etcétera. Así que intentemos desglosarlo y ver qué hay dentro de la definición de un path.

Aquí tenemos una línea simple. Y esta línea ya contiene dos segmentos separados. Primero tenemos un segmento moveTo, y luego tenemos un segmento lineTo. Cada segmento siempre define la posición final, por lo que el segmento lineTo define dónde termina la línea, pero no define dónde comienza. Por eso tenemos un segmento previo con el moveTo que describirá dónde comenzamos las cosas. Así que este es básicamente una M mayúscula, cada segmento siempre comienza con una letra. Luego solo tenemos una coordenada, que dice que simplemente nos movemos aquí, y desde aquí, dibujamos una línea recta aquí.

Ahora, por supuesto, podemos continuar esto, y podemos seguir dibujando líneas rectas a diferentes coordenadas. Pero lo que también podemos hacer es, en lugar de continuar este path, también podemos tener otro comando moveTo y tener un icono de menú de hamburguesa. Así que un path no tiene que ser continuo.

Ahora para el estilo, usamos las mismas propiedades de estilo que teníamos antes. Aquí no tenemos una propiedad fill porque este path no está rodeando ninguna región. Así que incluso si no configuras la propiedad fill, o si la configuras a cualquier color, no llenaría realmente nada. Pero configuramos un stroke y strokeWidth a una línea relativamente gruesa, y luego también configuramos esta propiedad strokeLineCap para tener los extremos de estas líneas redondeados.

Ahora con este segmento, el moveTo y lineTo, podemos tener algunos otros iconos si quieres, por ejemplo el icono de pantalla completa. Si abrieras el código fuente de YouTube, también encontrarías un SVG similar con una definición un poco más compleja, pero esencialmente solo un montón de moveTo, lineTo, lineTo, moveTo, lineTo, lineTo, el mismo patrón una y otra vez. Ahora después de hablar sobre estos segmentos básicos de path, hablemos sobre las transformaciones.

Como dije antes, cada forma está definida por coordenadas, y ya podríamos dibujar esto porque ya conocemos el elemento circle y sabemos cómo dibujar una línea básica, pero necesitaríamos algunos cálculos de trigonometría para averiguar esta posición, por ejemplo. Y en lugar de eso, podemos usar transformaciones. Así que simplemente comenzamos con un círculo y luego tenemos una línea simple, que simplemente va de aquí a aquí. Eso es todo. Tiene un segmento moveTo y un segmento lineTo. Luego lo que podemos hacer es asignarle un ID, y luego podemos reutilizar este path con el elemento use, que se refiere de nuevo al path por ID, y aplica una transformación. Así que para cada uno de estos rayos de sol, simplemente lo movemos, simplemente lo rotamos 45 grados.

De esta manera no tenemos que averiguar dónde está, dónde está realmente esta posición o esta posición, simplemente seguimos rotándolos. También es importante notar que esto funciona en este caso porque el centro del sistema de coordenadas está en el medio de la imagen, así que esa es la coordenada cero, cero, porque el cuadro de vista está definido de una manera que comienza en menos 15, menos 15, y termina en 30, 30.

Y por cierto, el ancho y la altura son completamente independientes, aunque el tamaño interno es 30 por 30, el tamaño real es 200 por 200. Ahora con esta lógica, podemos crear otras cosas como el molino de viento que vimos en el juego de Gorilla. Si revisas el código fuente, tenemos un par de cosas de las que no hemos hablado antes, así que vamos a recorrer el código de este. En la parte inferior tenemos este path, que es el soporte del molino de viento. Esto es solo un move to y un montón de line to para dibujar este soporte.

Y ahora para el resto, tenemos el elemento group, que está agrupando el resto del molino de viento. Un elemento group es muy parecido a un elemento div, por lo que por sí solo no hace mucho. Pero si tuviera algunas propiedades, como la propiedad fill, entonces se aplicaría a los hijos. Y en este caso, como estamos animando todo, podemos simplemente animar este grupo en lugar de cada hijo individualmente. Ahora dentro de este grupo tenemos el círculo, que está en el centro. Tenemos un path para uno de estos brazos, que se construye a partir de un move to y un par de segmentos line to. También tiene este segmento C mayúscula, que es una curva de Bezier cúbica. Como ves, esto no solo tiene una coordenada sino un par de parámetros más. Vamos a hablar de esto en un momento. Y luego simplemente reutilizamos este brazo con el elemento use y, nuevamente, aplicamos transformación para tener tres brazos diferentes en tres direcciones diferentes en lugar de tener solo uno.

Ahora lo que podemos hacer aquí, y lo que realmente hacemos aquí, es que asignamos un ID para este grupo. Y en CSS, simplemente definimos una animación de fotogramas clave donde simplemente animamos la propiedad rotate, que antes era parte de translate. Ahora puedes usar la propiedad rotate por sí sola para que no choque con translate, que también era parte de transform antes. Así que puedes establecer estos valores de forma independiente. Y tenemos esta pequeña animación aquí. Puedes usar animaciones de fotogramas clave en CSS de la misma manera que lo harías con cualquier otro elemento HTML. También estamos usando la misma técnica cuando estamos dibujando esta esfera de reloj, excepto que aquí no estamos usando CSS para mover las manecillas en posición, sino que estamos usando JavaScript.

Ahora ya hemos cubierto mucho. Cubrimos algunas formas básicas, cómo construir paths básicos. Pero las cosas se ponen más interesantes una vez que empiezas a usar curvas. Así que veamos cómo se ve una curva. Hay dos tipos de curvas. Tenemos curvas de Bezier cuadráticas y curvas de Bezier cúbicas.

Esta es la más sencilla. Esta es la curva de Bezier cuadrática, comenzando con una letra Q mayúscula aquí. Pero nuevamente, porque los segmentos de path solo definen el punto final, que son los dos últimos números, tenemos que averiguar dónde comenzar. Así que para eso, antes de comenzar este segmento de Bezier cúbico, tenemos otro segmento move to solo para tener una posición de inicio.

Ahora después de eso, tenemos este segmento de Bezier cúbico con la posición final al final. Y antes de eso, tenemos otra posición, que se llama el punto de control. Y este punto de control está definiendo cómo doblar la línea. Así que si esto estuviera entre estos dos otros puntos, entonces tendríamos esencialmente una línea recta y cuanto más lo alejamos, más se dobla la línea. Y por supuesto, podemos doblarlo solo en esta dirección o en la otra dirección o en la otra manera, como quieras. Y por supuesto, estas posiciones también pueden estar donde quieras.

Y ahora tenemos una curva de Bezier cuadrática. Ahora, si vuelves al juego de gorilas que teníamos antes, el brazo de este gorila, y nuevamente, esto es en realidad HTML canvas, pero los parámetros para curvas son los mismos. Así que aquí tenemos una curva de Bezier cuadrática que comienza en algún lugar alrededor del hombro, termina alrededor de la mano, o termina en la mano, y tiene un punto de control que está en algún lugar por aquí. Esto no es una simulación exacta, pero lo que sucede si estoy arrastrando esta mano es que solo estoy moviendo el punto final. Así que como resultado, puedo tener estos brazos muy largos y tengo estos brazos doblándose de la manera incorrecta. Pero solo modificando una posición de estas tres, ya tenemos una simulación bastante aceptable. Ahora veamos si tengo suerte esta vez. ¡Yay! Bueno, quiero decir, construí este juego, así que jugué un poco con él.

Así que después de esto, hablemos de la curva de Bezier cúbica, y esto es un poco más avanzado, pero es bastante similar. Así que nuevamente, comenzamos con un comando move to, luego con una C mayúscula que también vimos en el ejemplo del molino de viento, y las dos últimas posiciones, o los dos últimos números, que es una posición, es la posición final nuevamente. Antes de eso, sin embargo, tenemos otras dos coordenadas. Tenemos un punto de control para el punto final, y tenemos un punto de control para el punto de inicio. Y la forma en que esto funciona es que este esencialmente afecta el inicio de la línea. Así que afecta cómo rápidamente gira y en qué dirección va inicialmente. Pero no afecta cómo termina la línea. Como si miras esta parte, eso se mantiene prácticamente igual. Está moviéndose un poco, pero esencialmente solo está afectando el inicio de la curva y no el final de ella. Y luego el otro, el otro punto de control, está afectando el final de la línea, así que afecta cómo rápidamente gira y en qué dirección va primero. Entonces, ¿por qué es esto útil? Si estás construyendo formas más complejas, a menudo quieres tener una transición suave entre los diferentes segmentos de path. Y lo que tenemos aquí es que tenemos dos líneas rectas. Tenemos una línea recta aquí y una línea recta aquí. Y luego estamos conectando estos dos segmentos con una curva de Bezier cúbica de una manera que no podrías decir que estamos cambiando de segmento aquí porque la transición es suave. Los puntos de control de esta curva de Bezier cúbica están alineados con el segmento anterior y el siguiente. La misma historia aquí, como tenemos una línea recta aquí, tenemos una línea recta aquí, y luego estamos conectando con una Bezier cúbica de una manera que la conexión es suave. Así que las curvas de Bezier cúbicas son útiles cuando estás construyendo formas más complejas y quieres que se vea como una forma agradable.

Ahora esto es prácticamente de lo que quiero hablar. Así que a partir de esto, ya puedes construir cosas bastante complejas. Por supuesto, hay algunas cosas más avanzadas como también puedes dibujar arcos que comienzan con una A mayúscula, y también termina con una posición N. El problema aquí es que tiene como cinco otros parámetros, como diferentes radios y ángulos, y puedes ir desde el punto de inicio hasta el punto final de la manera larga o la manera corta o la otra manera larga y así sucesivamente. Así que esto es un poco más avanzado y no voy a entrar en ello. Si estás interesado, entonces revisa svgtutorial.com donde puedes encontrar toda esta presentación y muchos más pequeños ejemplos y casos de uso que puedes probar en tu próximo proyecto. Así que espero que esto haya sido útil para ti y hayas aprendido algo y obtenido algo de inspiración para tus próximos proyectos. Yo fui Hunor. Por favor, revisa mi sitio web y nos vemos en la web. ¡Ciao!