SVG Motion Blur

参考

https://codepen.io/osublake/pen/WZqBjV
https://gsap.com/community/forums/topic/20180-motion-blur-with-svg-gaussianblur-tween-only-the-x-value/
https://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/
https://qiita.com/irico/items/d7acea8c42179b34c361
https://lopan.jp/about-svg/filter/

<svg id="svg">
  <filter id="blur-filter" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur id="fe-blur" in="SourceGraphic" stdDeviation="0"/>
  </filter>
  
  <image id="sprite" width="163" height="161" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/dog-03.png" filter="url(#blur-filter)">
</svg>

<filter>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
画像に対して何らかの加工処理するためのタグ

<feGaussianBlur>（ガウシアンぼかし）

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur
feはフィルター効果用の接頭辞。
画像に対してぼかし処理を与えるための要素。

in

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/in
フィルターをかける対象を示す。この場合、<image>？。初期値がSourceGraphic。

stdDeviation(ディビエイション)

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stdDeviation
X軸とY軸のぼかし量を表す。
値が一つの時は、XとY両方に使用される。
負の値は指定できない。初期値は0。

<image>

https://developer.mozilla.org/ja/docs/Web/SVG/Element/image
svgタグ内に画像ファイルを表示できる。

xlink:href（非推奨）

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
画像の参照先を示す。現在は非推奨でhref属性を利用する。

filter

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter
filter要素で定義した効果を指定。