【SVG】SVG画像がIEで小さくなる現象を解消してみた

この度TOPの背景画像をフワフワ、ウニョウニョと動くよう変更してみました。

なかなかよろしいのでは？
仕組みとしてはSVGを動かしたアニメーションとします。

がしかしIEでは

ちっっっっっっっっっっさ。
小さい！小さすぎます！

この問題を解消すべく私はコードの樹海へと足を踏み入れた……

そもそもなぜこの画像だけ小さくなる？

SVGアニメーションをするために、表示方法はimgタグではなくHTMLソースコードへの直書きです。
そのためimgへのスタイル設定も一切効かない状態となっております。
もしやそのあたりが原因なのでは？と探ってみることにしました。

1.SVGの記述に縦幅と横幅の設定をする

IEでSVGファイルが豆粒みたいになる現象を回避する | GRAYCODE HTML&CSS

IE11以前のブラウザでIllustratorなどから書き出したSVGファイルを正しく表示する方法を解説します。

https://gray-code.com/html_css/setting-correct-view-for-svg-file-on-ie/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2880 1200" width="2880" height="1200">

最後に記述した「width=”2880″ height=”1200″」この部分ですね。
widthとheightを記述するときちんと本来の大きさを取り戻すと思います。

しかしこれだけでは解決しません。何故ならこのSVGはブラウザの横幅に依存してほしかったからです。
固定の大きさならこれで解決しますが、横幅依存のレスポンシブともなればこのままではいけません。

2.親要素に縦横の設定をする

webmanab.html

webmanab.html projexct

https://webmanab-html.com/tip/svg-height/

どうやら親要素に縦横幅の設定があれば良いようです。
（横幅だけで解決することもあるので、一つずつ含めながらチェックしていきましょう）

二つの親はどちらもposition:absoluteとして、縦横は全て100%に設定。
さらにその親へ、縦横比を保つために擬似要素afterで高さを保ちます。

これで解決しました！
しかもこちらの設定だけで、1.の縦横比をHTMLに記述するのも消してみましたがくずれなく安定して表示されていました。

SVGは画像のようで画像ではない、パスの情報ですので、細やかな設定を心がけましょう。
それとIEのチェックも逐一忘れずに！（ブラウザは統一されてほしいですけど…）