元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【SVG】SVGについて

画像形式のひとつである「SVG」について書きます。SVGは、Webで使える画像形式です。使いどころは限られてしまうかもしれませんが、技術のひとつとして触れていきたいと思います。アニメーションを指定できるので、どのような表現ができるのか探っていきたいです。

SVGとは

SVG(Scalable Vector Graphics)とは、画像形式の一つです。ベクター画像のため拡大・縮小しても境界線がぼやけないという特徴を持ちます。そのため、Web上で綺麗に画像を表示することができます。写真の保存形式としては不向きです。

SVGXMLに準拠していて、テキストエディタで編集可能です。つまり、コードの書き方が分かれば自分で画像を作ることができます。もしくは、イラストレータなどのソフトでSVGファイルを作成することもできます。複雑な形状の図形を作成する場合は、ソフトを利用した方が良いです。

SVGの用途

  • ロゴ
  • アイコン
  • Flashの代替

Webで「ロゴ」や「アイコン」として使えます。Flashの代替技術として考えても良さそうですが、他にもFlashの代替になり得る技術はあります。

SVGのデモ

SVGで円を描画する。

SVGと似た技術

  • CSSのアニメーション
  • canvas

Web上で図形を扱えるという点に注目して、類似する技術を挙げました。

「SVG」「CSS」「canvas」どれもアニメーションができます。どれを選択するかは、「何をしたいのか」や「何を優先するのか」で変わります。

まとめ

  • SVGについて
  • SVGの用途
  • SVGのデモ
  • 類似技術の紹介

行く行くは、プログラムで図形を生成してアニメーションさせていきたいと考えています。