IE8以下に対応していないSVGを表示させる方法(レスポンシブ対応)


SVGとは


SVGとはベクターで書かれた画像ファイルで、サイズの変更を行ってもキレイに表示することが可能です。イラストレーター等で作成することができます。画像をレスポンシブ対応する場合に有用です。

IE8以下のブラウザでは対応していませんので「svg.js」を使って対応するなどの措置が必要になります。(Flashを使っています)

サンプルは以下にあります。モダンブラウザでも普通に表示されますので、IE8で確認してください。


[browser-shot url=”//osumituki.com/svg.html” width=”100″ height=”100″]

IE8以下に対応していないSVGを表示させる方法です。


導入方法


バージョンベクタを指定してGoogleSDNから「svg.js」を読み込みます。

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/vendor/svgweb/src/svg.js"></script>
<![endif]-->
  1. html5.jsがないとIE8でsvg.jsがエラーを出します
  2. jquery.socialbutton-1.9.0.min.js などと一緒に使うと表示が崩れる場合があります
  3. twitter Bootstrap のプルダウンメニューの下に使うなどすると、プルダウンメニューが表示されない不具合がでますので調整が必要です

「html5.js」の導入方法は、「IE8でCSS3セレクタやメディアクエリ、角丸やボックスシャドウに対応させる方法」として、こちらで紹介しています。

また、これらのIE8対応に対する注意点などは、こちらにまとめてあります

SVG設置方法

<!--[if !IE]>-->
<embed src="univ.svg" name="graph" width="300px" type="image/svg+xml" />
<!--<![endif]-->
 
<!--[if lt IE 9]>
<object src="univ.svg" classid="image/svg+xml" width="300px"> <![endif]-->
 
<!--[if gte IE 9]>
<object data="univ.svg" type="image/svg+xml" width="300px"><![endif]-->
</object>
  1. コードの改行位置を変えただけでも動作しなくなります
  2. svg.js を使わない場合は IE8 以下だとインラインフレームのみ表示されます
  3. IE8以下では id をつける場合、ユニークにしないと複数表示できません

その他の関連記事はこちらからご覧ください。


最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!