IEだけSVGが表示されない!

症状

imgタグにSVGを使うが、IEだけ表示されない。SafariやChromeなどは問題無し。

原因

IEの場合「width」「height」をSVGファイル内に記述しておかないとダメみたい。
イラレや書き出しソフトの設定によっては省略される場合があるので注意!

対策

SVGファイルをテキストエディタで開いて「width」「height」を追記する。

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″>

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″ width=”100″ height=”100″>

SVGを書き出すときの設定をwidth、heightをありに変更しておくと^^
イラレの設定方法はこちら

追記

CSSでサイズを変更する場合は、widthだけでやりがちですが、heightも指定しないと崩れます・・・(もちろんIEだけ)

SVG書き出し手順動画

一連の流れを動画にしてみました^^;

佐賀のウェブやです。
お問い合わせはTwitterからお気軽に^^

Twitter