Blog

SVG.jsでjQueryのようにSVGを軽快に扱う

2015.02.17Cat:javascript SVG デザイナー

svg.jsという、jQueryで要素を操作するように、SVGを軽快に操作することができるライブラリがあります。

今回はそちらを使ってちょっとオシャレなテキストの表示を試してみました。

 

↓こちらが作ってみたもの

DEMO

 

使い方

大きな流れは以下の通りです

  1. svg.jsをダウンロード
  2. htmlのheadでダウンロードしたsvg.jsを読み込む
  3. SVGを描画する要素を準備して、JavaScriptを記述してSVGを描画する

 

1. svg.jsをダウンロード

svg.js – A lightweight JavaScript library for manipulating and animating svg

↑こちらの「Downloads」というところからsvg.min.jsをダウンロードします。

 

2. htmlのheadでダウンロードしたsvg.jsを読み込む

今回はjQueryも使うので、合わせて読み込んでいますが、

読み込まなくてもsvg.jsは動作させることができます。

 

3.SVGを描画する要素を準備して、JavaScriptを記述してSVGを描画する

HTMLのbodyの中に、SVGを描画する要素を設置します。設置する要素には任意のIDを付けてください。

今回はタイトルのテキストの代わりにSVGを描画するため、h1内に描画することにしました。

HTMLの準備ができたら、いよいよsvg.jsの形式でJavaScriptを記述します。

サイズや位置、フォント、アニメーションのduration, easing, delay、イベントとの連動など、

SVGの基本的な知識は必要となりますが、

jQueryを記述するように、わかりやすく記述することができました。

svg.jsのファイルサイズもjQueryより軽量で、

動作も軽快なようですので、SVGを使ったサイトを制作するときに重宝しそうです。

 

↓詳しい使い方はこちらから確認できます。

svg.js

 

参考サイト
svg.js を触ってみた | 黒くないすべてのものはカラスではない

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