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

web

症状

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