SVGマスターへの道

SVGは「絵の設計図」

SVGは、「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の頭文字をとったものです。日本語にすると「大きさを変えられる、点と線でできた絵」みたいな意味になります。

普通の画像（例えば、スマホで撮った写真や、よく見るJPEG、PNGファイルなど）は、「ピクセル」という小さな色の点の集まりでできています。これを「ビットマップ画像」とか「ラスター画像」と呼びます。これらの画像は、拡大すると点の大きさが目立ってしまい、ギザギザになったり、ぼやけたりしてしまいます。

一方、SVGは「ここに点を打って、そこからあそこまで直線を引いて、このくらいの太さの丸を描いて…」というような、「絵の設計図」のような情報を持っています。この設計図は、文字（専門用語ではXMLという形式のテキストデータ）で書かれています。だから、どれだけ拡大しても、コンピューターがその都度「設計図」を元にキレイに描き直してくれるので、画像が荒れることがありません。これが「スケーラブル（大きさを変えられる）」の一番大きな特徴です。

SVGのメリット（いいところ）

• 拡大・縮小してもキレイ！: さっき説明した通り、どんな画面サイズや解像度でも、シャープで美しい表示が可能です。レスポンシブデザインにも強い味方です。
• ファイルサイズが小さいことがある: 単純な図形やアイコンなら、ビットマップ画像よりファイルサイズを小さくできます。ウェブサイトの表示速度アップにもつながります。
• テキストデータなので編集しやすい: メモ帳のようなテキストエディタでも開いて、数値をちょっと変えるだけで色や形を修正できます。（もちろん、専用のグラフィックソフトもあります）
• CSSやJavaScriptで操作できる: ウェブページで使われるCSS（スタイルシート）で見た目を変えたり、JavaScript（プログラミング言語）でアニメーションさせたり、クリックに反応させたりと、動きのある表現が得意です。
• アクセシビリティに配慮できる: 画像の内容を説明するテキスト情報を含めることができるので、目の不自由な方にも情報が伝わりやすくなります。
• SEOにも少し有利かも？: SVG内のテキストは検索エンジンに認識される可能性があります。

SVGのデメリット（ちょっと苦手なこと）

• 複雑な写真のような表現は苦手: 細かい色の濃淡がたくさんあるような、写真のようなリアルな表現は、ファイルサイズが非常に大きくなったり、そもそも表現しきれなかったりします。そういう場合はJPEGなどのビットマップ画像の方が適しています。
• 古いブラウザでは表示できないことも…？: 今ではほとんどのモダンブラウザがSVGに対応していますが、ごく一部の非常に古いブラウザでは正しく表示されない場合があります。（ただ、これはもうあまり心配しなくても良いレベルです）
• 作るのに少しコツがいる: 手描きでサッと絵を描くようにはいかず、図形を座標で指定したり、パスを組み合わせたりと、慣れが必要です。専用のソフト（Adobe Illustratorや無料のInkscapeなど）を使うと作りやすいです。

SVGとCanvasの違いって？

ウェブで図形を描く技術として、SVGの他に「Canvas（キャンバス）」というものがあります。どちらも絵を描けますが、得意なことが少し違います。

• SVG (ベクター):
  • 図形一つ一つが独立したモノ（DOM要素）として扱われる。
  • 後から特定の部分だけ動かしたり、色を変えたりするのが得意。
  • イベント処理（クリックなど）を個々の図形に設定しやすい。
  • 解像度に依存しない。
  • 複雑なシーンや大量のオブジェクトを描画すると、パフォーマンスが低下することがある。
• Canvas (ビットマップ):
  • 一枚の「絵画用の布（キャンバス）」にピクセル単位で直接絵を描いていくイメージ。
  • 一度描いたものを個別に変更するのは大変（描き直しになる）。
  • ゲームのようなリアルタイム描画や、ピクセル操作を伴う画像処理が得意。
  • 大量の単純な図形を高速に描画できることが多い。
  • 解像度に依存する（高解像度対応には工夫が必要）。

このサイトでは、SVGをメインに解説しますが、ところどころでCanvasとの違いや、どういう時にどちらを選ぶと良いかについても触れていきますね。

このサイトの構成（これから学ぶこと）

このサイトでは、以下の順番でSVGの世界を探検していきます。

各ページでは、できるだけたくさんのサンプルコードや、実際にパラメータをいじって変化を見られるデモを用意するつもりです。一緒に楽しく学んでいきましょう！