CSSにおけるblur-radius
値はSVGでのstdDeviation
値のちょうど倍になります.
従ってbox-shadow:0 0 20px #000
と等価な影をfeGaussianBlur
で表現するにはstdDeviation="10"
とすれば良いのです.
https://drafts.csswg.org/css-backgrounds-3/#shadow-blur
.box-shadow {
width: 100px;
height: 100px;
margin: 50px;
box-shadow: 0 0 20px #000;
}
svg {
margin: 50px;
overflow: visible;
}
<p>box-shadow</p>
<div class="box-shadow"></div>
<p>svg shadow</p>
<svg width="100px" height="100px">
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="10"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
<polygon points="0,0 100,0 100,100 0,100" fill="#fff" stroke-linejoin="round" filter="url(#shadow)"/>
</svg>
追記)
仕様上はこの通りなのですが, ブラウザによって影の範囲にバラつきがあるようです.