Tutorial de SVG

 (svg-tutorial.com)
6 puntos por GN⁺ 2023-12-08 | 1 comentarios | Compartir por WhatsApp
  • Es un material para aprender SVG que permite dibujar imágenes directamente con código dentro de HTML, siguiendo un recorrido paso a paso desde formas básicas hasta interacción.
  • El flujo de aprendizaje parte de elementos básicos como viewBox, polygon y polyline, y se amplía hacia path, curvas de Bézier y arc.
  • La parte de transformaciones cubre rotación, traslación, reutilización, escala y transformaciones generales; la parte de CSS conecta con animaciones, hover, animación basada en rutas y SVG inline en CSS.
  • En los temas avanzados se tratan texto, clip-path y gradientes; con JavaScript se practican un reloj que muestra la hora real, interacción, diagramas basados en datos y descomposición en múltiples componentes.
  • También ofrece enlaces a editores para line, circle, rect, polyline, polygon, text, curvas de Bézier cuadráticas/cúbicas y arc, para experimentar directamente con cada elemento.

Estructura del tutorial

Elementos SVG y segmentos de path para practicar

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-12-08
Comentarios de Hacker News

  • La combinación SVG + React está subestimada. Permite renderizar gráficos arbitrarios en lugar del DOM, usando la misma abstracción y potencia de React, y creo que para algunos usos, como renderizar grafos o gráficos, es mucho mejor que Canvas.
    Es especialmente buena si no necesitas algo gráficamente complejo como manipulación a nivel de píxel y solo requieres un poco de interacción. Para hacer efectos de hover en Canvas, tienes que calcular manualmente sobre qué elemento está el mouse, lo cual es engorroso; en SVG puedes usar funcionalidad integrada como onmouseover.

    • Exacto. A veces se siente como magia poder poner listeners de clic en SVG y darle estilo con CSS como si fuera HTML común, y React / JSX hace que sea fácil de usar.
    • ¿Hay algún buen material introductorio sobre este tema? También soy casi principiante en React, pero creo que podría ser bastante divertido profundizar en esto.
      Me gustaría tener algún ejemplo funcional que sirva de guía o inspiración.
    • Una vez hice un componente de segmentación de imágenes + etiquetado usando Preact.js y SVG para el cliente, y quedó bastante bien. Lo recomendaría para este tipo de aplicaciones.
    • Sí. Hay muchos casos en los que HTML Canvas tiene mucho mejor rendimiento, pero si no vas a crear el próximo Figma, trabajar con SVG es mucho más cómodo.
    • Estoy programando patrones para cortar con GlowForge usando React & SVG, y funciona muy bien.

  • En general es un material excelente y los ejemplos son realmente claros. Sin embargo, en la parte de clip-path, el código propuesto termina describiendo el círculo grande dos veces, así que si quieres cambiar su tamaño tienes que modificar dos lugares.
    Como ya se está usando defs, creo que sería mejor reutilizar la misma definición.

    • Ni siquiera hace falta el segundo elemento; basta con renderizar el círculo normalmente y luego referenciarlo dentro de clipPath.
      Personalmente también quitaría el envoltorio con <g>. Nunca entendí por qué se recomienda esa estructura y no parece aportar nada, salvo en casos muy raros en los que quieres poner un elemento que se renderizaría si no estuviera dentro de <defs>. En situaciones como defs/circle del ejemplo, normalmente lo correcto es usar <symbol>.
    • Es cierto, y es una buena idea. Tal vez pueda agregar una nota al respecto.

  • Realmente genial. SVG es un formato limpio y flexible, y como está directamente relacionado con un proyecto paralelo que tengo en curso, pienso tomarme el tiempo para seguir el tutorial.
    Como otros, me resultó bastante divertido crear componentes de React basados en SVG. React y JSX facilitan agregar interacción, y SVG permite crear UI que no se pueden hacer fácilmente solo con HTML.
    Una vez publiqué un componente de React que renderiza un Círculo de quintas interactivo para un proyecto paralelo de teoría musical. Todavía hay mucho por hacer, pero ya es usable: https://github.com/epiccoleman/react-circle-of-fifths
    También escribí un artículo sobre el proceso de crear un Círculo de quintas con SVG, y me gusta especialmente la parte intermedia de la explicación, donde se sigue el proceso de dibujar elementos complejos: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    Ahora estoy creando un generador de diagramas de diapasón con un enfoque similar, y ha sido útil poder volver a consultar mi artículo anterior como referencia. Lo bueno de dejar por escrito lo que haces es que puedes “reproducir” cómo resolviste el problema.

  • Me gusta este material. En React hice algunos SVG inline y les agregué interacción, y es realmente divertido jugar con eso.
    En particular, la etiqueta <foreignObject> es útil. Permite poner HTML normal dentro de SVG, así que puedes manejar dentro de un proyecto de arte SVG cosas que HTML hace mejor, como enlaces, imágenes y estilos básicos con flexbox.
    Para el autor: algunos enlaces del sitio no funcionan. El bio.link al pie de la página y el enlace al demo interactivo de curvas Bézier en Day 11, “How to Draw Quadratic Bézier Curves with SVG”, están caídos.

    • Ya arreglé el enlace del demo interactivo. Ese sitio quizá esté hecho con Vue, y parece que los enlaces profundos no siempre funcionan bien.
      En el caso de bio.link no veo el problema; me da curiosidad saber qué error te aparece.
    • En la página https://svg-tutorial.com/svg/transform, el enlace “next example” al pie también apunta a /svg/path y da 404; parece que el enlace correcto es /svg/use.
    • Siempre hay algo roto. Lo revisaré.
      No conocía foreignObject, pero está buenísimo.

  • Hace unos años, mientras trabajaba en una interfaz, estaba usando SVG para parte de los gráficos. Había dos esquemas de color, pero uno de los gráficos solo existía en un esquema, así que crucé el pasillo para pedir el código hex del otro color.
    Me sorprendió mucho ver que el diseñador abría el archivo SVG y simplemente buscaba y reemplazaba todos los colores para crear la segunda variante.

    • Nunca se me había ocurrido. Es un gran tip que algún día puede ahorrar mucho tiempo.
    • Interesante; ¿podrías explicar un poco más la parte de “crucé el pasillo para pedir el código hex del otro color”?

  • Excelente. Me gustaron especialmente los ejemplos de curvas y clipping, que todavía me cuestan.
    Personalmente prefiero path, porque puede hacer casi todo y es menos verboso que otras alternativas.
    Llevo mucho tiempo aprendiendo, pero siento que todavía me queda mucho por aprender. Dibujo realmente mal y tampoco me gustan mucho las imágenes, así que por comodidad y rendimiento hice todo un proyecto paralelo en SVG.
    Después de ver el material de hoy, creo que voy a tener que refactorizar bastante: https://eddiots.com/1

    • Me alegra que haya sido útil. El cómic también está genial.

  • Gracias por el buen feedback; corregí varios errores que encontraron. Si todavía hay algo que no funciona, agradecería que me lo avisaran. Todavía estoy haciendo algunos ajustes finales
    Por ejemplo, ¿alguien sabe por qué no funciona la vista previa de la miniatura en Twitter? En las subpáginas funciona bien

  • Muy bueno. El problema con el que estoy peleando ahora es texto + imagen, así que estaría bueno tener uno o dos ejemplos relacionados
    La alineación es un verdadero dolor de cabeza. También probé Inkscape, pero para crear lo que necesito definitivamente estoy más cerca de “escribir el XML a mano”

    • No experimenté mucho con texto, salvo un ejemplo para hacer que siga una línea
      Conozco text-anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      Y alguien sugirió que la etiqueta foreignObject podría ser útil aquí: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • El texto definitivamente es engorroso. Armé rápido algo de código Python que genera tablas con svgwrite, y colocar el texto en la posición deseada fue un infierno
      Al final terminé ajustando varios valores a ojo y cerrándolo con un “esto es suficientemente bueno”. Coincido con el pedido de ejemplos de disposición de texto no trivial
      [0] El enlace de GitHub está en el perfil
    • La función de alineación de Inkscape a mí me funciona bien. Cuando necesito más precisión, presiono ctrl+shift+x e ingreso las coordenadas directamente
      El editor XML de Inkscape se cae bastante seguido en mi entorno, pero si uno recuerda guardar después de cada edición, se puede usar

  • ¿Cómo se hace normalmente? ¿La gente programa SVG directamente, o dibuja en algo como Figma y luego genera el archivo SVG?

    • Tengo formación como diseñador gráfico, así que normalmente dibujaba directamente en Inkscape o importaba desde otros programas
      Reducir el tamaño de los archivos de http://shapeoko.github.io/Docs/ a un nivel razonable requirió bastante trabajo
      Más adelante también hice un mecanismo para que, al hacer clic en una imagen, se abriera en una ventana nueva: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      Y pude hacer que, al hacer clic en el nombre de una pieza en la lista de materiales, se resaltara esa pieza en el diagrama
    • La gente de diseño probablemente use su editor preferido, como Illustrator, Sketch o Inkscape. Los coders también pueden hacer pequeños retoques con ese software, pero si hay interacción, normalmente editan el SVG directamente
      Para formas o curvas complejas, a veces las pongo en un editor en línea para visualizarlas; esta herramienta es buena: https://yqnn.github.io/svg-path-editor/
    • Para gráficos más complejos, probablemente siga siendo mejor usar herramientas de diseño. Pero los gráficos simples se pueden programar a mano
      Si necesitas una flecha o un ícono de menú hamburguesa, puedes ir directo al código. A veces empiezo con papel y lápiz, y luego voy ajustando coordenadas hasta que se vea suficientemente bien
    • Con la aparición de nuevos modelos vectoriales basados en transformers, como el de Adobe, generar SVG será más fácil que nunca: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • En los proyectos en los que trabajé, creaba o editaba los archivos con Inkscape y luego los enlazaba como imágenes normales
      A veces necesitaba un gráfico único para una página estática específica y lo incrustaba dentro de la página, pero en esos casos el gráfico no era demasiado complejo

  • Una de las cosas que descubrí hace poco es que, dentro de una aplicación React, se pueden poner etiquetas SVG en línea como si fueran etiquetas JSX
    No sé si esto es exactamente soporte de primera clase o si Webpack se encarga de procesarlo, pero en algunos casos se siente muy bien crear componentes SVG con lógica. Ahora se puede cambiar la forma del SVG, los colores, omitir algunas secciones, etc., con lógica basada en React

    • Es bueno si el SVG es simple o si requiere muchas variaciones
      Pero si pones el código SVG en línea, el navegador no puede cachear la imagen. Si el SVG es grande o solo hay unas pocas variaciones, puede ser mejor tener endpoints separados para cada variante de imagen
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • Correcto. Desde HTML5 se puede poner SVG en línea, y no hace falta nada como Webpack. Simplemente funciona
      Uno de los ejemplos de este tutorial también es un diagrama basado en datos generado en React. Al combinar ambos se pueden hacer cosas bastante interesantes