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 pathelemento es el que se ve con más frecuencia y generalmente lo generan programas diseñados para exportar código SVG.
El ejemplo pathanterior generará un símbolo "más" (+) cuando se use dentro de un dibujo SVG. Los pathelementos 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 rectdibuja un rectángulo en la pantalla y acepta seis atributos.
xy yasigne la posición de la esquina superior izquierda del rectángulo widthy heightasigne el tamaño del rectángulo. rxy ryasigne el radio de las esquinas del rectángulo, similar a la propiedad CSS border-radius.
Circulo
El elemento círculo circleacepta tres atributos.
cxy cyasigna la posición del centro del círculo, y rasigna el radio (tamaño) del círculo.
Elipse
El elemento elipse`` ellipsees similar al circleelemento excepto que el radio se divide en dos atributos.
Una vez más, cxy cyasignar la posición del centro de la elipse, y ahora rxy ryasignar el radio horizontal y vertical de la elipse, respectivamente. Una más grande rxdará una elipse "gruesa" y una más grande rydará una elipse más delgada. Si rxy ryson iguales, formará un círculo.
Línea
El lineelemento es simple y acepta cuatro atributos.
Los atributos x1y y1asignan el primer punto de la línea y los atributos x2y y2asignan el segundo punto de la línea.
Polilínea
A polylinees una serie de líneas rectas conectadas, asignadas en un solo atributo.
El pointsatributo asigna una lista de puntos, cada punto separado por una coma.
Polígono
El polygonelemento 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 polylineanterior, pero dibujará una línea adicional para "cerrar" la serie de líneas.
Más información
Documentación de MDN: MDN