1. Introducción a SVGs para el diseño de blogs
Hola a todos. Hoy voy a hablar sobre SVGs para hacer que tu blog destaque. Te mostraré cómo usar SVGs dentro de tu proyecto y te daré algunas ideas. Un SVG es una imagen vectorial basada en XML que admite interactividad y animación. Usaré un blog como ejemplo para demostrar el uso de SVGs.
Hola a todos. En primer lugar, quiero decir que es realmente un placer estar aquí en la edición remota de React Summit y hoy voy a hablar sobre SVGs para hacer que tu blog destaque. Mi nombre es Elisabet Oliveira y soy una diseñadora de productos senior que trabaja actualmente en Elastic. Elastic es una empresa realmente genial. Todos trabajamos de forma distribuida. Yo trabajo desde Lisboa, Portugal. Actualmente vivo en Lisboa, Portugal. Tengo colegas de los Estados Unidos. Y básicamente, en este momento, estoy ayudando a construir la Elastic UI, nuestro sistema de design. Y también estoy ayudando a veces a construir Kibana, uno de nuestros productos.
Hoy quiero hablar, una vez más, sobre SVGs. He estado hablando sobre SVGs antes y he estado en otras ediciones de React Summit, pero hoy quiero contarte un poco cómo puedes usar SVGs dentro de tu proyecto. ¿Por qué? Porque mucha gente, normalmente, cuando ven mis charlas, dicen: oh, sabes, los SVGs son realmente geniales. Me gustaría poder usarlos dentro de mis proyectos, dentro de mis productos. En realidad, puedes usar SVGs dentro de tus proyectos y productos. Hoy quiero mostrarte solo algunas ideas de lo que puedes hacer. ¿Qué es un SVG? Un SVG es una imagen vectorial basada en XML. Esta es básicamente la definición de Wikipedia. Dice que es un formato para gráficos bidimensionales con soporte para interactividad y animación. Como puedes ver, cuando tienes un SVG, básicamente una imagen, y abres el archivo, verás todo este código. Y este código, en realidad, puedes cambiar las propiedades, el relleno, los colores, todas estas cosas, y es realmente genial si quieres animar o interactuar con el SVG.
Así que pensé que para esta charla un blog puede ser un muy buen ejemplo de cómo podemos usar SVGs. Así que puedo darte un ejemplo, el mes pasado comencé a intentar actualizar mi blog. Comencé a investigar mucho y quería construir mi nuevo blog. Quería usar Next.js. También quería usar Chakra UI, así que comencé a investigar mucho y encontré encontré este blog de Noah y Noah creó este blog con Next.js y también con Chakra UI y lo hizo de código abierto. Así que decidí en lugar de comenzar desde cero, hacer un fork del proyecto de Noah, del blog de Noah y luego actualizar y mejorar un poco el design. Entonces, una cosa que noté del blog de Noah, en primer lugar, es muy solo texto. No tiene mucho design. Esta es la parte del blog, así que esta es la la primera página, la página de inicio, y luego tienes el blog y noté que, okay, tienes
2. Usando SVGs para Mejorar el Diseño de Blogs
No tienes mucho diseño. Hoy en día, la mayoría de los blogs de los desarrolladores son solo texto. Sin embargo, un buen diseño puede hacer que tu blog se destaque. En esta charla, te mostraré cómo usar SVGs para mejorar el diseño de tu blog. Transformaremos los SVGs en JSX, lo que permitirá dividir fácilmente el código, hacer animaciones y aplicar estilos. Además, los SVGs en línea eliminan la necesidad de solicitudes HTTP.
La mayoría es solo texto. No tienes mucho diseño. Así que fui al repositorio de Noah y vi que lo bifurqué y luego Noah dijo que tomó la inspiración de Lee Robison. Así que fui al sitio web de Lee Robison y este es su blog y también está muy centrado en el contenido, principalmente solo texto. Y me di cuenta de que hoy en día la mayoría de los blogs de los desarrolladores son solo texto y no tienen mucho diseño. Normalmente tienen un ícono para cambiar el tema de oscuro a claro o de claro a oscuro. No tienen un logotipo o imágenes. Y pensé, sí, está bien que un blog se centre en el contenido. Así que no hay nada malo en estos blogs. Sé que el contenido es más importante, pero creo, y en realidad soy diseñador, por eso probablemente pienso esto, que un buen diseño puede hacer que tu blog se destaque. Así que empecé a pensar en eso y pensé, ¿cómo puedo hacer que se destaque un poco más? Entonces dije, puedo usar, puedo cambiar un poco el diseño, ya sabes, poner imágenes y todas esas cosas. Pero puedo usar SVGs para hacer eso y eso es lo que quiero mostrarte. Entonces, lo que voy a hacer básicamente es mostrarte cómo puedes usar SVGs y en esta charla vamos a transformar los SVGs en JSX. En
React, también puedes importar
SVG como una imagen y si haces eso, casi no puedes interactuar con el contenido dentro de la imagen. Entonces, lo que queremos hacer es usar el
SVG en línea. Así que lo transformaremos en JSX y esto es realmente bueno porque, en primer lugar, si transformas el
SVG en un componente de
React, transformas el
SVG en JSX, puedes dividir fácilmente el código en diferentes partes. Puedes tener una imagen que divides en diferentes partes. Es perfecto para animaciones y estilos con
CSS y puedes usar las props del estado y los controladores de eventos dentro del
SVG, como onClick, onMouseLeave, onMouseEnter y todos estos controladores de eventos, y lo mejor de todo es que son SVGs en línea, por lo que no hay solicitudes HTTP. Es lo mismo que usar un
3. Dividiendo el Proyecto y Convirtiendo SVG a GSX
Te mostraré cómo dividir el proyecto y crear una carpeta para los componentes SVG. Comenzaremos cambiando el logotipo, que tiene dos caras diferentes. Explicaré cómo exportar el logotipo con atributos ID para facilitar su manipulación. Luego, demostraré cómo convertir el SVG a GSX manualmente. Ahora, tengo los componentes listos.
Componente
React. Ahora, vamos a ver algunos ejemplos de código. Si voy aquí, primero que nada, quiero mostrarte cómo dividí el proyecto. Cuando comencé desde la bifurcación de Noah, básicamente tenías todos los componentes aquí y creé una nueva carpeta llamada SVGs. Dentro de esta carpeta, tendré todos mis componentes SVGs. Es como básicamente componentes GSX
React, pero dentro de estos componentes, tienes SVGs. Así que viven dentro de esta carpeta llamada SVGs, ok, componentes y SVGs. Lo primero que quiero mostrarte es cómo puedes, primero que nada, tienes una imagen y comencemos con el logotipo. Lo primero que quería hacer desde el blog de Noah era cambiar el logotipo. Así que creé mi propio logotipo Y como puedes ver, tengo dos caras diferentes. Una que se llama love struck y la otra cara que se llama cara feliz. Así que quiero animar estas y mi idea era interactuar con el logotipo. Así que cuando pase el cursor sobre el logotipo, quiero cambiar la cara de feliz a love struck. Así que lo que voy a hacer es básicamente exportar este logotipo. Podría copiar y pegar. En realidad, podría, en Figma, podría copiar como
SVG. Y luego uso mucho esta herramienta de Jake. Podría pasar el marcado y como puedes ver, tendría el
SVG aquí. Pero no me gusta hacerlo de esta manera porque cuando quiero exportar el
SVG, como puedes ver aquí, prefiero exportarlo y voy a exportarlo a mi escritorio. Y la razón por la que exporto de esta manera es porque quiero incluir atributos ID. Ok. Así que quiero incluir atributos ID. Así que voy a mi escritorio y lo voy a dejar aquí. Y ahora tengo SVGs con IDs. Como puedes ver en esta opción, no estoy limpiando los IDs. Y la razón por la que hago esto, la razón por la que quiero los IDs es porque luego es más fácil cuando estoy manipulando el
SVG, cuando intento cambiar propiedades e interactuar con los SVGs, es más fácil encontrar los SVGs y todas estas cosas. Así que lo que hago aquí es copiar y luego pegarlo aquí. En realidad, debería copiar así y luego usar este
SVG a GSX. Puedes usar otras herramientas para convertir el
SVG a GSX. Prefiero hacerlo manualmente porque puedo ver qué está sucediendo y puedo optimizarlo de la manera que deseo. Ahora que tengo esto, puedo copiar.
4. Interactuando con SVGs y Animando Elementos
Te mostraré cómo interactuar con SVGs y crear animaciones. Al utilizar eventos de mouse enter y mouse leave, puedo verificar si el mouse está ingresando o saliendo del SVG. Esto me permite mostrar diferentes caras según la posición del mouse. El blog también admite cambiar el tema claro y oscuro, lo que actualiza el color del logotipo. Demostraré cómo animar los planetas de una manera simple y efectiva.
Y ahora, bueno, lo tengo aquí, mis componentes. Y digamos que copio eso y lo pegaría copiar y pegar aquí. Y ahora quiero mostrarte. En realidad, ya está aquí. Y quiero mostrarte cómo puedes interactuar y ahora puedes crear, interactuar como con
SVG y crear animaciones y todas estas cosas geniales.
Lo primero que hago aquí es tener este evento en mouse enter y mouse leave. Y estoy usando este hook de estado para ver cuándo está encima. Entonces, al establecer que está encima, puedo usar esta variable está encima solo para verificar si el mouse está ingresando al SVG o si está saliendo del SVG. Y esto es como Sharker UI y esto es como el SVG.
Y ahora que tengo estos eventos que puedo verificar si está encima o no. Ahora lo que quiero hacer es, como puedes ver en mi SVG, voy a cambiar si está encima, simplemente muestro esa parte de la cara love struck que es como un grupo y si no estoy encima, quiero mostrar la cara feliz. Entonces básicamente, si ves eso es la razón por la que exporté el ícono, el logotipo con las dos caras. Y ahora en mi código solo verifico si está encima. Entonces, si está encima, solo quiero mostrar el love struck. Si no está encima, voy a mostrar la cara feliz. Ok, ahora veamos. Así es como se ve el blog. Como puedes ver, si me acerco, ahora cambia la cara. En realidad, el logotipo no es tan grande, pero creo que es una pequeña interacción que hace que tu blog se vea un poco mejor. Y en realidad, si no tienes habilidades de diseño, hay muchos sitios web donde puedes usar SVGs de código abierto, tienes como flat icon, free pick, y puedes descargar desde allí. Así que esta es la primera interacción. Y luego en el blog, puedes cambiar el tema claro y oscuro. Entonces, si cambio el tema oscuro y claro, mi logotipo se actualizará de color. Y la forma en que lo hago, es que tengo esta propiedad llamada color de texto. Y desde el componente padre, verifico qué tema es y lo hago con Chakra. Entonces, en Chakra, verifico cuál es el tema actual , si es claro o oscuro, y luego actualizo el color del texto según el tema claro u oscuro. Básicamente, eso es lo que hace este componente.
Y luego los siguientes componentes que quiero mostrarte, es esta parte. Para crear esta parte, en realidad solo quería animar un poco. No quería tener
5. Usando React Spring para SVGs Interactivos
Y para hacer eso, y para hacer eso, exporté la ilustración. Estoy usando React Spring. Puedes cambiar el tema aquí con este ícono. También puedes interactuar con esta ilustración. Si haces clic en esta ilustración, puedes actualizar o cambiar el tema actual. Estoy usando Chakra UI para ver el modo de color actual. Tengo un botón para alternar el modo de color con todos los SVGs dentro. Al hacer clic, actualizo el tema. Uso React Spring para crear la interacción al pasar el cursor. La animación es mejor cuando lo pruebas tú mismo. Uso Translate 3D y actualizo los valores de X e Y según los movimientos del mouse. Puedes probarlo tú mismo. Puedes agregar otro SVG en tu proyecto, como este botón.
Hay muchas animaciones. Pero solo para animar un poco, como los planetas. Y para hacer eso, y para hacer eso, exporté la ilustración. Y te lo voy a mostrar. Así que aquí tengo, se llama la propia ilustración. Y para hacer esto, estoy usando
React Spring. Una de las cosas que también hago es que puedes cambiar el tema aquí con este ícono. Pero también puedes interactuar con esta ilustración. Y si haces clic en esta ilustración, también puedes actualizar o cambiar el tema actual.
Para hacer esto, tengo dos cosas, estoy usando Chakra UI para ver cuál es el modo de color actual. Y luego tengo este botón para alternar el modo de color. Y con el botón de alternar el modo de color, tengo una caja de Chakra UI que uso como botón. Y dentro del botón, tengo todos los SVGs. Y lo que hago es que al hacer clic, simplemente actualizo el tema. Y luego tengo dos objetos. Uno son los colores para el tema claro. Y el otro objeto son los colores para el tema oscuro. Entonces lo que hago es que verifico si es el tema claro. Y si es el tema claro, actualizo todos los colores para usar los colores del objeto del tema claro. Y si es el tema oscuro, actualizo todos los colores para usar los colores oscuros de este objeto.
Luego, lo otro que hago es que uso React Spring para crear esa interacción al pasar el cursor. Así que cuando los planetas se actualizan un poco, la computadora parece un poco lenta porque estoy grabando. Y en realidad, la animación es un poco mejor cuando lo pruebas tú mismo. Así que uso React Spring para hacer eso. Básicamente, lo que hago es que uso Translate 3D y actualizo los valores de X e Y según los movimientos del mouse. Así que puedes intentar hacer esto tú mismo. Es muy fácil. En realidad, hay una demostración en el sitio web de React Spring. Es básicamente casi un copiar y pegar de allí.
Otras cosas que puedes agregar en tu proyecto son como este botón. Así que quería crear un tipo diferente de botón para que el blog se destaque, como dije, en lugar de usar un botón normal, quería usar el mío. Así que para hacer esto, tengo este botón.
6. Usando SVGs en SharkUI
Con SharkUI, puedes personalizar las propiedades de los botones, incluyendo la relación de aspecto del SVG y el color de acento. El color se puede actualizar según el tema. Para las tarjetas en el tema oscuro, se utiliza un SVG para resaltar al pasar el cursor. El fondo del panel, parte de la tarjeta, cambia de color al pasar el cursor utilizando React Spring. Por último, se muestra el componente del botón de amor, también utilizando un SVG.
Entonces, básicamente, con SharkUI, tengo todas estas propiedades de botón y luego eso es mi SVG, donde digo que no estoy preservando la relación de aspecto porque quiero que el SVG crezca con el texto. Así que simplemente paso como una propiedad la altura que quiero y luego la relación de aspecto, el ancho, se establece en 100% Y también paso el color de acento. Es este color. También podría actualizar el color según el tema. En este caso, funciona bien. Funciona muy bien para los temas claro y oscuro. Así que no necesito actualizar el color, pero podría hacer lo mismo que el texto del logotipo o como esta ilustración. El color se podría actualizar según el tema.
Y otra cosa que estoy haciendo aquí son estas tarjetas. Y para estas tarjetas, la idea de estas tarjetas es cuando estamos en el tema oscuro y pasamos el cursor sobre las tarjetas, no puedo ver la sombra. Es muy difícil. Así que necesitaba una forma de resaltar las tarjetas. Así que pensé, bueno, si tengo, como, ¿qué pasa si pongo un SVG aquí y al pasar el cursor, actualizo, como, el color? Así es como lo hice. Y así llamo al fondo del panel. Y el fondo del panel, es parte de esa tarjeta. Y es muy fácil. Así que compruebo si está activo. Y está activo. Viene del padre. Así que compruebo si está activo. Tengo un color de relleno y otro color cuando pasamos el cursor sobre la tarjeta. Y luego, para esto, estoy usando, de nuevo, React Spring. Así que básicamente, lo que estoy haciendo aquí, si está activo, el relleno activo es el que vemos. Y si no está activo, el relleno animado es solo con el color de relleno. Así que también es muy fácil. Así que cuando estamos activos, puedes ver este efecto. Y el último componente que quiero mostrarte, esto en realidad está utilizando un SVG, pero el último que quiero mostrarte es este componente. Y es como, es lo que llamo el botón de amor. Y el botón de amor...
7. Creando un Botón de Amor Interactivo
Para el botón de amor, estoy utilizando React Motion y Framer Motion para crear una experiencia interactiva. Al escalar el botón al pasar el cursor y utilizar variantes y animaciones, podemos lograr un efecto único. El fondo se mueve hacia arriba, creando un efecto visual atractivo. Espero que hayas disfrutado de la charla y te sientas inspirado para mejorar el diseño de tu blog. Si tienes alguna pregunta, no dudes en contactarme en Twitter. Gracias!
Para el botón de amor, en realidad estoy utilizando React Motion y Framer Motion. También podría usar React Spring. Pero para este, decidí usar Framer Motion. Más que nada para mostrarte que puedes usar la biblioteca con la que te sientas más cómodo. Y es muy fácil crear este tipo de interacción con Framer Motion. Así que si copio esto y busco motion... Básicamente, una de las cosas que estoy haciendo con Framer Motion es casi como los componentes de estilo, motion.svg. Y luego, al pasar el cursor, escalamos un poco. Así que cuando escalamos un poco, también tenemos la misma interacción que el logotipo. Así que verifica si está encima o no y cambia la cara. Y luego, lo que también hacemos aquí es tener una variante y animarla. Así que cada vez que hacemos clic, actualizamos las variantes. Así que vamos de cero a uno, dos, tres, cuatro. Así que cuando animamos, cambiamos las variantes. Así que vamos de la variante cero, a la variante uno, dos, tres y cuatro. Básicamente, solo estamos traduciendo... Y así comienza vacío en los 44 píxeles. Y luego, cuando vamos a la primera variante, que es de 44 píxeles, luego traducimos a 33, 22, 11 y cero, y crea este efecto. Así que básicamente hay un fondo que sube, sube, sube, y eso es básicamente lo que estoy haciendo. Así que aquí estamos de nuevo. Y eso es todo. Solo quería mostrarte las cosas que puedes hacer con SVGs para que tu blog destaque un poco. Voy a compartir el código y puedes ver cómo estoy haciendo el código. Y también puedes usar esto como un proyecto de código abierto. Y eso es básicamente la charla y espero que te haya gustado la charla. Y si tienes preguntas, aquí está mi Twitter. Puedes hacer cualquier pregunta y después de eso también puedes hablar conmigo y hacer todas tus preguntas. Y bueno, eso es todo. Gracias una vez más y espero que lo hayas disfrutado y espero que ahora tengas inspiración para hacer tu
Beneficios de Usar SVGs en Componentes de React
Parece que la música sin letras es la mejor opción, lo cual tiene mucho sentido. Siento que es un poco menos distractora que otros tipos de música. La primera pregunta es, dado que SVG es JSX válido dentro de los componentes de React, ¿hay algún beneficio en mantener el SVG que obtengo de los diseñadores en archivos separados? No, es mejor usar el SVG en línea. Si vas a animar el SVG o cambiar propiedades y colores, es mejor transformar el SVG en componentes de React. Si no vas a cambiar nada, simplemente impórtalo como una imagen. La siguiente pregunta es, ¿es mejor siempre usar SVG como un componente de React? Depende de tu caso de uso. Si deseas interacciones y personalización, es mejor usar SVG como un componente de React.
Un blog con más diseño y más creatividad. Y eso es todo. Gracias. Parece que la música sin letras es la mejor opción, lo cual tiene mucho sentido. Siento que es un poco menos distractora que otros tipos de música. Genial. Sí, pero en realidad escucho la misma canción una y otra vez. Eso es genial. Así que, hagamos la sesión de preguntas y respuestas. Así que, tenemos algunas preguntas increíbles de nuestro discord. Veamos qué preguntaron las personas. La primera pregunta es, dado que SVG es JSX válido dentro de los componentes de React, ¿hay algún beneficio en mantener el SVG que obtengo de los diseñadores en archivos separados? Y esto es de Aprilion.
Entonces, ¿puedes repetir la pregunta? Sí. Dado que SVG es JSX válido dentro de los componentes de React, ¿hay algún beneficio en mantener el SVG que obtengo de los diseñadores en archivos separados? No. Creo que es mejor si usas el SVG en línea. Pero creo que también depende de lo que quieras hacer. Si vas a animar el SVG, si vas a cambiar propiedades, colores y todo eso, es mejor si transformas el SVG en componentes de React. Si no vas a cambiar colores ni nada, simplemente puedes importarlo como una imagen porque no obtienes ningún beneficio al ponerlo en línea. Entonces, ¿por qué lo transformarías? Sí, uno de los beneficios con BEO es que no tendrás una solicitud HTTP, pero creo que depende de tu caso. Si es solo una imagen que no cambias en absoluto, simplemente impórtala como una imagen. Si vas a animarla o quieres cambiar colores basados en las props de React, creo que es mejor transformarla en un componente.
Genial. La siguiente pregunta es de Vladislav. Siempre es divertido leer los nombres de usuario de las personas porque es como ¿cómo se pronuncia esto? Entonces, ¿es mejor siempre usar SVG como un componente de React? Eso depende. Me gusta usarlo como un componente de React, pero normalmente cuando pienso en usar un SVG es porque quiero cambiar propiedades, cambiar la apariencia, animar y también tener la mejor calidad porque es como una imagen vectorial. Entonces, creo que si tu caso de uso implica tener interacciones, si quieres, digamos, tener un ícono y el ícono es un SVG, y tal vez quieras hacer el ícono realmente personalizable porque en una parte de la página quieres usar ese ícono en color oscuro, pero tal vez en otra página quieres usar ese ícono con un color diferente. Solo necesitas pasar una prop con el color. Si estás importando una imagen, el SVG como una imagen, tendrías que exportarla en rojo e importarla, y luego tendrías que exportarla nuevamente con otro color, importarla como una imagen, y hacer esto una y otra vez. Entonces, si quieres aprovechar la personalización, creo que es mejor transformarlo en un componente de React.
Implementando SVGs como Componentes React Responsivos
Para implementar un SVG como un componente React responsivo, puedes establecer el ancho y alto al 100% y no preservar la relación de aspecto. Presta atención a la relación de aspecto al trabajar con SVGs. Para la accesibilidad, puedes usar la biblioteca SVGR para transformar SVGs en componentes React. Utiliza la etiqueta de título o aria-label para proporcionar contexto. Chakra UI te permite obtener el tema de color preferido, oscuro o claro, del agente de usuario o navegador.
Genial. Increíble. Dos preguntas de Habma. Entonces, la primera es, ¿cómo implementarías un
SVG como un componente
React responsivo en lugar de definir el ancho, alto y viewBox? Sí. En realidad, el botón que creé era responsivo. Y lo que hice fue, no preservar la relación de aspecto porque quiero que crezca. Y la otra cosa es, digo que el ancho es 100% y también la altura. Y así, siempre crece. Pero podrías hacer lo mismo con otras imágenes. Puedes usar el ancho. Y también, debes prestar atención a la relación de aspecto porque con los SVGs, solo tienes eso. Y sí. Pero puedes hacerlo responsivo.
Genial. ¿Y qué puntos debemos tener en cuenta como desarrolladores al usar SVGs para hacerlo accesible? ¿Existen herramientas o bibliotecas para verificar automáticamente la accesibilidad de los SVGs? Sí. En realidad, está SVGR que puedes crear tu propio script y transformar el SVG en componentes React. Y donde trabajo en Elastic, usamos SVGR. Y cuando lo hacemos, en realidad, dentro de los SVGs, si usas el título para la accesibilidad, si tu SVG no hace nada, es solo una imagen que no dice nada, puedes usar hidden true. Pero si tu SVG es como un ícono que dice algo importante para el contexto, es mejor si pasas un título. Y con SVGR, también puedes hacer eso automáticamente. Y sí. Yo lo usaría. Hay una etiqueta de título, y es mejor si usas la etiqueta de título. O también puedes usar aria-label.
Genial. Genial. Y luego de Vlad S., ¿podemos obtener el tema de color preferido, oscuro o claro, del agente de usuario o del navegador? Con Chakra UI, sí. Creo que puedes hacerlo. Por defecto, lo detecta. Si lo ejecutas correctamente. Si instalas Chakra UI correctamente, puedes decir que según la preferencia del usuario, se abre en oscuro o claro. Chakra UI es uno de mis favoritos para usar también. Lo uso para todo.
Rendimiento y Animación de SVG
Para el efecto de desplazamiento de la tarjeta, usar CSS sería mejor para el rendimiento que usar un SVG. Dependiendo de la complejidad del SVG, CSS puede ser más simple y eficiente. La herramienta para convertir SVGs a JSX se llama svg2jsx.com. Al usar animaciones SVG en React, pueden surgir problemas de rendimiento, especialmente al ejecutar tareas intensivas en recursos simultáneamente. Las animaciones basadas en JavaScript pueden ralentizar los sitios web y las animaciones CSS pueden ser una mejor alternativa.
Simplemente se ve tan bien de forma predeterminada, y también es fácil de usar. Genial. Thomas B. pregunta, para el efecto de desplazamiento de la tarjeta, ¿usaste el SVG circular y cambiaste el color, es esto más eficiente que simplemente usar un div con borde redondeado y el color de fondo? Creo que probablemente usar CSS sería mejor para el rendimiento que ese SVG, porque creo que si tu SVG, a veces, si lo haces correctamente, si sabes lo que estás diseñando, cuando lo exportas, es realmente simple, pero a veces si usamos especialmente este tipo de software, como Figma o Sketch, y exportas como un cuadrado o un triángulo, crea muchos caminos. A veces, si sabes cómo crear código de bytes, podrías simplemente decir círculo, o podría ser un SVG muy simple, y a veces es un SVG demasiado complicado, y por esa razón, creo que a veces CSS es simplemente, y Adib es mucho mejor. En ese caso, creo que lo hice de esa manera porque solo quería mostrar lo que se puede crear con SVGs, y tal vez en ese ejemplo, sí, creo que Adib sería mejor. Genial. Otro de Stevie R. ¿Cuál fue la herramienta para convertir SVGs a JSX? Para cambiar SVG a... A JSX, lo siento. Sí. El nombre de la herramienta es... Déjame verificar aquí. Se llama svg2jsx.com. JSX.com. Apropiadamente nombrado. Sí. Hace exactamente lo que dice. Sí. Sí. Eso es genial. Entonces, este es de Im Sardon. Pregunta. ¿Has tenido algún problema de rendimiento al trabajar con animaciones SVG de React de los que debamos estar conscientes? Sí. De hecho, uno de los ejemplos que estaba mostrando cuando estaba superponiendo esa ilustración del héroe, fue muy lento. Y fue porque estaba ejecutando Zoom y grabando la charla. Y hacer esto al mismo tiempo mostró que este rendimiento es realmente malo. Creo que a veces tener este tipo de animación con JavaScript hace que tus sitios web sean más lentos. Y a veces es mejor si
Pros and Cons of CSS vs SVG
Usar bibliotecas de JS facilita trabajar con SVGs si no eres experto en CSS. CSS es desafiante para crear ilustraciones únicas, mientras que los SVGs ofrecen más flexibilidad y facilidad de uso. Cuando el diseño es complejo y requiere singularidad, como iconos o logotipos, los SVGs superan a CSS. Gracias por la charla y responder preguntas.
acabas de tener como
CSS como en exceso. Esto sucede con
CSS. Pero también puedo decir que al usar estas bibliotecas de JS, si no conoces bien
CSS, es mucho más fácil hacerlo. Genial. Estupendo. Creo que has respondido prácticamente a esto. Pero a partir de ¿cuáles son los pros y los contras de
CSS versus
SVG? Creo que si quieres crear algo que sea muy único, digamos que quieres crear esa ilustración, donde tengo ese pequeño dibujo animado. Con
CSS sería realmente difícil lograr eso. Pero mucha gente lo hace. Como en CodePen, ves a personas diseñando cosas con
CSS, pero lleva tiempo y es como un div, y posicionas el div en ese lugar. Y con el
SVG es simplemente, lo diseñas y lo exportas. Pero creo que en ese ejemplo de la tarjeta, no necesitaba esa esquina redondeada con
SVG. Así que creo que realmente tenemos que saber cuándo debemos usar un
SVG. Y en este caso creo que cuando tu diseño es complejo y quieres algo que sea único, como un icono, es muy difícil tener ese icono o un logotipo con
CSS. Así que
SVG funcionaría mejor para eso. Y es más fácil lograr mejores resultados. Genial. Bueno, muchas gracias tanto por la increíble charla como por responder todas estas preguntas en las que te puse en aprietos. Definitivamente he aprendido mucho de esto.
Comments