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だけ)

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

Twitter