インラインSVGをCSSでレスポンシブにするにはwidth/height属性とviewBox属性が必要

元々画像として表示していたsvgを、高速化やpathにスタイルを当てたかったので@svgr/webpackを使ってインライン化したところ、かなり崩れてしまった

最初の問題として、画像が途切れてしまう問題があった。<svg width="400" height="200" ... />のようなSVGに対してCSSでheight: 100px;を適応すると、縮小されて200px x 100pxで表示されるのではなく、400px x 100pxのサイズに収まった部分だけ描画されていた

svgのwidth/height属性の情報がCSSから上書きされているような挙動で、相性が悪いのかもしれないと思って、SVGファイルからviewBoxを残してwidth/height属性を消したら（元からviewBoxがなかったものにはviewBox="0 0 {width} {height}"を書き足したら）、ほとんどが期待通りの表示になった

後々知ったことだが、svgrがSVGの最適化としてsvgoを通していて、このsvgoがデフォルトでwidth/heightに一致するviewBoxがあった場合にviewBoxを削除していた(removeViewBox)
つまり、表示エリアに合わせてスケールさせるにはviewBox属性が必要で、width/height属性を消す必要はなかった

おそらくSVGをimgタグで表示したりする場合だと実際の表示領域に関わらずwidth/height属性で指定されたサイズで描画された後に、実際に表示するサイズに合わせてスケールされる（動作に違いがないので、svgoがデフォルトでviewBoxを削除する）のに対して、HTML内にsvgタグを書いたときはwidth/height属性で指定されたサイズが確保されてその中に描画するので、その表示領域を画像サイズから変えるときは本来のサイズ情報を示すviewBoxがないと、画像が適切にスケールされずにはみ出してしまう