SVG Notes: Line & Rect Reference

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