画像形式のひとつである「SVG」について書きます。SVGは、Webで使える画像形式です。使いどころは限られてしまうかもしれませんが、技術のひとつとして触れていきたいと思います。アニメーションを指定できるので、どのような表現ができるのか探っていきたいです。
SVGとは
SVG(Scalable Vector Graphics)とは、画像形式の一つです。ベクター画像のため拡大・縮小しても境界線がぼやけないという特徴を持ちます。そのため、Web上で綺麗に画像を表示することができます。写真の保存形式としては不向きです。
SVGはXMLに準拠していて、テキストエディタで編集可能です。つまり、コードの書き方が分かれば自分で画像を作ることができます。もしくは、イラストレータなどのソフトでSVGファイルを作成することもできます。複雑な形状の図形を作成する場合は、ソフトを利用した方が良いです。
SVGの用途
- ロゴ
- アイコン
- Flashの代替
Webで「ロゴ」や「アイコン」として使えます。Flashの代替技術として考えても良さそうですが、他にもFlashの代替になり得る技術はあります。
SVGのデモ
SVGで円を描画する。
SVGと似た技術
- CSSのアニメーション
- canvas
Web上で図形を扱えるという点に注目して、類似する技術を挙げました。
「SVG」「CSS」「canvas」どれもアニメーションができます。どれを選択するかは、「何をしたいのか」や「何を優先するのか」で変わります。
まとめ
- SVGについて
- SVGの用途
- SVGのデモ
- 類似技術の紹介
行く行くは、プログラムで図形を生成してアニメーションさせていきたいと考えています。
