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>