SVG2IMG Logosvg2img
EN中日

SVG画像フォーマット完全ガイド：基礎から応用まで

•Jack Zhuo

SVG（Scalable Vector Graphics）は、XMLベースのベクター画像フォーマットで、現代のWeb開発においてますます重要な役割を果たしています。レスポンシブアイコンの構築、データビジュアライゼーションの作成、インタラクティブなアニメーションのデザインなど、SVGは従来の画像フォーマットでは実現できない機能を提供します。この包括的なガイドでは、基礎から高度なテクニックまでお伝えします。

> SVGとは？

SVGはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略で、XML形式を使用して2次元グラフィックを定義するマークアップ言語です。画像をピクセルのグリッドとして保存するJPEGやPNGなどの従来のビットマップフォーマットとは異なり、SVGは数式と幾何学的プリミティブを使用してグラフィックを記述します。この根本的な違いがSVGに最も称賛される利点を与えます：品質を損なうことなく無限にスケーリングできることです。

スマートフォンで写真をズームインすると何が起こるか考えてみてください。最終的に、個々のピクセル—連続した画像の錯覚を壊すブロック状のギザギザした四角形—が見え始めます。どれだけズームしても、エッジが完璧に滑らかで鮮明なままのフォーマットを想像してください。これがベクターグラフィックスの魔法です。

SVG vs PNG スケーリング比較
SVG vs PNG スケーリング比較

スケーラビリティに加えて、SVGはいくつかの強力な機能をもたらします。SVGファイルは本質的にテキストドキュメントであるため、任意のテキストエディタで編集でき、効率的に圧縮でき、検索エンジンによってインデックス化することさえできます—グラフィックコンテンツをSEOフレンドリーにします。SVGはまた、Web技術とシームレスに統合されます：CSSでスタイリングし、JavaScriptでアニメーション化し、ARIA属性で完全にアクセシブルにすることができます。

> SVGの歴史

SVGの旅は1999年、W3CがWebでのベクターグラフィックスのオープンスタンダードとして仕様の開発を開始したときに始まりました。数年の改良を経て、SVG 1.1は2003年にW3C正式勧告となり、今日でもWeb開発者が依存する安定した基盤を確立しました。このスタンダードは2011年のSVG 1.1 Second Editionで重要な更新を受け、曖昧さを明確にしエラッタを修正しました。最近では、SVG 2.0が2018年に候補勧告ステータスに達し、改善されたテキスト処理とCSSとのより良い統合などの現代的な機能を導入しました。

今日、SVGはすべてのブラウザで普遍的なサポートを受けており、互換性の問題を心配することなく、あらゆるWebプロジェクトで信頼できる選択肢となっています。

> SVG構文を理解する

SVGファイルの核心は、シェイプ、パス、テキストを記述する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>要素はキャンバスとして機能し、widthとheightがその寸法を定義します。その中に、順番にレンダリングされるさまざまなシェイプ要素を配置します—後の要素は前の要素の上に表示され、デザインソフトウェアのレイヤーに似ています。

> 構成要素：SVG要素の詳細

SVGはグラフィックを作成するための豊富な要素ボキャブラリーを提供します。以下の図は、ほとんどのSVGアートワークの基礎を形成する6つの基本シェイプを示しています：

SVG基本要素図
SVG基本要素図

シェイプ要素

**<circle>要素は、中心点（cx、cy）と半径（r）で定義される完璧な円を作成します。四角形と正方形には、<rect>がrxとry属性を通じてオプションの角丸を提供します。楕円が必要な場合、<ellipse>**は円の概念を拡張し、水平と垂直で別々の半径を持ちます。

点を接続するために、**<line>は2つの座標間に直線セグメントを描き、<polyline>は形状を閉じずに複数の点を接続します。三角形や六角形などの閉じた多角形が必要な場合、<polygon>**は自動的に最後の点を最初の点に接続します。

パワフルなパス要素

基本シェイプは一般的なケースを処理しますが、**<path>**要素はSVGのスイスアーミーナイフです。コンパクトなコマンド言語を使用して、想像できるほぼすべてのシェイプを記述できます：

<path d="M 10,20 C 20,10 30,30 40,20 S 60,10 70,20" 
      fill="none" stroke="#3B82F6" stroke-width="2"/>

d属性には描画コマンドが含まれます：Mはペンを移動、Lは線を描画、Cはベジェ曲線を作成、その他多数。ほとんどのデザインツールは複雑なアートワークをパスデータとしてエクスポートします。

整理と再利用

