1. SVGって？Canvasって？使ってみるには？
こんにちは。
迫りくるハロウィーンについていこうと遊び心のあるエフェクトを
取り入れたい！と思い色々ググったところ少し発見があったので
備忘録です。
（＊ちなみに、、svcというIT用語もあります。紛らわしいので要注意。
SVC とはsupervisor call の略 出展：e-words )
1-1. SVGとは
Scalable Vector Graphics ( スケーラブル・ベクター・グラフィックス = SVG）は
XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。
アニメーションやユーザインタラクションもサポートしている。
SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
出典：Wikipedia
使い方が解るまでに時間を要しましたが、一度できたら怖くない！
ぜひこれから自分のモノにしていきたいと思います。
See the Pen bVgWNd by Yukyco Hamane (@yukyco) on CodePen.
HTMLをみるとrectという要素を使っているのが解ります。
つまりsvgとrectはセットで使っています。
クリックすると線が回っている様に見せるエフェクトです。
この辺は数学の分野だと思いますがrectはx,y,w,h（x軸、y軸、width, height）
で動きを指定するようです。
以前作成した ハムスターのサンプルLPで 利用させて頂いていた AirThemeでも
使われています。→ サンプルページはこちら：Lulu To Lala
このサンプルページの [wc_fa icon=”arrow-circle-down” margin_left=”” margin_right=””][/wc_fa] をじっと見ると解ります。動くエフェクト。
今までGIFやFlashがお気に入りだったので、勉強していませんでしたが
やっと気楽にSVGも取り入れられるまでに成長しました！
1-2. Canvasとは
そもそもSVGというものは、大きい分類に分けて、Canvasの一部であるということ。
そのCanvasについて、少し調べたところ、JavaScriptベースで図を描くこと
（図を作ること）ができるというコードです。
もうひとつの大きい分類で HTML5の一部の Canvasであり
HTMLでは実現出来なかった Canvasであり、SVGである!
という事が判明しました.
参考にさせて頂いたサイト
http://www.html5.jp/canvas/what.html
http://webkikaku.co.jp/staff/webdesign/svg_for_webdesigner/
+ + 広告 + + +
