SVGベクターグラフィックスの6つの利点

利点1：歪まず無限に拡大できる

SVGは数学的なパスで図形を描きます。拡大するとブラウザは新しいサイズで描き直すだけです。アイコンはRetinaディスプレイでも鮮明を保ち、ロゴをビルの看板サイズに伸ばしてもくっきりします——ラスターのように複数の解像度を用意する必要はありません。これがベクターグラフィックスの核心的な利点であり、ロゴやアイコンをベクター化しなければならない理由です。レスポンシブなページでは、1つのSVGアイコンがスマホから4Kディスプレイまですべてのシーンをカバーするので、端末ごとの画像を用意する必要がありません。

利点2：ファイルが小さく、ページ表示も速い

シンプルなアイコンのSVGは数KBにとどまることが多く、複数解像度のPNG一式よりずっと小さいです。さらにSVGはテキストなのでgzipやBrotliで非常にうまく圧縮でき、転送サイズをさらに60〜80%削減できます。アイコンの多いページではSVGに切り替えるだけで帯域を明確に節約できます。複雑なイラストではパス数を抑える必要がありますが、詳しくはSVG最適化のコツをご覧ください。アイコンシステムをSVGに移行すると、画面内画像の総リクエストバイトが半分以上減ることが多く、回線速度の遅い環境では特に価値があります。

利点3：プログラムでき、インタラクティブでアニメーションできる

SVGはDOMの一部です。CSSでアイコンの塗りを使え、JavaScriptで線を描くアニメーションを動かし、クリックやホバーに反応させられます。ダークモードでのアイコンの切り替え、グラフのセグメントをホバーで強調する、ロード中のアニメーション——これらはすべてSVGの中で直接実現でき、画像を入れ替える必要もフレーム単位のアニメ素材も要りません。ラスター形式ではそもそもできません。受益が大きいのはデータ可視化です。グラフの棒や線分はそれぞれ独立したパスなので、ホバーでの強調やドリルダウンを直接紐づけられます。

利点4：テキストが編集でき、SEOとアクセシビリティにやさしい

SVGの中のテキストは本物のテキストです。選択でき、検索でき、翻訳できます。図形に<title>と<desc>の説明を添えると、スクリーンリーダーが読み上げ、検索エンジンも内容の意味を理解できます。ラスターのテキストはただの画素で、検索エンジンにもスクリーンリーダー利用者にも見えません。多言語サイトは、画像を再書き出しせずにSVG内のテキストを直接翻訳できます。

利点5：1つの元ファイルであちこちで使い回せる

同じSVGをWebページで使い、ドキュメント用の高解像度PNGとして書き出し、印刷機やレーザー彫刻機に渡せます。ブランドカラーが変わったときは元ファイル1つを編集すれば、すべての利用箇所が同時に更新されます。サイズごとに作り直す必要はありません。チームにとってこれは、素材の保守コストを大きく下げます。ECやブランドチームには特に有利で、1回のベクター化で、商品ページもパッケージもイベント素材も同じアートワークを再利用でき、色の変更も元ファイル1つの保守で済みます。

利点6：オープンな標準と成熟したエコシステム

SVGはW3Cのオープン標準で、すべての主要ブラウザがネイティブに対応し、IllustratorやFigma、Inkscapeなどの設計ツールで読み書きでき、ベンダーロックインがありません。客観的に言えば限界もあります。写真画像には向かず、パスが複雑すぎると描画性能が落ち、写真にはJPGやWEBPを使い続けるべきです。オープンソースコミュニティはSVGのまわりにも整備されたツールチェーンを築いており、圧縮用のSVGO、アイコンライブラリ、アニメーションライブラリなどがそのまま使えます。

SVGは初めてですか？手元のビットマップをベクターにするには画像→SVGツールを、無料のベクター素材を探すならPolySVGギャラリーを使ってください。はじめにSVGとはとPNGとSVGの違いを読むと全体像がつかめます。