ロゴを拡大したら輪郭がぼやけ、四角いドットが見えてしまった。そんな経験をしたことがあるなら、この形式の意味はすぐに分かるはずです。SVGはまさにその問題を解決するために存在します。JPGやPNGとはしくみからして違う形式で、その違いを理解しておくことが、場面ごとに正しい形式を選ぶ土台になります。
SVGとは何の略か
SVGは Scalable Vector Graphics 、日本語でいえば「拡大縮小できるベクター画像」の略です。HTMLやCSSの仕様を定めているのと同じW3Cが標準化したオープンな形式で、いまのブラウザはいずれも標準で対応しています。
色の付いたピクセルを格子状に並べて保存するJPGやPNGと違い、SVGは画像を文字として記述します。図形、線、曲線、色を数学的な座標で表すのです。つまりSVGファイルの実体はテキストファイルで、どんなコードエディタでも開いて編集できます。
SVGの中身はどうなっているのか
SVGファイルは、HTMLに似たマークアップ言語であるXMLで書かれています。たとえば赤い円は、次のように記述されます。
ブラウザはこの数式のような指示を読み取り、その場でピクセルを計算しながら画面に描き出します。16×16ピクセルのファビコンから10メートルの屋外広告まで、どんな大きさでも画質がまったく落ちないのはこのためです。
SVGの利点
- 拡大しても劣化しない： どれだけ拡大・縮小しても輪郭は鮮明なままです。Retinaや4Kの画面でも変わりません。
- ファイルが軽い： 単純なロゴやアイコンは、PNGよりずっと小さく収まります。大きなサイズほど差が開きます。
- コードで編集できる： 色、大きさ、動きをCSSやJavaScriptから直接変えられます。画像編集ソフトは要りません。
- 検索エンジンが読める： 中身がテキストなので、SVGの中の文字までGoogleが読み取ってインデックスできます。
- アニメーションに対応： CSSやSMILによる動きをSVGの中で直接作れます。GIFや動画に頼る必要はありません。
- アクセシビリティ： スクリーンリーダー向けに、タイトルや説明をSVGの中に書き添えられます。
SVGの弱点
- 写真には向かない： 写真には何百万もの色の変化と複雑な階調があります。それをベクターで表すと、ファイルは巨大で非効率なものになってしまいます。写真であればJPGが正解です。
- 複雑な絵は重くなる： 図形やグラデーションを大量に含む描き込みの多いイラストでは、SVGが大きくなり、描画も遅くなります。
- 手で編集するには知識が要る： コードを直接いじるにはXMLとベクターの数学的な考え方への理解が必要です。IllustratorやFigmaを使えば、その負担はかなり減ります。
💡 目安： ロゴ、アイコン、イラスト、グラフ、地図など、複数の大きさで表示する必要があるものにはSVGを使ってください。写真や、細部と階調の複雑な画像にはJPGかWebPを選びます。
SVG・PNG・JPGの使い分け
| 項目 | SVG | PNG | JPG |
|---|---|---|---|
| 種類 | ベクター | ラスター（ピクセル） | ラスター（ピクセル） |
| 拡大しても劣化しない | はい | いいえ | いいえ |
| 透過 | はい | はい | いいえ |
| 写真向き | いいえ | いいえ | はい |
| ロゴ・アイコン向き | はい | はい | いいえ |
| CSS/JSで編集できる | はい | いいえ | いいえ |
| ブラウザ対応 | はい | はい | はい |
サイトやアプリでのSVGの使い方
ウェブページにSVGを組み込む方法は、大きく分けて三つあります。
- <img>タグで読み込む： いちばん手軽な方法です。ほかの画像と同じように扱えますが、CSSやJavaScriptから中身を操作することはできません。
- HTMLに直接書く： SVGのコードをページのHTMLの中にそのまま入れます。色、動き、操作への反応まで、CSSとJSで自在に制御できます。動きのあるアイコンにはこの方法が向いています。
- CSSの背景として指定する： この場合は
background-image: url('icone.svg')と書きます。装飾的なアイコンには便利ですが、JavaScriptからは扱いにくくなります。
画像をSVGに変換するには
写真やPNGをSVGにするには、 ベクター化という、ピクセルを幾何学的な図形に置き換える処理を使います。うまくいくのは、色数が少なく輪郭のはっきりした単純な画像、たとえば白背景のロゴなどです。ImageToolsの 変換 を使えば、PNGやJPGをはじめ主要な形式のあいだで、ウェブ向けの形式へ相互に変換できます。
SVGはSEOに有利か
有利です。SVGはテキストを土台にした形式なので、Googleが中身をたどってインデックスできます。加えて、SVGのロゴやアイコンはPNGより軽く済むことが多く、ページの表示速度にも効いてきます。速度はCore Web Vitalsの導入以降、Googleの順位に直接影響する要素です。
SEOの観点で整えるなら、SVGのコードの中に title と desc の要素を書き添えてください。スクリーンリーダーと検索エンジンにとっての代替テキストとして働きます。