SVGファイとは？初心者向け完全ガイド

SVGの読み方

SVGは「エスブイジー」と読みます。

英語圏では各文字を「エス・ヴィー・ジー」と発音します。

SVG形式の特徴

SVG形式は以下の特徴を持つ画像ファイル形式です。

• ベクターデータ：数式で図形を表現するため、拡大縮小しても画質が劣化しない
• テキストベース：XMLで記述されているため、テキストエディタで編集可能
• 軽量：シンプルな図形であれば、ビットマップ画像よりファイルサイズが小さい
• 検索可能：テキスト情報を含むため、検索エンジンに認識される
• アニメーション対応：CSSやJavaScriptでアニメーションを追加できる

SVGのメリット

1. 解像度に依存しない
   • どんなに拡大しても画質が劣化しない
   • Retinaディスプレイなど高解像度画面でも鮮明に表示される
   • レスポンシブデザインに最適
2. ファイルサイズが小さい
   • ロゴやアイコンなどシンプルな図形は非常に軽量
   • Webサイトの読み込み速度向上に貢献
   • 圧縮も可能でさらに軽量化できる
3. 編集が容易
   • テキストエディタで直接編集可能
   • CSSで色やサイズを変更できる
   • JavaScriptで動的に操作できる
4. SEOに有利
   • テキスト情報を含むため検索エンジンにインデックスされる
   • alt属性やtitle属性を追加できる
5. アクセシビリティが高い
   • スクリーンリーダーに対応しやすい
   • 拡大してもぼやけないため視認性が高い

SVGのデメリット

1. 複雑な画像には不向き
   • 写真のような複雑な画像はファイルサイズが大きくなる
   • 細かいディテールの表現には限界がある
2. 古いブラウザでは表示されない
   • IE8以前など非常に古いブラウザはサポート外。（ただし現在はほぼすべてのブラウザで対応済み）
3. レンダリングに負荷がかかる場合がある
   • 非常に複雑なSVGや大量のSVGは処理が重くなる可能性がある
4. セキュリティリスク
   • JavaScriptを埋め込めるため、XSS攻撃のリスクがある
   • 信頼できないソースからのSVGは注意が必要

SVGとPNGの違い

使い分けのポイント：

• ロゴ、アイコン、図形、イラスト → SVG
• 写真、複雑なグラデーション、細かいディテール → PNG/JPG

1. 「グラフィックソフト」で作成

Adobe Illustrator

• 業界標準のベクター編集ソフト
• 「ファイル」→「書き出し」→「SVGとして書き出し」で保存
• オプション設定で最適化が可能

Inkscape（無料）

• オープンソースのベクター編集ソフト
• Illustratorの代替として人気
• 「ファイル」→「名前を付けて保存」→「SVG」を選択

Figma / Sketch

• UI/UXデザインツール
• オブジェクトを選択して「Export」→「SVG」

Canva

• オンラインデザインツール
• 無料プランでもSVG出力可能（一部制限あり）
• 「ダウンロード」→「SVG」を選択

2. 「オンラインエディタ」で作成

オンラインエディタのメリット

• ブラウザ上で直接編集可能
• ソフトのインストール不要
• シンプルな図形作成に便利

オンラインツール

• Method Draw
• Boxy SVG
• Vectr

3. コードで直接作成

SVGはXMLベースなので、Visual Studio CodeやCursorなどテキストエディタで直接記述できます。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#3498db" />
  <rect x="60" y="60" width="80" height="80" fill="#e74c3c" />
</svg>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#3498db" />
  <rect x="60" y="60" width="80" height="80" fill="#e74c3c" />
</svg>

See the Pen SVGー基本的な編集例 by naoq (@naoq) on CodePen.

4. 既存の画像を変換

• PNG/JPGからSVGへの自動変換ツールもありますが、品質は限定的
• ベクタートレース機能を使うとビットマップをベクター化できる
• Illustratorの「画像トレース」機能が高品質

Webブラウザで開く

最も簡単な方法は、SVGファイルをブラウザにドラッグ&ドロップすることです。

対応ブラウザ：

• Google Chrome
• Firefox
• Safari
• Microsoft Edge
• すべての現代的なブラウザ

SVGビューア（Windows）

Windows 11標準