**<g>要素は関連する要素をグループ化し、複数のシェイプに一度に変換やスタイルを適用できます。一度定義して複数回使用したい要素には、<defs>が再利用可能なコンポーネントライブラリを作成し、<use>**が必要な場所でそれらをインスタンス化します—アイコンシステムに最適です。

> SVGを使用するタイミング：実例シナリオ

SVG使用例インフォグラフィック
SVG使用例インフォグラフィック

アイコンとブランドアセット

小さな電話画面から5Kモニターまで、あらゆるデバイスで鮮明に見える必要があるレスポンシブWebアプリケーションを構築しているとします。従来のPNGアイコンでは複数の解像度—1x、2x、場合によっては3xバージョン—が必要で、ファイル数と複雑さが倍増します。SVGでは、単一のファイルが任意のサイズに完璧にスケーリングします。GitHub、Airbnb、StripeなどがまさにこのためにSVGアイコンシステムを使用しています。

SVGはロゴやブランドマークにも優れています。会社のロゴがヒーローバナー、小さなファビコン、印刷用PDFに表示される場合、SVGは1つのソースファイルから3つのシナリオすべてを処理します。CSSでSVGをスタイリングできるため、別々のアセットなしでダークモードのバリエーションを作成することさえできます。

データビジュアライゼーションとチャート

チャート、グラフ、ダッシュボードに関しては、SVGの強みが本当に光ります。D3.js、Chart.js、RechartsなどのライブラリがSVG出力を生成するのは、ベクターグラフィックがデータビジュアライゼーションが要求する精度を処理できるためです。各バー、ライン、パイスライスは個別の要素であり、スタイリング、アニメーション化、インタラクティブ化が可能です。データポイントにホバーしてツールチップを表示？SVGのDOM統合により簡単です。

装飾的イラスト

現代のウェブサイトでは、ヒーローセクション、空の状態、機能説明にイラストスタイルのグラフィックが増えています。SVGイラストは同等のラスター画像よりも高速にロードされ、デバイス間で美しくスケーリングします。unDraw、Illustrations.co、Humaaansなどのサービスは、このフォーマットがこの目的に非常に適しているため、特にSVGイラストライブラリを提供しています。

モーションとアニメーション

繊細なローディングスピナーから精巧なアニメーションイラストまで、SVGはモーションを優雅に処理します。CSSアニメーション、JavaScript（GSAPなどのライブラリ経由）、またはSVGネイティブのSMILアニメーションを使用してSVGをアニメーション化できます。パスモーフィング、ドローオンエフェクト、協調マルチエレメントアニメーションはすべて、ビデオやGIFフォーマットに頼ることなく可能です。

> プロジェクトでSVGを使用する4つの方法

インラインSVG：最大限のコントロール

HTMLに直接SVGを埋め込むと、すべての要素のスタイルとスクリプトに完全にアクセスできます：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

このアプローチは、CSSスタイリングやJavaScriptインタラクションが必要な場合に理想的ですが、HTMLファイルサイズが増加します。

Imageタグ：シンプルでクリーン

スタイリングが不要な静的グラフィックには、<img>タグが完璧に機能します：

<img src="icon.svg" alt="設定アイコン" width="24" height="24" />

ブラウザがキャッシュを処理し、HTMLはクリーンなままです。ただし、外部CSSからSVGの内部要素をスタイリングすることはできません。

CSS背景：装飾的な用途

SVGが純粋に装飾目的の場合、CSS背景はマークアップをセマンティックに保ちます：

.hero-section {
  background-image: url('pattern.svg');
  background-size: cover;
}

Objectタグ：スクリプティング可能な外部ファイル

<object>タグは外部SVGファイルをロードしながら、内部スクリプトの実行を許可します：

<object type="image/svg+xml" data="interactive-chart.svg">
  <p>お使いのブラウザはSVGをサポートしていません</p>
</object>

> CSSでSVGをスタイリングする

SVGのスーパーパワーの1つは、CSSとの深い統合です。慣れ親しんだプロパティを使用してSVG要素をスタイリングできますが、一部の名前はHTMLスタイリングとは異なります：

.icon-circle {
  fill: #3B82F6;           /* background-colorのような */
  stroke: #1E40AF;         /* border-colorのような */
  stroke-width: 2px;       /* border-widthのような */
  opacity: 0.9;
  transition: fill 0.2s ease;
}

.icon-circle:hover {
  fill: #2563EB;           /* ホバー時に暗く */
}

CSSアニメーションはSVGと美しく連携し、ラスター画像では難しいか不可能なエフェクトを可能にします：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

> JavaScriptでインタラクティビティを追加する

