Several shapes can be created using SVG drawing. An SVG drawing can use and combine seven shapes: Path, Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.
path element is the most commonly seen, and is usually generated by programs designed to export SVG code.
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
path above will generate a “plus” symbole (+) when used inside an SVG drawing. SVG
path elements are not built manually, but generated through design programs that can manipulate vector graphics, such as Illustrator or Inkscape.
The rectangle element
rect draws a rectangle on the screen, and it accepts six attributes.
<rect x="0" y="0" width="100" height="50" rx="10" ry="10" />
y assign the position of the top-left corner of the rectangle, and
height assign the size of the rectangle.
ry assign the radius of the rectangle corners, similar to the CSS border-radius property.
The circle element
circle accepts three attributes.
<circle cx="100" cy="100" r="50" />
cy assign the position of the center of the circle, and
r assigns the radius (size) of the circle.
The ellipse element,
ellipse, is similar to the
circle element except the radius is split into two attributes.
<ellipse cx="100" cy="100" rx="50" ry="20" />
cy assign the position of the center of the ellipse, and now
ry assign the horizontal and vertical radius of the ellipse, respectively. A larger
rx will give a “fat” ellipse, and a larger
ry will give a skinnier ellipse. If
ry are equal, it will form a circle.
line element is simple, and accepts four attributes.
<line x1="0" x2="100" y1="50" y2="70" />
y1 attributes assign the first point of the line, and the
y2 attributes assign the second point of the line.
polyline is a series of connected straight lines, assigned in a single attribute.
<polyline points="0 100, 50 70, 60 40, 20 0" />
points attribute assigns a list of points, each point separated by a comma.
polygon element is also a series of connected straight lines, but in this case, the last line will automatically reconnect to the initial point.
<polygon points="0 100, 50 70, 60 40, 20 0" />
This example will draw the same shape as the
polyline above, but it will draw an extra line to “close” the series of lines.
MDN Documentation: MDN