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

Sponsored Link


SVGとは


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

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

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


[browser-shot url=”http://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 をつける場合、ユニークにしないと複数表示できません

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


宇都宮の総合物流会社ユーユーワールドが「ご飯にかけるギョーザ」を栃木県内の道の駅や東北自動車道のサービスエリアなどで販売します。



大阪でトラウマになった人続出のコマーシャルに出演していた鈴木奈々がついに関東人を襲撃。(動画あり)


Sponsored Link

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

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


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。