SVG に background-size: 100% 100%; が適用されない時の解決方法

現象

SVG を背景画像に指定し、縦と横を100%にしたが反映されない…

css

.hoge {
  backgournd: url(image.svg);
  background-size: 100% 100%;
}

原因

CSS でサイズを自由に変えても SVG はアスペクト比を維持したままでいるため。

解決方法

SVG の preserveAspectRatio というアスペクト比に関する属性に none を設定する。

SVG

<svg preserveAspectRatio="none"></svg>

これで縦と横100%に表示されました