SVG en HTML5
Formas en SVG
En este capítulo, profundizaremos en las formas básicas disponibles en SVG, que son la base para construir gráficos y dibujos. SVG ofrece una variedad de formas geométricas que podemos combinar, transformar y estilizar para crear gráficos complejos.
Formas Básicas en SVG
SVG incluye varias formas geométricas que podemos definir mediante etiquetas específicas, cada una con sus atributos para determinar posición, tamaño y estilo. Las formas más comunes incluyen rectángulos, círculos, elipses, líneas y polígonos.
Rectángulo (<rect>
)
El elemento <rect>
crea un rectángulo en SVG. Podemos controlar su tamaño y posición usando los atributos x
, y
, width
y height
.
html
Círculo (<circle>
)
El elemento <circle>
permite crear un círculo usando los atributos cx
y cy
para la posición del centro y r
para el radio.
html
Elipse (<ellipse>
)
El elemento <ellipse>
permite definir una elipse, similar al círculo, pero permite tener radios diferentes en los ejes X y Y, lo cual es útil para crear formas ovaladas.
html
Línea (<line>
)
El elemento <line>
dibuja una línea entre dos puntos definidos por los atributos x1
, y1
, x2
, y y2
.
html
Polígono (<polygon>
)
El elemento <polygon>
permite crear formas con múltiples lados especificando una serie de puntos a través del atributo points
.
html
Polilínea (<polyline>
)
El elemento <polyline>
es similar a <polygon>
, pero las líneas no se conectan al punto inicial, lo cual es útil para crear líneas quebradas o rutas abiertas.
html
Combinar Formas para Crear Gráficos Complejos
Las formas en SVG se pueden combinar y superponer para crear gráficos complejos. Por ejemplo, podemos combinar varios círculos, rectángulos y líneas para formar ilustraciones o gráficos personalizados. Con las herramientas de posicionamiento y transformaciones que exploraremos en otros capítulos, puedes disponer estas formas de forma organizada y con gran precisión.
Conclusión
Las formas en SVG son los bloques de construcción fundamentales para crear gráficos vectoriales. Al dominar el uso de estas formas básicas, puedes comenzar a experimentar con diseños y composiciones.
¡Nos vemos en el próximo capítulo!
