---
title: SVG Shapes
---
## SVG Shapes
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
The `path` element is the most commonly seen, and is usually generated by programs designed to export SVG code.
```svg
```
The example `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.
### Rectangle
The rectangle element `rect` draws a rectangle on the screen, and it accepts six attributes.
```svg
```
`x` and `y` assign the position of the top-left corner of the rectangle, and `width` and `height` assign the size of the rectangle. `rx` and `ry` assign the radius of the rectangle corners, similar to the CSS border-radius property.
### Circle
The circle element `circle` accepts three attributes.
```svg
```
`cx` and `cy` assign the position of the center of the circle, and `r` assigns the radius (size) of the circle.
### Ellipse
The ellipse element, `ellipse`, is similar to the `circle` element except the radius is split into two attributes.
```svg
```
Again, `cx` and `cy` assign the position of the center of the ellipse, and now `rx` and `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 `rx` and `ry` are equal, it will form a circle.
### Line
The `line` element is simple, and accepts four attributes.
```svg
```
The `x1` and `y1` attributes assign the first point of the line, and the `x2` and `y2` attributes assign the second point of the line.
### Polyline
A `polyline` is a series of connected straight lines, assigned in a single attribute.
```svg
```
The `points` attribute assigns a list of points, each point separated by a comma.
### Polygon
The `polygon` element is also a series of connected straight lines, but in this case, the last line will automatically reconnect to the initial point.
```svg
```
This example will draw the same shape as the `polyline` above, but it will draw an extra line to "close" the series of lines.
## More Information
MDN Documentation: MDN