Understanding SVG Stroke and Fill
This is quick little demo to show you how stroke and fill work with SVG objects. Let’s start by drawing two identical squares.
Now, to the second square, let’s add a stroke with width 20.
We kept the size of the square the same, but the inner square got a little smaller. This is because the stroke applies itself evenly to the outer edge of the square, with half the stroke (10) inside the square and half the stroke outside the square. We can verify this by drawing a third square that has the same area (
stroke-width / 2) x
stroke-width / 2) as the second square.
The third square, in purple, has the same outer dimensions as the second square.
I hope this helps. Now, go forth and visualize!