SVG series - 2, draw some shapes

rect

x, y: coordinates of the starting point. (upper left corner)
width, height: width and height.
rx, ry: corner radius. If only one is specified, the other will be assigned the same value.

Four rectangles:

<rect fill="red" height="50%" width="50%" x="0" y="0"/>
<rect fill="pink" height="50%" width="50%" x="50%" y="0"/>
<rect fill="blue" height="50%" width="50%" x="0" y="50%"/>
<rect fill="yellow" height="50%" width="50%" x="50%" y="50%"/>

Effect:

Rounded Rectangle:

<rect fill="red" height="50%" width="50%" x="0" y="0" rx="40"/>
<rect fill="pink" height="50%" width="50%" x="50%" y="0" rx="80"/>
<rect fill="blue" height="50%" width="50%" x="0" y="50%" rx="120"/>
<rect fill="yellow" height="50%" width="50%" x="50%" y="50%" rx="50%"/>

Effect:

circle

cx, cy: coordinates of the center of the circle.
r: radius.

<circle cx="300" cy="300" r="200" fill="pink"/>

Effect:

oval ellipse

cx, cy: coordinates of the center of the circle.
rx, ry: two radii.

<ellipse cx="300" cy="300" rx="300" ry="200" fill="pink"/>

Effect:

straight line

x1, y1: coordinates of the starting point.
x2, y2: End point coordinates.

<line x1="0" y1="0" x2="300" y2="300" stroke="red" stroke-width="1"/>

Effect:

polyline

points: Coordinate string. x1 y1, x2 y2, x3 y3…

<polyline points="50 0,61 35,98 35,68 57,79 91,50 70,21 91,32 57,2 35,39 35,50 0"
		  fill="red"
/>

Effect:

polygon

Unlike polylines: polygons are automatically closed and connected end to end.

<polygon points="50 0,61 35,98 35,68 57,79 91,50 70,21 91,32 57,2 35,39 35"
		 fill="red"
/>

Effect:

path path

Too complicated to mention.