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.
The example `path` above will generate a "plus" symbol (+) when used inside an SVG drawing.
SVG `path` elements are not usually coded manually, but generated through design programs that can manipulate vector graphics, such as Adobe Illustrator or Inkscape. However, with enough practice, you will be able to make impressive icons writing your own `path` element.
The `d` property is known as "Line commands", and it tells the drawing engine how you want things to be drawn. All line commands come in upper- and lower-case forms, where the upper-case form is absolute positioning, and the lower-case form is relative from the previous point.
The basic line commands are as follows:
* M/m (x y): `M`ove to this point. Imagine this as picking up your pen and placing it on this point. It does not draw anything.
* L/l (x y): draw a `L`ine to this point.
* H/h (x): draw a horizontal line to this point. Equivalent to `L/l x 0`
* V/v (y): draw a vertical line to this point. Equivalent to `L/l 0 y`
* Z/z (no args): draws a line from the last point to this point. No difference in upper/lower case.
There are more complicated line commands, which you can read more about on the [MDN Docs on Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).
`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
<circlecx="100"cy="100"r="50"/>
```
`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
<ellipsecx="100"cy="100"rx="50"ry="20"/>
```
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.