Se pueden crear varias formas usando el dibujo SVG. Un dibujo SVG puede usar y combinar siete formas: Ruta, Rectángulo, Círculo, Elipse, Línea, Polilínea y Polígono.
Camino
El path
elemento es el que se ve con más frecuencia y generalmente lo generan programas diseñados para exportar código SVG.
El ejemplo path
anterior generará un símbolo "más" (+) cuando se use dentro de un dibujo SVG. Los path
elementos SVG no se crean manualmente, sino que se generan a través de programas de diseño que pueden manipular gráficos vectoriales, como Illustrator o Inkscape.
Rectángulo
El elemento rectángulo rect
dibuja un rectángulo en la pantalla y acepta seis atributos.
x
y y
asigne la posición de la esquina superior izquierda del rectángulo width
y height
asigne el tamaño del rectángulo. rx
y ry
asigne el radio de las esquinas del rectángulo, similar a la propiedad CSS border-radius.
Circulo
El elemento círculo circle
acepta tres atributos.
cx
y cy
asigna la posición del centro del círculo, y r
asigna el radio (tamaño) del círculo.
Elipse
El elemento elipse`` ellipse
es similar al circle
elemento excepto que el radio se divide en dos atributos.
Una vez más, cx
y cy
asignar la posición del centro de la elipse, y ahora rx
y ry
asignar el radio horizontal y vertical de la elipse, respectivamente. Una más grande rx
dará una elipse "gruesa" y una más grande ry
dará una elipse más delgada. Si rx
y ry
son iguales, formará un círculo.
Línea
El line
elemento es simple y acepta cuatro atributos.
Los atributos x1
y y1
asignan el primer punto de la línea y los atributos x2
y y2
asignan el segundo punto de la línea.
Polilínea
A polyline
es una serie de líneas rectas conectadas, asignadas en un solo atributo.
El points
atributo asigna una lista de puntos, cada punto separado por una coma.
Polígono
El polygon
elemento también es una serie de líneas rectas conectadas, pero en este caso, la última línea se volverá a conectar automáticamente al punto inicial.
Este ejemplo dibujará la misma forma que el polyline
anterior, pero dibujará una línea adicional para "cerrar" la serie de líneas.
Más información
Documentación de MDN: MDN