svg rectangles

3.2.1 Some examples

<svg width="200px" height="200px" viewBox="0 0 100 100">
    <use href="grids.svg#grid_100x100"/>
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" width="30" height="30" style="fill:red; stroke:blue; stroke-opacity:0.5; stroke-width:10"/>
    <rect x="10" y="60" width="30" height="30" style="fill:none; stroke:black; "/>
    <rect x="60" y="60" width="30" height="30" style="fill:black; fill-opacity:0.4; stroke:black; stroke-dasharray:9,5;"/>
</svg>

strokes area is half inside the shape and half outside the shape.

 <svg width="200px" height="200px" viewBox="0 0 100 100">
    <use href="grids.svg#grid_100x100"/>
    <rect x="30" y="30" width="40px" height="40px"
    style="fill:none; stroke:blue; stroke-opacity:0.5; stroke-width:10"/>
</svg>

Rectangles with rounded corners

maximum rx= half of the width of a rectangle and maximum ry = half of the height of a rectangle

rx="0" ry="0"

rx="10" ry="10"

rx="20" ry="20"

rx="20" ry="10"

rx="10" ry="20"

rx="20" ry="5"

4.3 Rectangles