前回に引き続き、SVG関連の記事です。

svgは使い方が様々あり、
・imgタグとして使う
・cssのbackground-imageとして使う
・svgタグとして使う
といった使い方がありますが、今回はimgタグとして使った時に表示崩れが起きる問題についてです。

IEでimgタグのsrcにsvgを指定した時に崩れる

IE以外のブラウザで使用した時は狙い通りの表示になるが、IEだけは他のブラウザより小さく（サイズによっては大きく）表示されてしまう。。。

これは原因としてはcssに対する記述が足らないことが挙げられます。

 

解決策

svgは自動で親要素にフィットはしないため、css側でimgタグ全体に

img {
	max-width: 100%;
	height: auto;
}

といった記述を行うか、

img[src$=".svg"] {
	width: 100%;
	height: auto;
}

svgタグのみ特別に記述を設定してあげれば解決できます。

ここで注意すべき問題は、必ずheightにautoをかけてあげることです。
これがないと、比率がおかしな状態で拡大縮小されることがあります。

 

私はcssでimgタグ全てにcssを記述する方を推奨します！
※スマホで大きな画像を使った時の崩れ防止にもなりますし。。