お久しぶりです。
ティーエスフォートのWEBデザイナー橋本です。

今回は「SVG」を使ったホームページ制作について記事を書きたいと思います。
まず、SVGとは何か？についてですが、SVGとはScalable Vector Graphicの略でXML(Extensible Markup Language)で記述されています。回転・拡大・移動は勿論、レイヤーも保持しているため非常に柔軟です。もともとはベクタの画像形式なので拡大などで荒れることはありません。

わかりやすくいうと「ヤバイ」んです。

さて、どんな時にSVGを使うかというと「クリッピングマスク」や「アニメーション」など多岐に渡りますが、私が一番利用するのはアイコンの代替えです。弊社で行っているレスポンシブデザインはRetinaディスプレイモデルの端末を扱う場合、単純に画像解像度が2倍になってしまいます。そうなるとデータ料は4倍に膨れ上がりページスピードを下げてしまいます。

ということでSVGを扱うことで、データ料の軽減と画像荒れ対応という敷居を簡単に超えられます。
そういう意味ではcanvasも便利なのですがjsを書くのが面倒なのでマークアップに馴れたコーダーからするとSVGの方が扱いやすいのではないかと感じます。

構文は下記のようになり、直感的に判りやすいものとなります。
たったコレだけの記述でアニメーションするんです。世の中便利になりました。


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="demo" cx="10" cy="10" r="10" fill="#ccc" />
<animate
xlink:href="#demo"
attributeType="xml"
attributeName="cx"
dur="1s"
from="10"
to="290"
repeatCount="indefinite" />
</svg>


似たような文章で


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="10" cy="10" r="10" fill="#ccc">
<animate
attributeType="xml"
attributeName="cx"
dur="1s"
from="10"
to="290"
repeatCount="indefinite" />
</circle>
</svg>


上記のものでもきちんと動作します。
最初の文章ではIDに対して記述命令を出していましたが、次の文章では<circle></circle>内に<animate>タグを入れ子にして記述しました。これでユニークIDの管理も楽ですね。

SVGを賢く使えば図形アニメーションはもちろん、画像をクリップしてクリップ領域のみをアニメーションさせるなんてことも簡単にできますね。恐ろしいSVG・・・。
では次にjavascriptで動的に生成してみます。わかりやすいようにひとつひとつ定義していきます。

 

<div id=”create”></div>
<script>

//SVGの定義
var ns = ‘http://www.w3.org/2000/svg’;
var svg = document.createElementNS(ns, ‘svg’);
svg.setAttribute(‘width’,  ‘200’);
svg.setAttribute(‘height’, ‘200’);

//円の定義
var circle = document.createElementNS(ns, ‘circle’);
circle.setAttribute(‘cx’, ‘100’);
circle.setAttribute(‘cy’, ‘100’);
circle.setAttribute(‘fill’, ‘#c44’);
circle.setAttribute(‘id’, ‘demo’);

//アニメーションの定義
var animate = document.createElementNS(ns, ‘animate’);
animate.setAttribute(‘attributeType’, ‘xml’);
animate.setAttribute(‘attributeName’, ‘r’);
animate.setAttribute(‘dur’, ‘1s’);
animate.setAttribute(‘from’,  ‘0’);
animate.setAttribute(‘to’, ‘100’);
animate.setAttribute(‘repeatCount’, ‘indefinite’);

//追加
circle.appendChild(animate);
svg.appendChild(circle);
document.getElementById(‘create’).appendChild(svg);

</script>

これでID「create」内に円系アニメーションが実装されました。
createElementNS関数はcreateElement関数と違いHTMLのオブジェクトではなくSVGのオブジェクトを扱う際に使います。後はプロパティを入力して最後に追加すればいいだけ。便利な世の中です。

さて、最後に生成したSVGとjQueryを使ってクリックイベントを作ります。
jQueryの$関数に先ほどのsvgをぶち込み。クリック時に塗りを黒に指定してみます。

$(svg).on(“click”,function(){
$(this).find(‘#demo’).css({
‘fill’:’#000′
});
});

.find()で小要素を指定したのはSVGの中にID[DEMO]という円を操作するためです。
$(svg).css()では塗りが存在しないため動きません。

 

ということで今回はSVGの紹介がメインとなってしまいましたが、私の持っているiPhoneではcanvasよりもSVGの方が圧倒的に早く動作したことから、簡単に描画を行うならSVGを使ってみてはいかがでしょうか？

javascriptと組み合わせれば大抵のことはできそうです。
SVGはイラストレーターから書き出せるので単純な図形だけでなく、複雑なパス操作も可能なので将来性を感じますね。

以上、WEBデザイナーの橋本でした。

投稿日：2015.10.20