css

/* CSSのstrokeは中心から内側と外側に向かって線を描画するため、10pxと書いても実際に外側の表示される枠線の太さは5px*/
.text {
  font-size: 180px;
  -webkit-text-stroke-width: 10px;
  -webkit-text-stroke-color: red;
  paint-order: stroke;
}

/* SVGのstrokeは、viewboxの中での割合で描画されるため、viewboxとwidth/heightが一人くない場合は
 * その拡大縮小率と同じ割合で枠線の太さも変わる。stroke=2と書いてもそれは2pxが描画される訳ではない
*/
.svg1 {
  display: block;
  width: 300px;
}

.svg2 {
  display: block;
  width: 50px;
}

html

<p class="text">CSSの場合</p>
<svg class="svg1" viewBox="0 0 300 200">
  <rect fill="red" stroke="black" stroke-width="10" x="0" y="0" width="300" height="200"></rect>
</svg>
<svg class="svg2" viewBox="0 0 300 200">
  <rect fill="red" stroke="black" stroke-width="10" x="0" y="0" width="300" height="200"></rect>
</svg>
<!-- vector-effect="non-scaling-stroke" でも解決可能 -->
<svg class="svg2" viewBox="0 0 300 200">
  <rect fill="red" vector-effect="non-scaling-stroke" stroke="black" stroke-width="10" x="0" y="0" width="300" height="200"></rect>
</svg>