SVGの基礎と実装：構文、埋め込み、最適化、画像変換
Web制作でSVGを扱うために必要な構造、配置方法、スタイル、最適化、書き出しを一通り確認できます。
目次
SVG（Scalable Vector Graphics）は、XMLで図形を記述するベクター形式です。アイコン、ロゴ、図表のような構造の明確な画像に向き、CSSやJavaScriptからスタイルや動作を変更できます。
ただし、写真や複雑な質感にはラスター形式の方が適しており、SVGをそのまま受け付けないサービスもあります。この記事では、基本構文、HTMLへの組み込み方、軽量化、アクセシビリティ、必要に応じてPNG/JPGへ変換する方法を説明します。
SVGとは
SVGはScalable Vector Graphicsの略で、XML形式のテキストで記述された「ベクター画像」です。JPEGやPNGが「色のついた点（ピクセル）の集まり」であるのに対し、SVGは「数学的な計算式」で図形を描画します。
この違いにより、SVGは出力先のサイズに合わせて再描画できます。
スマートフォンの画面をピンチアウトして拡大した時、通常の写真はジャギジャギにぼやけてしまいます。しかしSVGは、どれだけ拡大しても、常にエッジが滑らかで鮮明なままです。
SVGの主なメリット
- 解像度フリー：Retinaディスプレイでも4Kモニタでも常に高画質。
- ファイルサイズが軽量：シンプルな図形やロゴなら、数KBで済みます。
- 編集が容易：テキストエディタで直接コードを書き換えられます。
- SEOに強い：中身がテキストなので、Googleが内容（文字情報など）を読み取れます。
- CSS/JSで操作可能：色を変えたり、アニメーションさせたりと、Web技術と相性抜群です。
SVGの歴史と現在
SVGの歴史は意外と古く、1999年にW3Cによって開発が始まりました。その後、2003年にSVG 1.1が勧告され、長らく標準として使われてきました。
かつてはブラウザの対応状況にばらつきがありましたが、現在では**主要なすべてのブラウザ（Chrome, Safari, Firefox, Edge）**で完全にサポートされています。もはや「表示されないかも」という心配をする必要はありません。
SVGの「中身」を見てみよう
SVGの実体は、ただのテキストファイル（XMLコード）です。基本的な構造は以下のようになっています。
<svg width="200" height="200" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">
<circle cx="100" cy="100" r="50" fill="#3B82F6" />
<rect x="50" y="50" width="100" height="100" fill="#10B981" />
<text x="100" y="30" text-anchor="middle" fill="#1F2937">
Hello SVG!
</text>
</svg>
このように、<circle>（円）や<rect>（四角形）といったタグを並べるだけで、ブラウザがそれを解釈して描画します。Photoshopのような画像編集ソフトがなくても、メモ帳さえあれば画像が作れるのです。
主なSVG要素（基本図形）
SVGには、図形を描くための専用タグが用意されています。
<circle>: 円を描きます。中心点(cx,cy)と半径(r)を指定します。<rect>: 四角形を描きます。rxを指定すれば角丸も可能です。- **
<line>/<polyline>**: 直線や折れ線を描きます。 <path>: SVGにおける万能ツールです。直線、曲線、複雑な図形など、あらゆる形状を「コマンド」で記述できます。Illustratorなどのソフトで書き出すと、多くの図形はこの<path>になります。
実践：WebサイトでのSVG活用シーン
1. アイコンシステム
現在、多くのWebサイトでアイコンにSVGが採用されています。PNG画像だと「1倍用」「2倍用（Retina）」と複数の画像を用意する必要がありますが、SVGならたった1つのファイルで済みます。色もCSSで自由に変えられるため、マウスオーバー時の色変化なども簡単です。
2. 企業ロゴ
ロゴは企業の顔であり、どんなサイズでも美しく表示される必要があります。SVGなら、ヘッダーの小さなロゴから、フッターの大きなロゴまで、1つのファイルを使い回せます。
3. データビジュアライゼーション（グラフ・チャート）
グラフの棒や折れ線をSVGで描画することで、数値データを正確に視覚化できます。各要素が独立しているため、「棒グラフにカーソルを合わせたら数値を表示する」といったインタラクションも実装しやすいのが特徴です。
4. アニメーション
CSSやJavaScriptと組み合わせることで、ローディングアイコンを回したり、イラストを動かしたりできます。GIFアニメーションよりも軽量で、画質も劣化しません。
プロジェクトでのSVG実装方法：4つのパターン
WebページにSVGを表示するには、主に4つの方法があります。
<img>タグ：最も手軽な方法です。
<img src="icon.svg" alt="設定アイコン" />
-
インライン埋め込み：HTMLに
<svg>...</svg>コードを直接書きます。CSSで色を変えたい場合はこの方法がベストです。 -
CSS背景画像：装飾として使う場合に適しています。
.icon { background-image: url('icon.svg'); }
<object>タグ：外部ファイルを読み込みつつ、スクリプトも動かしたい特殊なケースで使います。
パフォーマンスの最適化（軽量化）
IllustratorやFigmaから書き出したSVGには、実は「表示には不要な情報（メタデータやコメント）」がたくさん含まれています。これらを削除するだけで、ファイルサイズを**30%〜50%**も削減できることがあります。
- SVGO: コマンドラインで使える定番の最適化ツール。
- SVGOMG: ブラウザ上でドラッグ＆ドロップするだけで最適化できる便利なツール。
Webサイトの表示速度を上げるためにも、本番環境にアップする前には必ず最適化（Minify）を行いましょう。
SVG vs その他の形式：使い分けの基準
「結局、いつSVGを使えばいいの？」という疑問への回答がこちらです。
| 特徴 | SVG | PNG | JPEG |
|---|---|---|---|
| 得意な画像 | ロゴ、アイコン、グラフ | 複雑なイラスト、スクショ | 写真 |
| 拡大縮小 | 得意（劣化なし） | 苦手（ぼやける） | 苦手（ぼやける） |
| 透明背景 | 対応 | 対応 | 非対応 |
| ファイルサイズ | 単純な図形なら最小 | 中〜大 | 写真なら最小 |
- SVGを選ぶべき時: ロゴ、アイコン、図解、グラフ。
- PNGを選ぶべき時: 色数が多く複雑なイラスト、背景透過が必要な写真以外の画像。
- JPEGを選ぶべき時: 写真、グラデーションが複雑な画像。
【重要】SVGをJPGやPNGに変換すべきケースとは？
ここまでSVGの利点を解説してきましたが、**「SVGではダメな場面」**も確実に存在します。その場合は、適切なツールを使ってSVGをラスター形式（JPG/PNG）に変換する必要があります。
1. SNSへの投稿
Twitter(X)、Facebook、InstagramなどのSNSは、SVGファイルのアップロードに対応していません。せっかく作ったロゴや図解をシェアするには、PNGやJPGへの変換が必須です。
2. メールマガジン
GmailやOutlookなどのメールクライアントは、セキュリティ上の理由からSVGを表示しないことが多いです。メールに画像を埋め込むなら、PNGが安全です。
3. 印刷物（DTP）
印刷所への入稿データやOffice文書（Word/PowerPoint）では、SVGが正しく表示されなかったり、印刷時にレイアウトが崩れたりするリスクがあります。高解像度のPNGに変換しておくのが無難です。
4. 一部のレガシーなCMS
古いシステムや特定のブログサービスでは、アップロード可能なファイル形式が「jpg, png, gifのみ」に制限されていることがあります。
まとめ
SVGは、アイコン、ロゴ、図表などをWebで扱うときに便利な選択肢です。構造と埋め込み方法を理解しておくと、表示サイズ、スタイル、アクセシビリティを目的に合わせて調整できます。
しかし、すべての場面でSVGが使えるわけではありません。SNS投稿や資料作成など、**「どうしてもPNGやJPGが必要」**というシーンに出くわすこともあるでしょう。
その場合は、インストール不要のブラウザ変換ツールを利用できます。
👉 無料のSVG変換ツールを試す （アップロード不要で、SVGをPNG/JPGに一瞬で変換できます）
このガイドは、開発者がSVGフォーマットの全機能を理解し活用できるよう、SVG2IMGチームによって作成されました。ご質問やご提案がありましたら、ぜひお聞かせください。