# SVG Notes: Line & Rect Reference

# rect -> Rectangle

## Basic Rectangle

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

* `x, y` = top-left corner position
    
* `width, height` = dimensions
    

## Rounded Corners

```xml
<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

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

# line -&gt; Line

## Basic Line

```xml
<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

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

* `stroke-linecap` options:
    
    * `"butt"` (default) -&gt; flat ends
        
    * `"round"` -&gt; rounded ends
        
    * `"square"` -&gt; extends past endpoints
        

## Dashed Lines

```xml
<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