SVGとは？
SVG（Scalable Vector Graphics）は品質を損なわずにどんなサイズにも拡大できるXMLベースのベクター画像フォーマットです。SVGの定義・仕組み・使用場面を解説します。
SVGは2Dベクターグラフィックスを記述するためのXMLベースのマークアップ言語です。ピクセルのグリッドとして画像を保存するラスター形式（PNG・JPG）とは異なり、SVGはパス・円・矩形・ベジェ曲線を使って数学的に形を記述します。これによりSVG画像は16×16のファビコンから4Kの壁紙まで、どんなサイズにでも品質を損なうことなく拡大できます。
SVGの仕組み
SVGファイルはXMLマークアップを持つテキストファイルです： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="#FF5733" /> <text x="50" y="55" text-anchor="middle" fill="white">こんにちは</text> </svg> このSVGは「こんにちは」と書かれた赤い円を描きます。ブラウザがXMLを読み込み、どんな解像度でも鮮明なグラフィックとしてレンダリングします。
SVGの利点
• 解像度独立——どんなサイズでも完璧にクリア、ピクセル化なし • 小さいファイルサイズ——シンプルなグラフィックは同等のPNGよりずっと小さい • テキストエディタやデザインツール（Figma・Illustrator）で編集可能 • アニメーション可能——CSSとJavaScriptでSVG要素をアニメーション化 • アクセシブル——SVG内のテキストは本物のテキストで、スクリーンリーダーや検索エンジンが読める • CSSでスタイル設定可能——ファイルを編集せずに色やスタイルを変更 • HTMLに直接インラインで埋め込み可能
SVGを使うべき場面
SVGが最適な場面： • ロゴとブランドアイコン——あらゆるサイズでシャープに見えるもの • UIアイコンとイラスト • チャートとデータビジュアライゼーション • インタラクティブグラフィックとアニメーション • ファビコン（現代のブラウザはSVGファビコンをサポート） • シンプルな幾何学的グラフィック SVGを使わない場面： • 写真——ラスター形式（JPG/WebP）がはるかに効率的 • 複雑な写実的画像 • 多くの色とグラデーションを含む画像——ファイルサイズが大きくなる
Try it yourself
SVGからファビコンを生成するSVGについて
SVGはW3Cによって開発され、2001年にW3C勧告になりました。現在すべての現代のブラウザがプラグインなしでネイティブサポートしています。SVGはアイコンフォントやスプライトシートに代わり、Webアイコンとロゴの標準になりました。SVG 2.0仕様は改善されたテキスト処理・新しい色関数・CSSとHTMLとのより良い統合を追加しました。
FAQ
- SVGとは何の略ですか？
- SVGはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略です。
- SVGとPNGの違いは何ですか？
- SVGは形の数学的記述を保存するベクター形式で、品質を損なわず無限に拡大できます。PNGはピクセルを保存するラスター形式で、拡大するとぼやけます。SVGはロゴとアイコンに、PNGは写真と複雑な画像に適しています。
- ウェブサイトにSVGを使えますか？
- はい。すべての現代のブラウザがSVGをネイティブサポートしています。<img>のsrcとして、CSSのbackground-imageとして、またはHTMLに直接インラインで使用できます。インラインSVGはCSSスタイリングとJavaScriptの操作を可能にするため特に強力です。