rect -> Rectangle

Basic Rectangle

<rect x="10" y="10" width="50" height="30" />

• x, y = top-left corner position

• width, height = dimensions

Rounded Corners

<rect x="10" y="10" width="50" height="30" rx="5" ry="5" />

• rx = horizontal corner radius

• ry = vertical corner radius

• If only rx specified, ry matches automatically

With Styling

<rect x="10" y="10" width="50" height="30" fill="blue" stroke="red" stroke-width="2" />

line -> Line

Basic Line

<line x1="10" y1="10" x2="90" y2="50" />

• x1, y1 = start point

• x2, y2 = end point

• Important: Lines need stroke to be visible (no area to fill)

Line End Styles

<line x1="10" y1="10" x2="90" y2="10" stroke="black" stroke-linecap="round" />

• stroke-linecap options:

  • "butt" (default) -> flat ends

  • "round" -> rounded ends

  • "square" -> extends past endpoints

Dashed Lines

<line x1="10" y1="10" x2="90" y2="10" stroke="black" stroke-dasharray="5,5" />

• stroke-dasharray="5,5" = 5 units dash, 5 units gap

• stroke-dasharray="10,3,2,3" = complex patterns

Quick Tips

• Lines have no area, so fill does nothing

• Rectangles can have both fill and stroke

• Both work with transform for rotation/scaling

• Both use viewBox coordinates