【IE】SVGをimgタグで表示するとIEだけサイズがおかしい時の対処法

  • このエントリーをはてなブックマークに追加

いつまでたってもWeb系技術者の前に立ちふさがる、悪魔の存在「Internet Explorer」…。
Windows10で「Microsoft Edge」が標準ブラウザになってからも、しぶとく生き延びています。

他のブラウザで確認した場合は全く問題がないのに、なぜか「IEだけ」トラブルが発生することが多々あります。

今回はIEでだけ、SVGのサイズが意図したサイズにならない場合の対処法です。

問題発生する状況

どうやら以下の条件で発生するようです。

  • imgタグでSVGを表示
  • 親要素でサイズ指定
  • objectタグでSVGを表示

原因と対処方法

SVGファイルの中でviewBoxとは別に大きさが指定されていることが原因です。
自身で作成したものについてはIllustratorの場合であれば、書き出し時に「詳細オプション」内の「レスポンシブ」にチェックを入れれば解決します。

ダウンロードしてきたものやIllustratorが手元にない場合は、テキストエディターで開いて該当箇所を削除します。
「style属性」「width属性」「height属性」あたりが該当するようです。

IE対応…面倒ですね。
Windows10のサポート終了まではサポートされるようですので、このままだと2025年まで苦しめられるようです…

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*