• エクスプローラーでサムネイル表示可能
• フォトアプリで開ける

SVGビューア（Mac）

• Safari（標準ブラウザ）
• プレビュー.app（標準アプリ）
• Finder でQuick Look（スペースキー）

テキストエディタで開く

SVGはテキストファイルなので、以下のエディタで開けます：

• Visual Studio Code（拡張機能でプレビュー可能）
• Sublime Text
• Atom
• メモ帳

SVGが表示されない場合の対処法

1. ファイルが破損していないか確認
   • テキストエディタで開いて構文エラーをチェック
   • XMLの閉じタグが正しいか確認
2. ブラウザのキャッシュをクリア
   • 古いキャッシュが原因の場合がある
3. CORSエラーの確認
   • ローカルファイルをブラウザで開く際に制限がある場合
   • ローカルサーバーを立てて表示する
4. viewBox属性の確認
   • viewBoxが設定されていないと表示されない場合がある
   • width/height属性も確認

HTMLに埋め込む方法

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

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

<img src="logo.svg" alt="ロゴ" width="200">

<img src="logo.svg" alt="ロゴ" width="200">

.logo {
  background-image: url('logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.logo {
  background-image: url('logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

<object data="logo.svg" type="image/svg+xml"></object>

<object data="logo.svg" type="image/svg+xml"></object>

SVGのサイズ変更

CSSでサイズ変更

svg {
  width: 300px;
  height: 300px;
}

/* レスポンシブ対応 */
svg {
  width: 100%;
  height: auto;
}

svg {
  width: 300px;
  height: 300px;
}

/* レスポンシブ対応 */
svg {
  width: 100%;
  height: auto;
}

<svg width="200" height="200" viewBox="0 0 100 100">
 <!-- コンテンツ -->
</svg>

<svg width="200" height="200" viewBox="0 0 100 100">
 <!-- コンテンツ -->
</svg>

<svg viewBox="0 0 100 100">
  <!-- 100x100の座標系で描画 -->
</svg>

<svg viewBox="0 0 100 100">
  <!-- 100x100の座標系で描画 -->
</svg>

背景を透過する

SVGはデフォルトで背景が透過されています。特別な設定は不要です。

<svg width="200" height="200">
  <rect width="200" height="200" fill="white" />
  <!-- その他の要素 -->
</svg>

<svg width="200" height="200">
  <rect width="200" height="200" fill="white" />
  <!-- その他の要素 -->
</svg>

svg {
  background-color: white;
}

svg {
  background-color: white;
}

SVGの色を変更する

svg path {
  fill: #ff0000;
  stroke: #0000ff;
}

svg path {
  fill: #ff0000;
  stroke: #0000ff;
}

<circle fill="#3498db" />

<circle fill="#3498db" />

<svg>
  <path fill="currentColor" />
</svg>

<svg>
  <path fill="currentColor" />
</svg>

svg {
  color: red;/* この色が適用される */
}

svg {
  color: red;/* この色が適用される */
}

レスポンシブ対応

.svg-container {
  width: 100%;
  max-width: 500px;
}

.svg-container svg {
  width: 100%;
  height: auto;
}

.svg-container {
  width: 100%;
  max-width: 500px;
}

.svg-container svg {
  width: 100%;
  height: auto;
}

テキストエディタで編集

VSCodeなどのエディタでSVGファイルを開き、直接コードを編集できます。

基本的な編集例

<!-- 色を変更 -->
<circle fill="#ff0000" /> → <circle fill="#0000ff" />

<!-- サイズを変更 -->
<svg width="100" height="100"> → <svg width="200" height="200">

<!-- 位置を変更 -->
<rect x="10" y="10" /> → <rect x="20" y="20" />

<!-- 色を変更 -->
<circle fill="#ff0000" /> → <circle fill="#0000ff" />

<!-- サイズを変更 -->
<svg width="100" height="100"> → <svg width="200" height="200">

<!-- 位置を変更 -->
<rect x="10" y="10" /> → <rect x="20" y="20" />

属性値を変更する事で色やサイズ、位置を変更できます。

グラフィックソフトで編集

Adobe Illustrator

• 最も高機能なSVG編集ツール
• 「ファイル」→「開く」でSVGを読み込み
• 通常のベクター編集が可能

Inkscape（無料）

• オープンソースの高機能エディタ
• Illustratorの代替として人気
• Windows/Mac/Linux対応

Figma

• ブラウザベースのデザインツール
• SVGをドラッグ&ドロップで読み込み
• 共同編集が可能

編集ツールの選び方

初心者向け

• Canva（オンライン、直感的）
• Vectr（オンライン、無料）

中級者向け

• Inkscape（無料、高機能）
• Figma（基本無料、チーム向け）

プロ向け

• Adobe Illustrator（有料、業界標準）
• Affinity Designer（最近無料に、高コスパ）

よくある編集作業

1. 色の変更

• fill属性を編集
• CSSで一括変更

2. サイズ調整

• width/height属性を変更
• viewBoxで比率を保持

3. パスの編集

• グラフィックソフトでアンカーポイントを操作
• パスデータを直接編集（上級者向け）

4. テキストの編集

• text要素を直接編集
• フォントはアウトライン化推奨

5. 最適化・軽量化

• SVGO（コマンドラインツール）： Node.jsで動作する、SVGファイルを自動で最適化（軽量化）するためのコマンドラインツールです。
• SVGOMGオンライン版： Node.jsベースのSVG最適化ツールである「SVGO」に、GUI（グラフィカルな操作画面）をつけたものです。
• 不要なメタデータを削除

SVGからPNGへ変換

# ImageMagickを使用（インストール必要）
convert input.svg output.png

# Inkscapeを使用（インストール必要）
inkscape input.svg --export-png=output.png

# ImageMagickを使用（インストール必要）
convert input.svg output.png

# Inkscapeを使用（インストール必要）
inkscape input.svg --export-png=output.png

SVGからJPGへ変換

基本的にPNG変換と同じ手順ですが、JPGは透過に非対応なので注意が必要です。

変換手順

1. まずPNGに変換
2. PNGからJPGに変換（画像編集ソフトやオンラインツール）

または、直接JPGに変換できるツールを使用：

• Illustrator
• オンライン変換サービス

SVGからPDFへ変換

方法1：ブラウザの印刷機能

1. SVGをブラウザで開く
2. 印刷（Ctrl+P / Cmd+P）
3. 「PDFとして保存」を選択

方法2：Illustrator

• 「ファイル」→「別名で保存」→「PDF」

方法3：Inkscape

• 「ファイル」→「名前を付けて保存」→「PDF」を選択

PNGやJPGからSVGへ変換

ビットマップ画像からベクター画像への変換は品質が限定的です。

自動変換ツール

• Vector Magic（有料、高品質）
• Vectorizer.io（無料）
• Illustratorの画像トレース機能

SVG変換ツール

無料ツール

• CloudConvert（オンライン）
• GIMP（デスクトップアプリ）
• Affinity Designer

有料ツール

• Adobe Illustrator（最高品質）
• CorelDRAW

なぜ最適化が必要か

デザインソフトから書き出したSVGには、不要な情報が含まれていることが多く：

• 非表示レイヤーのデータ
• メタデータやコメント
• 冗長な属性
• 小数点以下の不要な精度

これらを削除することで、ファイルサイズを30〜70%削減できます。

SVGO（推奨ツール）

オンライン版：SVGOMG

• https://jakearchibald.github.io/svgomg/
• ブラウザで使える
• 設定をビジュアルで確認しながら最適化

コマンドライン版

# インストール
npm install -g svgo

# 最適化実行
svgo input.svg -o output.svg

# インストール
npm install -g svgo

# 最適化実行
svgo input.svg -o output.svg

最適化のポイント

1. 小数点の精度を下げる
   • デフォルトの精度は過剰なことが多い
   • 視覚的に変化がない範囲で削減
2. 不要な属性を削除
   • id属性（使用していない場合）
   • データ属性
   • デフォルト値
3. パスを最適化
   • 冗長なパスコマンドを簡略化
   • 小さな値をまるめる
4. 色の表記を短縮
   • #ffffff → #fff
   • rgb(255,255,255) → #fff

⚠️注意点

• アニメーションで使用するid属性は保持する
• JavaScriptで操作する要素は保持する
• 過度な最適化は可読性を損なう