Chuck's Academy

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
"Este código SVG crea un rectángulo de 160 por 60 píxeles, posicionado en 20, 20. Tiene un relleno azul y un borde negro de dos píxeles de grosor."

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
"Este código define un círculo en SVG. El centro del círculo está en 100, 50 y su radio es de 40 píxeles. Tiene un borde negro y un relleno verde."

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
"Este código SVG crea una elipse con un radio horizontal de 80 píxeles y un radio vertical de 40 píxeles, centrada en la posición 100, 50."

Línea (<line>)

El elemento <line> dibuja una línea entre dos puntos definidos por los atributos x1, y1, x2, y y2.

html
"En este ejemplo SVG, creamos una línea que va desde el punto 10, 10 hasta el punto 190, 90. El color del trazo es rojo y tiene un grosor de dos píxeles."

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
"Este código SVG crea un triángulo. Los puntos del triángulo se especifican en el atributo points: 50,10; 90,90; y 10,90. Tiene un relleno naranja y un borde negro."

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
"Este ejemplo usa el elemento polyline para crear una serie de líneas conectadas. Los puntos de conexión son 10,10; 60,90; 110,10; y 160,90. La línea es de color azul y no tiene relleno."

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!


Pregúntame lo que sea