Home :: Tutorials :: SVG :: Shapes

Circle

<circle cx="25" cy="25" r="20" fill="red"/>

Ellipse

<ellipse cx="25" cy="25" rx="20" ry="10" fill="red"/>

Line

<line x1="5" y1="5" x2="45" y2="45" stroke="red"/>

Path

<path d="M5,5 C5,45 45,45 45,5" stroke="red" fill="none"/>

Polygon

<polygon points="5,5 45,45 5,45 45,5" stroke="red" fill="none"/>

Polyline

<polyline points="5,5 45,45 5,45 45,5" stroke="red" fill="none"/>

Rectangle

<rect x="5" y="5" width="40" height="40" fill="red"/>

Rounded Rectangle

<rect x="5" y="5" rx="5" ry="5" width="40" height="40" fill="red"/>

Use

<defs>
    <rect id="rect" width="15" height="15" fill="red"/>
</defs>
<use x="5"  y="5"  xlink:href="#rect"/>
<use x="30" y="30" xlink:href="#rect"/>