Understand SVG viewBox
Draw rectangle width and height are the same as viewBox width and height
Canva coordinate:
top left corner
(0, 0) -----------------> +x
|
|
|
|
|
v +y
+ -> Canva width
| + -> Canva height
↓ ↓
<svg width="40" height="40" version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" rx="4" ry="4" width="40" height="40" stroke="black" fill="transparent" stroke-width="5"/>
↑ ↑ ↑ ↑
| | | |
+ -> map to (0, 0) of viewBox (0, 0) | |
| |
+ ---------+ -> rect (width, height)
</svg>