[JS]SVGを始める人にぴったり、ウェブページでSVG画像を安心して利用できるスクリプト -SVGMagic

Post on:2014年1月30日

ページ上の画像や背景画像として使用したSVG画像をSVG非サポートブラウザで表示した際にPNG画像に自動変換するjQueryのプラグインを紹介します。

サイトのキャプチャ

SVGMagic
SVGMagic -GitHub

上記ページを、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

top of page

©2024 coliss