Svg part 4

Other Shape Elements

<rect> defines a rectangle:

<svg width="2000" height="2000">
<rect width="300" height="100"
x="20" y="20" fill="green" />
</svg>Try It Yourself

The following code will draw a green-filled rectangle.
<line> defines a line segment:

<svg width="400" height="410">
<line x1="10" y1="10" x2="200" y2="100"
style="stroke:#000000; stroke-linecap:round;
stroke-width:20" />
</svg>Try It Yourself

(x1, y1) define the start coordinates(x2, y2) define the end coordinates.
<polyline> defines shapes built from multiple line definitions:

<svg width="2000" height="500">
<polyline style="stroke-linejoin:miter; stroke:black;
stroke-width:12; fill: none;"
points="100 100, 150 150, 200 100" />
</svg>Try It Yourself

Points are the polyline's coordinates.
The code below will draw a black check sign:
The width and height attributes of the <rect> element define the height and the width of the rectangle.