Drawing A Polygon with SVG¶
A polygon is a figure with an arbitrary number of straight sides. We can use the polygon
element to make many different shapes such as triangles, hexagons and octagons.
To draw a polygon we use a points
attribute to specify each of the x,y pairs we need to draw the polygon. Here is an example of a blue triangle:
Drawing a Triangle¶
1 2 3 4 |
|
Which renders like this:
Note that the first point is in the lower-left corner (x=10, y=90). The second point is in the right corner (x=90, y=90) and the last point is in the top center (x=50, y=10).
Note that this triangle is called an isosceles because two of the sides are exactly the same length. We don't have to make the edges the same size. We can move the points to make any arbitrary shape.
1 2 3 4 |
|
Which renders like this:
Drawing A Hexagon¶
A hexagon is a shape with six sides.
1 2 3 4 |
|
Drawing an Octagon¶
An Octagon is a shape with eight sides. You might recognize this as the shape of a STOP sign.
1 2 3 4 |
|
Five Pointed Star¶
1 2 3 4 5 6 7 |
|
10 Pointed Star¶
Here is what a 10 pointed star looks like in SVG:
1 2 3 4 5 6 7 8 9 10 11 |
|
And here is how that renders:
If you want to create your own stars, you can do it with this tool: See SVG Star Generator
We will learn about paths next!