# [HTML5] Graphics – SVG Shapes

SVG has some predefined shapes. They are elements in the SVG document.

1. SVG Shapes and Elements

SVG supports the followin shapes

• Rectangle : <rect>
• Circle : <circle>
• Ellipse : <ellipse>
• Line : <line>
• Polyline : <polyline>
• Polygon : <polygon>
• Path : <path>

2. Lines

The <line> element is used to draw lines.

• x1, y1 : starting point
• x2, y2 : end point
```<line x1="20" y1="20" x2="100" y2="100" stroke="Blue" stroke-width="2" />
<line x1="100" y1="100" x2="20" y2="180" style="stroke:Red; stroke-width:2;" />
```

3. Multiple Lines

The <polyline> element is used to draw lines that are connected.

• points : x1,y1 x2,y2 x3,y3 (each point is separated by a space)
```<polyline points="20,20 40,20 40,40 60,40 60,60" fill="None" stroke="Red" stroke-width="2" />
```

4. Rectangles

The <rect> element is used to draw rectangles.

• x, y
• width, height
```<rect x="20" y="20" width="150" height="100" fill="Red" fill-opacity="0.5" stroke="Blue" stroke-width="2" />
```

5. Circles

The <circle> element is used to draw circles.

• cx, cy : center
```<circle cx="100" cy="100" r="50" fill="Red" stroke="Blue" stroke-width="2" />
```

6. Ellipses

The <ellipse> element is used to draw ellipses.

• cx, cy : center
```<ellipse cx="100" cy="100" rx="80" ry="50" fill="Red" style="stroke:Blue; stroke-width=2;" />
```

7. Polygons

The <polygon> element is used to draw the polygons (closed shape).

• points : x1,y1 x2,y2 x3,y3 (each point is separated by a space)
```<polygon points="100,50 150,100 100,150 50,100" fill="rgb(255,255,0)" stroke="Red" stroke-width="2" />
```

8. Texts

The <text> element is used to write texts.

• x, y : start point
• dx, dy : relative position from x and y
```<text x="20" y="20" fill="Yello" stroke="Red" stroke-width="1" font-family="Arial" font-size="48pt">Hello World</text>
```

9. Path

The <path> element has a “d” attribute to define the path. The “d” attribute consists of a set of commands.

• M : moveto
• L : lineto
• H : horizontal lineto
• V : vertical lineto
• : curveto
• : smooth curveto
• : smooth quadratic Bézier curveto
• : elliptical Arc
• : closepath

The command can be the upper case (absolutely positioned) or the lower case (relatively positioned)

Let’s draw the triangle with the <path> element.

```<path d="M 100 50 L 150 100 L 100 150 L 50 100 Z" fill="Red" stroke="Yellow" />
```

You can use the relative points too.

```<path d="M 100 50 l 50 50 l -50 50 l -50 -50 Z" fill="Red" stroke="Yellow" />
```