svg2img
EN中日
← ブログ一覧に戻る
技術チュートリアル約9分

SVGの基礎と実装：構文、埋め込み、最適化、画像変換

Web制作でSVGを扱うために必要な構造、配置方法、スタイル、最適化、書き出しを一通り確認できます。

更新日 2026年8月26日
目次

SVG（Scalable Vector Graphics）は、XMLで図形を記述するベクター形式です。アイコン、ロゴ、図表のような構造の明確な画像に向き、CSSやJavaScriptからスタイルや動作を変更できます。

ただし、写真や複雑な質感にはラスター形式の方が適しており、SVGをそのまま受け付けないサービスもあります。この記事では、基本構文、HTMLへの組み込み方、軽量化、アクセシビリティ、必要に応じてPNG/JPGへ変換する方法を説明します。

SVGとは

SVGはScalable Vector Graphicsの略で、XML形式のテキストで記述するベクター画像です。JPEGやPNGが色の付いたピクセルを並べて画像を表すのに対し、SVGは座標、図形、パスなどの情報から描画します。

この違いにより、SVGは出力先のサイズに合わせて再描画できます。

ラスター画像は元のピクセル数を超えて拡大すると輪郭がぼやけます。SVGの図形やパスは表示サイズに合わせて再描画されるため、異なる解像度でも滑らかな輪郭を保てます。

SVG vs PNG 拡大比較
SVG vs PNG 拡大比較

SVGの主なメリット

  • 解像度に依存しにくい：異なる画面密度や表示サイズに対応しやすい。
  • 軽量にできる：シンプルな図形やロゴなら、少ないコードで表現できます。
  • 編集が容易：テキストエディタで直接コードを書き換えられます。
  • テキスト情報を含められる：埋め込み方によっては、検索エンジンや支援技術が文字情報を読み取れます。
  • CSSとJavaScriptで操作できる：色、状態、アニメーション、ユーザー操作を制御できます。

SVGの歴史と現在

SVGの歴史は意外と古く、1999年にW3Cによって開発が始まりました。その後、2003年にSVG 1.1が勧告され、長らく標準として使われてきました。

現在はChrome、Safari、Firefox、Edgeなどの主要ブラウザで広く対応しています。ただし、外部リソース、フィルター、アニメーションなど一部の機能は、ブラウザや埋め込み方法によって挙動が異なる場合があります。

SVGの「中身」を見てみよう

SVGの実体は、ただのテキストファイル（XMLコード）です。基本的な構造は以下のようになっています。

xml
<svg width="200" height="200" xmlns="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>

<svg>が描画領域となり、その内側に置いた<circle>や<rect>などをブラウザが順番に描画します。テキスト形式なので、コードエディターから属性を直接編集することもできます。

主なSVG要素（基本図形）

SVGには、図形を描くための専用タグが用意されています。

  • <circle>: 円を描きます。中心点(cx, cy)と半径(r)を指定します。
  • <rect>: 四角形を描きます。rxを指定すれば角丸も可能です。
  • <line> / <polyline>: 直線や折れ線を描きます。
  • <path>: 直線やベジェ曲線をコマンドでつなぎ、複雑な形状を表します。Illustratorなどから書き出した図形にもよく使われます。

実践：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つの方法があります。

  1. <img>タグ：最も手軽な方法です。
html
<img src="icon.svg" alt="設定アイコン" />

  1. インライン埋め込み：HTMLに<svg>...</svg>コードを直接書きます。CSSやJavaScriptから内部要素を操作したい場合に適しています。

  2. CSS背景画像：装飾として使う場合に適しています。

css
.icon { background-image: url('icon.svg'); }
  1. <object>タグ：外部ファイルを読み込みつつ、スクリプトも動かしたい特殊なケースで使います。

CSSでSVGをスタイルする

インラインSVGでは、通常のHTML要素と同じようにクラスを付け、fillやstrokeをCSSから変更できます。currentColorを使うと、アイコンの色を周囲のテキスト色に合わせられます。

html
<svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M4 12l5 5L20 6" />
</svg>
css
.status-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

外部SVGを<img>で読み込んだ場合、ページ側のCSSから内部のpathを直接選択することはできません。色を動的に変える必要があるなら、インラインSVGまたは用途に合うアイコンコンポーネントを検討してください。

JavaScriptで操作を加える

インラインSVGの要素はDOMとして参照できます。クリックやホバーに応じてクラスや属性を変える場合は、HTML要素と同じイベントAPIを利用します。

javascript
const icon = document.querySelector('.status-icon');

icon?.addEventListener('click', () => {
  icon.classList.toggle('is-active');
});

ユーザー操作を伴うSVGには、キーボード操作、フォーカス表示、適切なラベルも必要です。見た目だけをクリック可能にして終わらせず、可能ならbuttonなど本来のHTML要素の内側にSVGアイコンを配置してください。

