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/

+ + 広告 + + +