とある案件で、PCでのチェックはOK、IphoneもOK、AndroidもOKとチェックも終わったなーと思ってたらAndroid4.0の機種でSVGの背景画像が表示されていないという現象が。

他のSVGは表示されている（過去に他の方が作成済み）ので対応していない訳ではない。だがファイル自体はちゃんとアップされている。
別にCSSに何か記述忘れがあるわけではない。

前担当の方に確認をしたらすぐに判明。

IllustratorでSVGを作成し、保存する際にウインドウが出るのだがオプションというトグルが存在していた。こんなところは普通触らない箇所なんだが、そこに大切な項目がありました。

この「レスポンシブ」っていうところ。

これに基本的にはチェックが入っているが、これが入っているせいで作成した際のサイズを律儀に守ってしまうことがあるらしい。

ベクターデータだし、CSSでbackground-size指定すればいいんだから大きめて作っちゃえーとやってしまうとこの罠にはまる。

よりによって白いアイコン作っていたから背景と同じ色でろくに気付けず。

今後はリアルに使用するサイズ感で作成することを心がけねば。。

※これを外すことでどんな影響が出るのかまだテストしておりません。※