[JS]SVGを始める人にぴったり、ウェブページでSVG画像を安心して利用できるスクリプト -SVGMagic
Post on:2014年1月30日
sponsors
ページ上の画像や背景画像として使用したSVG画像をSVG非サポートブラウザで表示した際にPNG画像に自動変換するjQueryのプラグインを紹介します。
上記ページを、SVG非サポートブラウザで表示した時にはこんな感じに。
IE8だとPNG画像で表示されました
SVGMagicではSVG非サポートブラウザではPNG画像を生成し自動で置き換えて表示するため、代替の画像を用意する必要はありません。
SVGMagicのデモ
デモではSVGとPNGの比較などがあるので、SVGをサポートするブラウザでご覧ください。
まずはシンプルなデモで、下のボタンで画像を縮小・拡大表示します。
左はPNG、右はSVGです。
右はSVGなので拡大しても画像はキレイです。
2つ目のデモは、複数の画像を使用したデモです。
各ボタンでスクリプトのオプションを試すことができます。
最後のデモは、背景画像です。
div要素の背景画像としてSVGを使用します。
SVGMagicの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。
<head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head>
SVG画像をPNG画像に変換するのには、PHPを使用しています。
- converter.php（ダウンロードファイル一式に含まれています）
SVGMagic.min.js内では、配布元のサーバーのファイルを参照しています。
Step 2: HTML
SVGをimg要素で配置します。
<img src='icon.svg'>
Step 3: JavaScript
スクリプトをセットします。
<script>
$(document).ready(function(){
$('img').svgmagic();
});
</script>
SVGMagicは背景画像もサポートします。
スクリプトのオプション「backgroundimage」を「true」にします。
<script>
$(document).ready(function(){
$('.bgimage').svgmagic({
backgroundimage: true
});
});
</script>
オプションでは他にも便利な機能が用意されています。
$('img').svgmagic({
preloader: {url-to-preloader/false}, // 画像が代替する時のプリローダーの有無, default: false
testmode: {false/true}, // テストモードの有無, default: false
secure: {false/true}, // trueにセットするとhttps経由に, default: false
backgroundimage: {false/true}, // 背景画像としての利用の有無, default: false
callback: {false/function} // 画像変更後のコールバック, default: false
});
sponsors
