いつまでたってもWeb系技術者の前に立ちふさがる、悪魔の存在「Internet Explorer」…。
Windows10で「Microsoft Edge」が標準ブラウザになってからも、しぶとく生き延びています。
他のブラウザで確認した場合は全く問題がないのに、なぜか「IEだけ」トラブルが発生することが多々あります。
今回はIEでだけ、SVGのサイズが意図したサイズにならない場合の対処法です。
問題発生する状況
どうやら以下の条件で発生するようです。
- imgタグでSVGを表示
- 親要素でサイズ指定
- objectタグでSVGを表示
原因と対処方法
SVGファイルの中でviewBoxとは別に大きさが指定されていることが原因です。
自身で作成したものについてはIllustratorの場合であれば、書き出し時に「詳細オプション」内の「レスポンシブ」にチェックを入れれば解決します。
ダウンロードしてきたものやIllustratorが手元にない場合は、テキストエディターで開いて該当箇所を削除します。
「style属性」「width属性」「height属性」あたりが該当するようです。
IE対応…面倒ですね。
Windows10のサポート終了まではサポートされるようですので、このままだと2025年まで苦しめられるようです…