Tutorial de SVG

Resumen del tutorial de SVG

• Es un tutorial de SVG creado por Hunor Márton Borbély, donde se puede aprender paso a paso cómo programar imágenes SVG, desde formas básicas hasta animaciones complejas.
• Cubre diversos temas, como dibujar formas básicas, un árbol de Navidad, una figura de galleta de jengibre y una casa, además de presentar distintas funciones de SVG como clip paths, gradientes, curvas Bézier y trazado de texto sobre una ruta.
• También incluye formas de combinar SVG con otras tecnologías, como dibujar un reloj con JavaScript, agregar interacción a elementos SVG y generar diagramas SVG con JavaScript.

Opinión de GN⁺

• Este tutorial es un buen recurso para que ingenieros de software principiantes aprendan de forma sistemática a programar imágenes SVG, desde lo básico hasta técnicas avanzadas.
• En particular, incluye ejemplos prácticos como crear un reloj que muestre la hora real o agregar interacción a elementos SVG, por lo que parece ofrecer una experiencia de aprendizaje muy útil e interesante para quienes estudian.
• Para quienes quieren aprender SVG, este tutorial puede ser un material de aprendizaje atractivo que amplíe la comprensión del diseño gráfico web y mejore la capacidad de añadir elementos visuales originales a páginas web.

[GN⁺]

Opiniones de Hacker News

• La combinación de SVG y React está subestimada. Puedes aprovechar todas las capacidades y abstracciones de React, y renderizar gráficos arbitrarios en lugar del DOM. Lo he usado para renderizar gráficos y diagramas, y en ciertos casos supera ampliamente a Canvas. Por ejemplo, es útil cuando necesitas interacciones simples pero no gráficos complejos como manipulación a nivel de píxel.
• SVG es un formato flexible, y vale la pena dedicar tiempo a aprenderlo mediante tutoriales relacionados. Si usas SVG junto con componentes de React, puedes crear interfaces increíbles que serían difíciles de lograr solo con HTML.
• Usé un componente interactivo de "Circle of Fifths" hecho con React en un proyecto paralelo de teoría musical. Ese componente está disponible para usarse, y una publicación del blog sobre el proceso de construir un Circle of Fifths con SVG resulta útil.
• En el ejemplo de uso de <clip-path> en SVG, definir el círculo grande dos veces es ineficiente. Como hay que modificar ambos lugares al cambiar el tamaño, ya que se está usando defs, sería mejor definir el círculo una sola vez y reutilizarlo.
• Codificar SVG inline con SVG y React es divertido, y si usas la etiqueta <foreignObject>, puedes aprovechar SVG dentro de HTML, lo cual sirve para tareas que HTML hace mejor (enlaces, imágenes, estilos básicos con flexbox, etc.).
• Hace unos años, cuando usé SVG mientras trabajaba en una interfaz, sorprendí al diseñador al simplemente buscar y reemplazar los códigos de color dentro del archivo SVG para tener dos esquemas de color.
• Expresa agradecimiento por los comentarios positivos sobre el tutorial y corrige los errores encontrados. Aún lo está ajustando; por ejemplo, se pregunta si alguien sabe por qué no funciona la vista previa de miniaturas en Twitter.
• Hay una pequeña molestia con el término "etiqueta" de SVG. Cuando empecé con HTML, llamaba "etiqueta" a todo, pero después de que apareció XHTML empecé a llamarlo "elemento". Todavía pienso en "etiqueta", pero ahora digo "elemento".
• Me gustan especialmente los ejemplos sobre curvas y clipping. Prefiero path, porque permite hacer casi de todo y es menos verboso que otros métodos. Como no soy bueno dibujando y no me gustan las imágenes, construí un proyecto paralelo entero con SVG por rendimiento y comodidad. Gracias a este tutorial me di cuenta de que hay muchas partes que podría refactorizar.
• Me gustaría ver ejemplos que usen texto e imágenes juntos. Ahora mismo estoy batallando con ese problema, y la alineación es complicada. He usado Inkscape, pero termino más del lado de escribir XML para generar lo que necesito.
• Me pregunto si codificar SVG directamente es una práctica común, o si lo habitual es, por ejemplo, dibujar algo en Figma y generar un archivo SVG.