Chuck's Academy

SVG en HTML5

Introducción a SVG

En este capítulo, vamos a sumergirnos en el mundo de SVG (Scalable Vector Graphics), un formato gráfico basado en XML que permite crear imágenes vectoriales escalables directamente en el navegador. A diferencia de los formatos de imágenes rasterizadas como JPEG o PNG, SVG no pierde calidad al escalarse, lo que lo convierte en la opción ideal para gráficos que necesitan adaptarse a diferentes tamaños de pantalla y resoluciones. Además, SVG es editable y accesible, lo que significa que se puede manipular con CSS y JavaScript para agregar estilos y animaciones.

¿Qué es SVG y Por Qué Usarlo?

SVG, o Gráficos Vectoriales Escalables, es una tecnología clave en el diseño web moderno, ya que permite crear gráficos claros, precisos y escalables. SVG utiliza matemáticas para definir sus gráficos, a diferencia de los mapas de bits, que dependen de píxeles individuales. Esto significa que un gráfico SVG puede expandirse o reducirse sin perder calidad, ideal para logotipos, iconos, ilustraciones y gráficos en la web.

Estructura Básica de un Archivo SVG

Los archivos SVG están escritos en formato XML, lo que significa que son tanto legibles para los humanos como para las máquinas. A continuación, veremos un ejemplo de un archivo SVG básico que contiene un círculo:

html
"En este código, creamos un elemento SVG con un círculo dentro. El ancho y alto del SVG se definen como 100, que establece el área donde se dibujará el gráfico. Luego, agregamos un elemento circle, definiendo el centro en las coordenadas 50, 50 y un radio de 40. El círculo tiene un borde negro de tres píxeles y un relleno rojo."

Explicación del Código

  • <svg width="100" height="100">: Esta es la etiqueta contenedora que define un área de dibujo de 100x100 píxeles.
  • <circle cx="50" cy="50" r="40": Crea un círculo. cx y cy definen las coordenadas del centro del círculo, y r define el radio del círculo.
  • stroke="black" y stroke-width="3": Establecen el color y el grosor del borde.
  • fill="red": Define el color de relleno del círculo.

Elementos Comunes en SVG

SVG incluye una variedad de elementos para crear diferentes formas. Exploraremos algunos de los más importantes:

Rectángulo

Un rectángulo se define con la etiqueta <rect> y se posiciona utilizando coordenadas x e y en la esquina superior izquierda.

html
"Este código crea un rectángulo en SVG. El rectángulo tiene un ancho de 180 y un alto de 80, posicionado en 10, 10 desde la esquina superior izquierda del SVG. El borde es azul, con un grosor de tres píxeles, y el relleno es amarillo."

Línea

El elemento <line> permite dibujar una línea entre dos puntos especificados.

html
"Aquí dibujamos una línea en SVG. La línea comienza en el punto 10, 10 y termina en 190, 90. Tiene un grosor de dos píxeles y es de color negro."

Elipse

Las elipses son similares a los círculos, pero permiten definir radios diferentes en los ejes horizontal y vertical.

html
"Este código crea una elipse en SVG. El centro está en la posición 100, 50, con un radio horizontal de 80 y un radio vertical de 40. La elipse tiene un borde morado y un relleno rosado."

El Elemento <path> para Formas Complejas

El elemento <path> es una de las herramientas más poderosas en SVG, permitiendo crear formas complejas mediante comandos de dibujo. A continuación, se muestra un ejemplo básico:

html
"En este ejemplo se usa path para crear una curva. La letra M indica la posición inicial en 10, 80. La letra C define una curva Bezier cúbica que pasa por varios puntos, y la letra S crea una curva Bezier suavizada que se conecta con la curva anterior."

Explicación Detallada de los Comandos de <path>

  • M10 80: Mueve el lápiz a la posición (10, 80) sin dibujar nada.
  • C 40 10, 65 10, 95 80: Dibuja una curva Bézier cúbica comenzando en (10, 80) con puntos de control en (40, 10) y (65, 10), y terminando en (95, 80).
  • S 150 150, 180 80: Continúa con una curva Bézier suavizada que se conecta desde el punto final de la curva anterior, terminando en (180, 80).

Este tipo de comandos nos permite crear formas personalizadas y complejas, como logos y gráficos detallados.

Beneficios de Usar SVG en la Web

  • Escalabilidad: SVG se adapta a cualquier resolución sin pérdida de calidad.
  • Accesibilidad y Edición: Al ser un formato basado en texto, SVG es editable y accesible, permitiendo modificarlo fácilmente con CSS y JavaScript.
  • Peso Ligero: Generalmente, los archivos SVG son más ligeros que los formatos rasterizados, lo que permite tiempos de carga más rápidos.

Conclusión

SVG es una herramienta fundamental para cualquier desarrollador web que desee incorporar gráficos dinámicos y escalables en sus sitios web. Ahora que tenemos una comprensión básica de la estructura SVG y de los elementos principales, estamos listos para avanzar. En el siguiente capítulo, exploraremos el sistema de coordenadas y posicionamiento en SVG, una habilidad esencial para crear gráficos precisos y organizados. ¡Te esperamos en el próximo capítulo!


Pregúntame lo que sea