プロフィール:
北海道札幌市のイメージナビ株式会社のエンジニアによるブログです。
実績紹介、技術情報などを不定期ですがポストしていきます。
よろしくお願いいたします!

月別アーカイブ: 2015年7月

HTMLでのSVGの利用について

Webで使用される画像形式のひとつにSVGというものがあります。このSVGとは何か、HTMLでどのように利用するのかを説明します。

 
SVG Logo

 
■SVGとは
SVG(Scalable Vector Graphics)とはAdobe Illustratorで作成したようなベクター形式の画像を表示する技術です。ベクター形式の画像はWeb上で一般的に使われているJPEGやPNGなどのビットマップ形式とは違い、画像を構成する点の座標位置が記録されているので、それらの座標位置の点と点を結ぶ線を演算して描画します。そのため拡大縮小しても画質が劣化しません。

例えば、ビットマップ形式の画像ではAppleのレティナディスプレイなど高解像度ディスプレイに対応させる場合、二倍サイズのJEPGやPNGの画像を用意し、実寸サイズに縮小表示する方法で画質の劣化を抑えていますが、SVGのベクター形式では解像度に依存しないためその必要はありません。

 

■SVGに対応しているブラウザ
・Internet Explorer 9以上
・Firefox 3.0以上
・Google Chrome 4.0以上
・Mac OS X Safari 3.2以上
・Opera 9.0以上
・iOS Safari 3.2以上
・Androidブラウザ 3.0以上

このようにPCやMacを始め、スマホやタブレットなどでも様々なブラウザに対応しています。SVG自体は1998年に開発され、2001年にSVG 1.0がW3C勧告として公開されましたが、当時はブラウザの対応が追いついていませんでした。特にInternet Explorer(IE)の対応が遅く、2011年登場のIE9までは非対応となっていました。最近になりようやくブラウザの対応が進んだこともあってHTML5と共に注目されるようになりました。

 

■SVGファイルの設置方法
画像ファイルと同じ扱いで<img src=”” />タグでSVGを読み込む方法が1つです。

 例:
 <img src=”images/logo.svg” alt=”ロゴ”>

 
他にはファイルではなく、SVGを<svg>~</svg>というタグで囲われたコードとして表記することも可能で、コードをHTMLの中にインラインで記述する方法もあります。

 例:
 <svg id=”line_logo” x=”0px” y=”0px” width=”800px”
  height=”220px” viewBox=”0 0 800 220″>
  <g class=”image”>
   <path d=”M73.994,147.974h23.329V73.988H73.994V147.974z
    M73.994,41.246V58.99h23.329V41.246H73.994z”/>
    :
   (省略)
    :
  </g>
   :
  (省略)
   :
 </svg>

 
■SVGファイルの中身
SVGファイルの中身はXMLをベースとしたものなのでコードをテキストエディタなどで直接編集することも可能で、画像エディタを介することなく配色やサイズなどを変更することができます。もちろんAdobe IllustratorなどのソフトでSVGファイルを出力することも可能です。

 

■様々なフィルター
ぼかしや色調の変更様々なフィルターが用意されています。CSSでも装飾でき、アニメーションなどを加えることも可能です。

 

■デモを作ってみました
いくつか簡単なデモを作ってみました。拡大縮小のデモでは実際にウインドウサイズを変えてみると画像の大きさが変わるにもかかわらず画質は劣化していないことが解ります。

拡大縮小

マップ

フィルター

アニメーション

※クリックすると別ウインドウで開きます
※IEでは表示が不完全になる場合があります

 

■問題点
上記デモのようなロゴマークやアイコンなど単純な形状であればコードの記述は少なく、処理を軽くすることもできますが、複雑なイラストではコードも膨大になり処理内容も大幅に増えてしまいます。環境によって読み込みや描画が遅れたりすることもあるので、ブラウザの描画エンジンの性能やデバイスの処理能力も必要になってきます。ですが、SVGが開発された当時よりもブラウザもデバイスも比べものにならないほど性能は向上していますし、今後も向上していくでしょうからさほど問題ではないのかもしれません。

また、IEの場合はIE9からSVGがサポートされているものの、まだ完全ではないようなので正しく表示されるかどうか注意する必要があります。今月末にリリース予定のWindows10に搭載される新しいブラウザ(Microsoft Edge)でどのような実装になるか興味深いところです。

 

■余談
当ブログのようにWordPressでSVGを使用する際は、WordPressのfunctions.phpファイルの修正かプラグインのインストールが必要になります。「Scalable Vector Graphics (SVG)」というプラグインを使う例が多いようですが、なぜかうまく動作しなかったため、今回は「SVG Spritemap Manager」というプラグインをインストールしました。これにより、WordPress管理画面のメディアからSVGファイルのアップロードと表示が可能になりました。

 

■まとめ
未だにIE8を最低限の対応環境としているサイトが多いので環境によっては積極的に使えない場合もありますが、今後はSVG非対応の古いブラウザは減少していき、IE9以降を最低限の対応環境とするサイトが増えるのではないかと思います。そうなればSVGを利用できる環境も増えていきますので、どんどん普及していくのではないかなと期待しています。

 

この記事に関するご感想、その他ご用命などございましたら、こちらよりお願いいたします。