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
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
ycy
definen las coordenadas del centro del círculo, yr
define el radio del círculo.stroke="black"
ystroke-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
Línea
El elemento <line>
permite dibujar una línea entre dos puntos especificados.
html
Elipse
Las elipses son similares a los círculos, pero permiten definir radios diferentes en los ejes horizontal y vertical.
html
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
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!
