Why SVG's stroke width is different from border width?

Question

Why <svg>'s 1px stroke-width is wider than <div>'s 1px border-width?

Is it possible to create an <svg> that looks exactly like the <div>below?

<svg>
  <rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" />
</svg>

<div style="margin: 0 0 10px 10px; width: 100px; height: 100px; border: 1px solid red">
</div>

Answer 1

That's just antialiasing. You can turn it off if you want via the shape-rendering CSS property. Adjusting the co-ordinates by 0.5px may also work.

<svg>
  <rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" shape-rendering="crispEdges" />
</svg>

<div style="margin: 0 0 10px 10px; width: 100px; height: 100px; border: 1px solid red">
</div>