インラインSVG要素はDOMの一部になるため、JavaScriptはHTML要素と同じように操作できます：

// SVG要素を選択して変更
const circle = document.querySelector('.icon-circle');

// ユーザーイベントに応答
circle.addEventListener('click', () => {
  circle.setAttribute('fill', 'green');
  console.log('円がクリックされました！');
});

// データに基づく動的更新
function updateProgress(percent) {
  const progressCircle = document.querySelector('.progress-ring');
  const circumference = 2 * Math.PI * 45; // r=45
  const offset = circumference - (percent / 100) * circumference;
  progressCircle.style.strokeDashoffset = offset;
}

> SVGパフォーマンスの最適化

SVGファイルは小さく始まりますが、デザインツールはしばしば肥大化したコードをエクスポートします。SVGをスリムで高速に保つ方法を紹介します：

パスを簡素化するには、SVGOやSVGOMGなどのツールを使用します。これらのツールは不要なメタデータを削除し、パスコマンドを最適化し、デザインソフトウェアが残すエディタ固有の不要物を取り除きます。IllustratorやFigmaからの典型的なSVGは、最適化後に30〜50%縮小できます。

繰り返し要素にはシンボルを活用します。アイコンがページに10回表示される場合、<symbol>ブロックで1回定義し、<use>で参照します。ブラウザはシェイプデータを1回ダウンロードし、複数回レンダリングします—SVG全体を複製するよりもはるかに効率的です。

ロード戦略を検討します。アイコンやUI要素には、インラインSVGが追加のHTTPリクエストを回避します。大きなイラストには、適切なキャッシングを備えた外部ファイルがより理にかなっています。フォールド以下のSVG画像にはloading="lazy"を適用して、必要になるまでロードを遅延させます。

> SVG vs 他のフォーマット：正しい選択をする

考慮事項SVGPNGJPEGGIF
最適な用途アイコン、ロゴ、イラストスクリーンショット、透明度のある複雑なグラフィック写真シンプルなアニメーション
スケーリング任意のサイズで完璧拡大するとピクセル化拡大するとピクセル化拡大するとピクセル化
ファイルサイズシンプルなグラフィックでは小さい中程度高度に圧縮可能中程度
透明度完全なアルファサポート完全なアルファサポートなしバイナリのみ
アニメーション完全サポートなしなし限定的（256色）
テキスト検索可能はいいいえいいえいいえ
編集可能性任意のテキストエディタで画像エディタが必要画像エディタが必要画像エディタが必要

SVGを選択：ロゴ、アイコン、イラスト、データビジュアライゼーション、複数のサイズで鮮明さを保つ必要があるもの。

PNGを選択：スクリーンショットや多くの色とグラデーションを持つグラフィックなど、複雑な画像で透明度が必要な場合。

JPEGを選択：ファイルサイズが重要で透明度が不要な写真。

> アクセシビリティのベストプラクティス

SVGをアクセシブルにすることで、スクリーンリーダーのユーザーを含む誰もがグラフィックを理解できるようになります：

<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">第3四半期売上実績</title>
  <desc id="chart-desc">
    7月から9月の月間売上を示す棒グラフ、
    9月が$45,000で最高値。
  </desc>
  <!-- チャートコンテンツ -->
</svg>

情報価値を追加しない装飾的なSVGの場合、支援技術から隠します：

<svg aria-hidden="true">
  <!-- 純粋に装飾的なコンテンツ -->
</svg>

> よくある質問

ブラウザ互換性をどう処理しますか？ SVGはすべての現代ブラウザで優れたサポートを受けています。IE8サポートが必要なまれなケースでは、<picture>要素や条件付きコメントを使用してPNGフォールバックを提供します。

SVGファイルが大きすぎます—どうすれば修正できますか？ SVGOMGを通して不要なデータを取り除きます。また、デザインに簡素化できる過剰なアンカーポイントがないか確認します。

SVGでカスタムフォントを使用できますか？ はい！CSS@font-faceを使用してフォントを埋め込むか（SVGがレンダリングされる前にフォントがロードされることを確認）、デザインツールでテキストをパスに変換します。パスへの変換はファイルサイズを増加させますが、どこでも一貫したレンダリングを保証します。

複雑なアニメーションはパフォーマンスに影響しますか？ SVGアニメーションは一般的にパフォーマンスが良好ですが、多くの要素を同時にアニメーション化したり、フィルターなどの計算コストの高いエフェクトを使用すると、低スペックデバイスでカクつくアニメーションを引き起こす可能性があります。代表的なハードウェアでテストし、必要に応じて簡素化してください。

