SVGは「図形を数値で描く画像」
SVGはScalable Vector Graphicsの略で、図形を点や線、曲線といった情報で表す画像形式です。あらかじめ色を塗った絵を保存するのではなく、「ここからここへ線を引く」といった描き方の指示を保存します。
そのため、表示するときにブラウザがその指示をもとに毎回きれいに描き直します。これがSVGの大きな特徴で、サイズを変えてもなめらかさが保たれる理由です。
ビットマップ画像との違い
JPEGやPNGは「ビットマップ画像」と呼ばれ、細かな点（ピクセル）の集まりで絵を表します。点を並べて表現するため、大きく拡大すると点が目立ち、ぼやけたりギザギザになったりします。
一方SVGは図形の指示で描くため、どれだけ拡大しても点が荒くなることがありません。写真のような複雑で繊細な絵にはビットマップが向き、線や面で構成されたシンプルな図にはSVGが向く、という住み分けになります。
実務ではどこで関係する？
SVGとはは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
SVGについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
拡大しても崩れない理由
ビットマップは決まった数の点で絵を持っているため、拡大すると点を引き伸ばすことになり荒くなります。点の数が増えるわけではないからです。
SVGは点ではなく図形の定義を持っているので、拡大すればその大きさに合わせて描き直されます。元の解像度という概念がなく、どんなサイズでもくっきり表示できるのです。これがロゴやアイコンに重宝される理由です。
SVGが向いている用途
SVGはあらゆる画像に万能というわけではありません。得意な場面を知って使い分けると、見た目もファイルサイズも良いバランスになります。
- ロゴやアイコンなど、線と面で構成された図
- さまざまな画面サイズで大きさを変えて表示したいもの
- グラフや図表など、シンプルな図形の集まり
- 色を後から変えたい、軽い装飾的なイラスト
- 写真のように繊細で複雑な絵には使わない
SVGのうれしい副次効果
シンプルな図であれば、SVGはファイルサイズが小さく済むことが多く、表示も軽くなります。さらに、文字や色をあとから調整しやすいのも便利な点です。
高精細な画面でもにじまずに表示できるため、近年の多様な解像度の端末に対応しやすいのも強みです。アイコンやロゴをSVGにしておくと、どの画面でもくっきり見せられます。
見え方を端末ごとに確かめる
SVGの強みは、いろいろな画面サイズや解像度で表示してみると実感できます。スマートフォンと大きなディスプレイの両方で確認すると、崩れないことがよく分かります。
作ったページを関係者に見てもらうときは、ギガサイト便のような一時URLで共有すると、相手の手元の端末でSVGの見え方をそのまま確かめてもらえます。
よくある質問
SVGとは何ですか？
図形を点ではなく線や曲線などの数値で表すベクター画像形式です。表示のたびにブラウザが描き直すため、拡大しても崩れずきれいに表示できます。
なぜSVGは拡大しても崩れないのですか？
点の集まりではなく図形の定義を持っているためです。拡大するとそのサイズに合わせて描き直されるので、元の解像度に縛られずどんな大きさでもくっきり表示できます。
SVGはどんな画像に向いていますか？
ロゴやアイコン、グラフなど、線と面で構成されたシンプルな図に向いています。写真のように繊細で複雑な絵には、JPEGなどのビットマップ画像のほうが適しています。
SVGとPNGはどう使い分けますか？
拡大してもくっきり見せたいロゴやアイコンはSVG、写真や複雑なグラデーションのある画像はPNGやJPEGといったビットマップを選ぶのが基本です。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。