パフォーマンスの最適化（軽量化）

IllustratorやFigmaから書き出したSVGには、表示に不要なメタデータ、コメント、過剰な小数桁が含まれることがあります。内容を確認しながら整理すると、見た目を変えずにファイルサイズを削減できる場合があります。

  • SVGO: コマンドラインで使える定番の最適化ツール。
  • SVGOMG: ブラウザ上でドラッグ＆ドロップするだけで最適化できる便利なツール。

最適化後は必ず表示を確認してください。複雑なSVGでは、IDの短縮や未使用要素の削除によって参照関係が壊れることがあります。

アクセシビリティの基本

装飾だけのSVGにはaria-hidden="true"を付け、支援技術の読み上げ対象から外します。意味のある図やアイコンには、用途に応じて<title>や<desc>、aria-labelledbyを指定します。

html
<svg role="img" aria-labelledby="chart-title chart-desc" viewBox="0 0 320 180">
  <title id="chart-title">月別売上グラフ</title>
  <desc id="chart-desc">4月から6月にかけて売上が増加しています。</desc>
  <!-- chart shapes -->
</svg>

重要な情報を色だけで区別せず、ラベルやパターンも併用してください。SVG内の文字が小さすぎないか、拡大時や高コントラスト設定でも内容を理解できるかも確認します。

SVG vs その他の形式：使い分けの基準

用途ごとの大まかな選び方は次のとおりです。

特徴SVGPNGJPEG
得意な画像ロゴ、アイコン、グラフ複雑なイラスト、スクショ写真
拡大縮小得意（劣化なし）苦手（ぼやける）苦手（ぼやける）
透明背景対応対応非対応
ファイルサイズ単純な図形なら最小中〜大写真なら最小
  • SVGを選ぶ場面：ロゴ、アイコン、図解、グラフ。
  • PNGを選ぶ場面：透明背景が必要なラスター画像、UIキャプチャ、細い文字や線を含む画像。
  • JPEGを選ぶ場面：透明背景が不要な写真や、色の変化が連続する画像。

よくある質問

SVGは安全な形式ですか？

SVGはXMLであり、スクリプトや外部リソースを含められます。信頼できないSVGをWebページへ直接埋め込む場合は、許可する要素や属性を制限し、適切にサニタイズしてください。単に画像として表示する場合と、インラインで実行可能な内容として扱う場合ではリスクが異なります。

width、height、viewBoxはすべて必要ですか？

レスポンシブ表示ではviewBoxが特に重要です。widthとheightは既定の表示寸法として使えますが、CSSで上書きする構成もあります。縦横比を保つには、viewBoxの比率とCSS側の寸法指定を合わせます。

SVGを使えば常にPNGより軽くなりますか？

いいえ。単純なロゴやアイコンではSVGが小さくなりやすい一方、点やパスが非常に多い図形、写真をトレースしたデータ、埋め込み画像を含むSVGは大きくなることがあります。実際のファイルサイズと描画負荷を比較して選びます。

SVGをPNGやJPGに変換する場面

SVGを受け付けないサービスや、固定されたピクセル寸法で納品する必要がある場合は、PNGやJPGへ変換します。

1. SNSへの投稿

X、Facebook、Instagramなど、SVGファイルを直接投稿できないSNSがあります。ロゴや図解を共有する場合は、透明背景ならPNG、背景が固定された写真調の画像ならJPGが候補になります。

2. メールマガジン

メールクライアントによってSVGの表示対応が異なります。多くの環境で同じ見た目を保ちたい場合は、PNGなど広く対応する形式を使います。

3. 印刷物（DTP）

印刷所への入稿データやOffice文書では、受け付ける形式を事前に確認してください。SVGに対応しない環境へ渡す場合は、用途に十分なピクセル寸法のPNGへ変換します。

4. 一部のレガシーなCMS

古いシステムや特定のブログサービスでは、アップロード可能なファイル形式が「jpg, png, gifのみ」に制限されていることがあります。

まとめ

SVGは、アイコン、ロゴ、図表などをWebで扱うときに便利な選択肢です。構造と埋め込み方法を理解しておくと、表示サイズ、スタイル、アクセシビリティを目的に合わせて調整できます。

しかし、すべての場面でSVGが使えるわけではありません。SNS投稿や資料作成など、**「どうしてもPNGやJPGが必要」**というシーンに出くわすこともあるでしょう。

その場合は、インストール不要のブラウザ変換ツールを利用できます。

👉 無料のSVG変換ツールを試す （ファイルを外部サーバーへ送信せず、ブラウザ内で変換できます）

この記事は、SVG2IMG.ccの開発・運営者であるJackが執筆・監修しています。

実際のファイルで試す

ファイルをアップロードせず、ブラウザ内でSVGを変換できます。

変換ツールを開く