> SVGを他のフォーマットに変換するタイミング

SVGは多くのシナリオで優れていますが、PNG、JPG、WebPなどのラスターフォーマットへの変換が必要な場合があります。これらの状況を理解することで、各プロジェクトで正しい選択ができるようになります。

変換が必要なシナリオ

ソーシャルメディアでの共有 — Twitter、Facebook、LinkedInなどのプラットフォームは、SVGファイルのプレビューを正しくレンダリングしないことがよくあります。SVGグラフィックをPNGまたはJPGに変換すると、共有時に画像が正しく表示されます。

メールキャンペーン — ほとんどのメールクライアントはSVGサポートが限られているか、まったくありません。ニュースレターにSVGでデザインしたグラフィックが含まれている場合は、Gmail、Outlook、その他のクライアントで確実にレンダリングされるようPNGに変換してください。

印刷制作 — SVGは一部の印刷ワークフローで機能しますが、多くの印刷業者は高解像度のラスターフォーマットを好みます。SVGを300 DPI以上のPNGに変換すると、グラフィックが印刷品質の要件を満たすことが保証されます。

ファビコンとアプリアイコン — 現代のブラウザはSVGファビコンをサポートしていますが、プラットフォーム固有のアイコン要件（iOSアプリアイコン、Androidランチャーアイコン、Windowsタイル）では、特定のサイズのPNGまたは他のラスターフォーマットが依然として必要です。

ラスターのみをサポートするシステムとの統合 — 一部のレガシーCMSプラットフォーム、画像CDN、またはサードパーティAPIはラスターフォーマットのみを受け入れます。SVGを変換することで、これらのシステムとの互換性が可能になります。

複雑なエフェクトとフィルター — SVGがブラウザ間で一貫性なくレンダリングされる高度なフィルターエフェクトを使用している場合、ラスターフォーマットに変換することで、どこでも同じ外観が保証されます。

正しい出力フォーマットの選択

ユースケース推奨フォーマット理由
透明度のあるアイコン、ロゴPNGロスレス品質、完全なアルファチャンネル
複雑なイラストPNG または WebPディテールと透明度を保持
SVGオーバーレイ付きの写真JPG または WebP写真の効率的な圧縮
Webパフォーマンス優先WebP または AVIF最高の圧縮対品質比
普遍的な互換性PNGどこでも動作、フォールバック不要

SVGをPNG、JPG、またはWebPに変換する方法

変換プロセスはいくつかの方法で行えます：

ブラウザベースのコンバーター（私たちの無料SVGコンバーター)のようなものは最も簡単なアプローチを提供します—ソフトウェアのインストール不要、どのデバイスでも動作し、変換がブラウザでローカルに行われるためファイルはプライベートのまま保たれます。

デザインソフトウェア（Figma、Adobe Illustrator、Inkscapeなど）は、解像度、品質、カラープロファイルを精密に制御しながらSVGファイルを様々なラスターフォーマットにエクスポートできます。

コマンドラインツール（ImageMagick、Inkscape CLI、librsvgなど）は、大規模な変換ニーズのためのバッチ処理と自動化を可能にします。

ビルドツーリング（sharp（Node.js）やcairosvg（Python）などのパッケージを通じて）により、開発者はSVGからラスターへの変換をデプロイメントパイプラインに統合できます。

変換時は、常に出力サイズを明示的に指定してください。SVGは解像度に依存しないため、最終的なラスターサイズを制御できます—高DPIディスプレイには2xまたは3xサイズを使用し、レスポンシブ画像用に複数のサイズを生成することを検討してください。

> まとめ

SVGは現代のWeb開発者のツールキットに不可欠なツールとしての地位を確立しています。無限のスケーラビリティ、小さなファイルサイズ、編集可能性、Webとの深い統合というユニークな組み合わせにより、アイコン、ロゴ、データビジュアライゼーション、インタラクティブグラフィックにおいて代替が効きません。

高解像度ディスプレイが標準となり、レスポンシブデザインがますます重要になるにつれ、SVGの利点はさらに顕著になります。SVGを始めたばかりでも、専門知識を深めようとしている場合でも、このフォーマットをマスターするために投資した時間は、構築するすべてのプロジェクトで報われるでしょう。

SVGファイルを他のフォーマットに変換する準備はできましたか？無料のSVGからPNGへの変換ツールをお試しください—完全にブラウザで動作し、アップロードは不要です。

このガイドは、開発者がSVGフォーマットの全機能を理解し活用できるよう、SVG2IMGチームによって作成されました。ご質問やご提案がありましたら、ぜひお聞かせください。