SVGとは？Scalable Vector Graphicsを徹底解説
SVGとは？簡単に言うと、絵を描くためのテキストファイルです
SVGは「Scalable Vector Graphics」の略です。その本質は、単なるテキストファイルです。テキストエディタで開くと、JPEGやPNGのようなピクセルのグリッドではなく、図形を描画する方法を記述したXMLマークアップが表示されます。これは、曲線で定義されたパス、中心と半径を持つ円、幅と高さを持つ長方形といった数学的な命令の集合体で、ブラウザや画像エディタに画像をどのようにレンダリングするかを指示します。シンプルなロゴなら、たった2KBのテキストになることもあります。 本当の魔法は、その名前にある「scalable（スケーラブル）」という点です。ファイルが固定されたピクセルグリッドではなく幾何学的な情報を記述しているため、同じSVGファイルを16x16ピクセルの小さなファビコンから3メートル幅の巨大な看板まで、品質を一切損なうことなく使用できます。PNGを元のサイズの10倍に引き伸ばしてみてください。ぼやけたひどい画像になってしまいます。SVGは10倍に引き伸ばしても完璧に鮮明で、元の画像と寸分違わず見えます。 SVGはW3Cのオープン標準であり、現在の安定版はSVG 1.1（2011年公開）で、SVG 2はまだ開発中です。良いニュースは、互換性について心配する必要がないことです。Chrome、Firefox、Safari、Edgeなど、すべてのモダンブラウザがSVGをネイティブで扱えます。これこそ、ウェブ開発者がアイコンやロゴからチャート、複雑なイラストまで、あらゆるものにSVGを採用している理由です。
SVGはラスター形式（PNG、JPEG、WebP）とどう違うのか
PNG、JPEG、WebPのようなラスター画像は、本質的に色付きの四角形の巨大なグリッドです。1920×1080のPNGファイルは、2,073,600個のピクセルそれぞれに特定の色値を保存します。ファイルには「円」や「線」という概念はなく、単に座標(142, 87)のピクセルが特定の色合いの青であることだけを知っています。この方法は写真に最適です。写真には、どんな数式でも効率的に記述できないような何百万もの微妙な色のバリエーションがありますからね。 SVGのようなベクター形式は、逆のアプローチを取ります。SVGはピクセルを保存しません。代わりに、「座標(150, 90)に半径40ピクセルの円を塗りつぶし、塗りつぶし色は#0057FFで描画せよ」といったコマンドを保存します。ブラウザや画像ビューアが、画像が表示されるときにどのピクセルに色を付けるかを計算する作業を行います。これにより、ファイルは解像度から完全に独立します。 この違いは、実用上、非常に大きな影響をもたらします。会社のロゴを様々なメディアで使う場合、ファビコン用に32pxのPNG、ウェブサイトのヘッダー用に200px版、印刷用パンフレット用に2000px版が必要になるかもしれません。SVGなら、たった1つのファイルでこれらすべての用途を完璧にこなします。一方、山の写真をSVGで表現しようとすると、悲惨なことになります。詳細を近似するだけでも何百万もの個別のパス要素が必要になり、結果として巨大なファイルになり、しかもサイズが10分の1のJPEGよりも見劣りします。 SVGが「常に」小さいと言う人の言葉を鵜呑みにしてはいけません。ファイルサイズは完全に複雑さに依存します。シンプルな2色のアイコンは、4KBのPNGよりも800バイトのSVGの方が小さいでしょう。しかし、多くのグラデーションや数百のパスを持つ詳細なイラストは、SVGだと簡単に200KBになる一方、圧縮されたPNG版はわずか80KBということもあり得ます。適切な形式を選ぶには、画像の内容を知る必要があります。
SVGファイルの中身：実際に何が書かれているのか
SVGは単なるXMLなので、中身を覗き見るのに特別なソフトウェアは必要ありません。太い青い境界線を持つ赤い円を描く完全なSVGファイルがこちらです。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#E63946" stroke="#1D3557" stroke-width="4"/></svg> この画像全体はたった141文字のテキストです。`viewBox`属性は、私たちの描画キャンバス、つまり100x100の座標系を設定します。`cx`、`cy`、`r`属性は円の位置とサイズを定義します。このコードをHTMLファイルに直接コピー＆ペーストするだけで、ウェブブラウザが画像を完璧にレンダリングします。 もちろん、実際のSVGは通常もっと複雑です。Adobe IllustratorやFigmaのようなデザインツールは、メタデータ、エディタ固有のタグ、そしてベクトルとして表現できないエフェクトのための隠れたラスター画像まで詰め込まれた肥大化したファイルをエクスポートすることで悪名高いです。デフォルト設定でエクスポートされたSVGは、最適化後の同じファイルと比較して15～20倍も大きくなることがあります。 SVGの真の力は`<path>`要素にあります。パスの`d`属性には、仮想ペンを移動するコマンド（`M`）、線を描くコマンド（`L`）、複雑な曲線を作成するコマンド（`C`）、図形を閉じるコマンド（`Z`）など、それ自体が小さな言語となっています。たった一つの長いパス要素で、地図上の国の輪郭からカスタムの文字形状まで、想像しうるあらゆる図形を記述できます。これこそ、ベクターグラフィックスが、どれだけズームインしてもピクセル化しない、特徴的な滑らかな曲線をどのように実現しているか、という秘密です。
SVGの一般的な使用例：得意な分野とそうでない分野
ロゴはSVGの代表的な使用例です。たった一つのブランドマークが、120pxのウェブサイトヘッダー、0.75インチの名刺、そして数フィートの展示会バナーで鮮明に見える必要があります。すべての可能な解像度に対応するためにラスターファイルのフォルダを管理しようとするよりも、一つのマスターSVGファイルを使う方がはるかに合理的で信頼性が高いです。 アイコンもまた完璧な使用例です。Font AwesomeのようなモダンなアイコンセットはSVGとして配布されています。小さな24x24ピクセルのサイズでも、SVGアイコンはピクセルパーフェクトなPNGと同じくらい鮮明ですが、現代のスマートフォンやノートパソコンの高DPIスクリーン向けに48pxや96pxにも美しく拡大でき、すべて同じソースファイルから実現できます。 人々が忘れがちな主要な使用例がもう一つあります。データビジュアライゼーションです。ニュースサイトでインタラクティブなチャートを見かけるとき、それはSVGである可能性が高いです。D3.jsのようなライブラリは、これらのビジュアライゼーションをブラウザ内で動的に構築します。棒グラフの各棒、散布図の各点、地図の各領域は、CSSでスタイルを設定したり、JavaScriptで操作したりできる個別のSVG要素です。 さて、現実的な話ですが、写真にSVGを使ってはいけません。写真の連続的なトーンと複雑なテクスチャは、ベクターパスでは効率的に記述できません。写真をSVGに「トレース」しようとすると、巨大なファイルが生成され、写真ではなく安っぽいベクターアートプロジェクトのように見えてしまいます。写真のようなものには、JPEG、WebP、またはAVIFを使いましょう。これらを使えば、はるかに小さなファイルサイズで、はるかに優れた品質が得られます。 また、プロの印刷ワークフローでSVGを使う場合は注意が必要です。印刷の世界は依然としてCMYKカラー、特色、オーバープリント設定を中心に回っており、PDFやEPSのような形式はこれらの機能に対してはるかに深く、信頼性の高いサポートを提供しています。SVGのネイティブなカラースペースはRGBであり、CMYKプロファイルを埋め込むことはできますが、印刷会社のソフトウェア間でのサポートはせいぜい一貫性がありません。
SVGへの変換、SVGからの変換：できることとできないこと
ベクター形式間の変換は、通常は簡単な部分です。AIからSVG、EPSからSVG、またはベクターベースのPDFからSVGへの変換は、基となる幾何学データがすでに存在するため、多くの場合クリーンなプロセスです。それは主に、あるファイル形式の言語を別のファイル形式の言語に翻訳する作業です。CocoConvertは、これらのベクターからベクターへの変換を確実に処理し、パス、色、タイポグラフィを保持します。 PNGやJPEGのようなラスター画像をSVGに変換するのは、まったく別の話です。このプロセスはオートトレースと呼ばれ、ソフトウェアがピクセルベースの画像内の形状を推測し、それらを近似するベクターパスを描画します。複雑なロゴをオンラインコンバーターに入れて、でこぼこのめちゃくちゃな結果が返ってきた経験のある人なら、その苦痛を知っているでしょう。結果は、非常にシンプルで高コントラストなグラフィックであれば許容できるかもしれませんが、複雑なものに関してはあくまで近似です。ロゴの本当にクリーンなベクターバージョンを得るには、デザイナーがIllustratorやInkscapeのようなツールで手動で描き直すのが一番です。 逆方向、つまりSVGからPNGのようなラスター形式への変換は簡単です。SVGには固有のピクセルサイズがないため、最終的なPNGをどれくらいの大きさにするかをコンバーターに伝えるだけで済みます。CocoConvertでは、目標とする幅を指定でき、高さはアスペクト比を維持するように自動的に計算されます。ウェブ用途では、1倍と2倍のサイズ（例：幅400pxと800px）でエクスポートするのが一般的です。高品質な300DPI印刷の場合、幅4インチの画像は1200ピクセル幅でエクスポートする必要があることを覚えておきましょう。 最後に、人々がよくつまずく変換としてSVGからPDFがあります。どちらもベクター形式であるため、アートワーク自体に関しては通常、変換はロスレスです。問題はフォントです。SVGがシステムにインストールされているフォントを使用しているが、それを埋め込んでいない場合、結果のPDFは別のフォントに置き換えてしまい、デザインが崩れる可能性があります。プロのヒントとしては、SVGをエクスポートする「前」に、デザインソフトウェアですべてのテキストをアウトライン化することです。
ウェブ開発におけるSVG：埋め込み、スタイル設定、アニメーション
ウェブページにSVGを組み込む方法はいくつかあり、選択する方法によって実際の結果が大きく異なります。最もシンプルなのは`<img>`タグを使う方法です。`<img src="logo.svg" alt="Company logo">`。これは簡単ですが、ブラックボックスです。CSSを使って中の図形の色を変更したり、JavaScriptでアニメーションさせたりすることはできません。 完全な制御を得るには、SVGをHTMLに直接インラインで記述する必要があります。SVGマークアップは、`<div>`や`<p>`と同じようにDOMの一部となります。ここがSVGがウェブ上で真価を発揮する点です。CSSセレクタを使ってSVG内のあらゆる要素をターゲットにし、ホバー時に塗りつぶしを変更したり、JavaScriptとWeb Animations APIを使って複雑なインタラクションを作成したりできます。これが、モダンなフロントエンドフレームワークがアイコンにSVGを使用する方法です。コンポーネントとしてインラインでレンダリングされます。 CSSで`background-image: url('icon.svg')`を使用するのは3つ目の選択肢で、繰り返しパターンや装飾要素に最適です。しかし、`<img>`タグと同様に、SVGを分離するため、内部のスタイル設定はできません。異なる状態のために異なるSVGファイルを作成してリンクすることで回避できますが、特にエレガントな解決策ではありません。 アニメーションはSVGが本当に面白くなる部分です。インラインSVG内の任意の要素に標準のCSSアニメーションやトランジションを適用できます。「描画」エフェクトでよく使われるテクニックは、`stroke-dasharray`と`stroke-dashoffset`というCSSプロパティを使って、パスが画面上で自分自身を描いているように見せるものです。SMILと呼ばれるネイティブのSVGアニメーション構文もありますが、そのサポート履歴は不安定（Internet Explorerでは一度も動作しませんでした）なため、今日のほとんどの開発者はCSSまたはJavaScriptを使用しています。 最後に、パフォーマンスについて一言。ベクターの純粋さのためにサイトの速度を低下させてはいけません。何千ものパスを持つ非常に大きく複雑なSVGは、ブラウザでのレンダリングが遅くなる可能性があります。背景として複雑なイラストを使用している場合、それを最適化されたWebPファイルにラスター化する方が良いかもしれません。モバイルデバイスで300msの描画時間を節約できるなら、スケーラビリティのわずかな損失は許容できます。
SVGファイルの最適化：品質を損なわずにサイズを削減する
デザインツールから直接エクスポートされたSVGファイルをそのまま信用してはいけません。それらはほとんどの場合、不要なデータで肥大化しています。Illustratorやその他のエディタは、大量のXMLメタデータ、エディタ固有の属性、非表示レイヤー、未使用の定義を追加します。最適化後、18KBのロゴファイルが3KBにまで縮小する（視覚的な変化は一切なく80%削減）のは珍しいことではありません。 この作業における業界標準ツールはSVGO（SVG Optimizer）です。これはコマンドラインユーティリティですが、最も簡単な使い方はウェブベースのGUIを介することであり、Jake Archibald氏によるSVGOMGが最高です。SVGコードを貼り付けるかファイルをアップロードし、さまざまな最適化設定を視覚的に切り替えて、ファイルサイズとレンダリングへの影響を確認できます。最大効果は通常、メタデータの削除、グループの折りたたみ、非表示要素の削除、そして`<rect>`のようなシンプルな図形をより効率的な`<path>`要素に変換することから得られます。座標の小数点以下の桁数を制御する「Precision（精度）」スライダーには特に注意してください。これを6から2に下げるだけで、知覚できる違いなしにファイルサイズを20〜30%削減できることがよくあります。 アイコンのためにSVGをHTMLに直接インラインで記述している場合、さらに積極的な最適化が可能です。HTML5のインラインSVGでは`xmlns`属性は不要であり、アイコンが常に固定サイズであることが分かっていれば`viewBox`を削除することもできます（ただし、これはあまり一般的ではなく、リスクを伴う場合があります）。 CocoConvertは、メタデータの削除や座標精度の削減など、いくつかの基本的な最適化を自動的に適用します。これにより、良い出発点が得られます。しかし、すべてのキロバイトが重要となる本番環境のウェブ用途では、SVGOMGを介してファイルを処理することを強くお勧めします。自動ツールは保守的でなければなりませんが、出力結果を確認できる人間であれば、最適化をさらに進めて可能な限り最小のファイルを得ることができます。