SVGファイルを最適化してWebパフォーマンスを向上させる10の方法
最適化されていないSVGはPNGより大きくなることがあります。SVGOやGZIP圧縮などの実践的なテクニックでファイルサイズを50〜80%削減し、Core Web Vitalsスコアを改善する方法を解説します。
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- 最適化されていないSVGはPNGより大きくなることがあります — 適切な最適化で平均50〜80%のファイルサイズ削減が可能
- まずエディタのメタデータを削除：IllustratorやFigmaなどのツールによる40〜60%の不要なデータを除去
-
SVGOは業界標準のオプティマイザー — CLI（
npx svgo）またはSVGOMGウェブインターフェースで実行 - サーバーでSVGのGZIP圧縮を有効に：12KBのSVGがわずか3.2KBに圧縮
- 最適化されたSVGはCore Web Vitalsを直接改善：LCP、FID、CLSスコアすべてに効果
SVG最適化が重要な理由
最適化されていないSVGはPNGより大きくなることがあります。500KBのSVGではベクターを使う意味がありません。適切な最適化でファイルサイズを50〜80%削減できます。
パフォーマンスへの実際の影響
| 指標 | 最適化前 | 最適化後 | 改善率 |
|---|---|---|---|
| ファイルサイズ | 45 KB | 8 KB | 82%削減 |
| パース時間 | 120ms | 25ms | 79%高速化 |
| LCPへの影響 | +0.3秒 | +0.05秒 | 83%改善 |
SVG最適化チェックリスト
1. エディタのメタデータを削除
デザインツールは不要なデータを追加します：
最適化前（Illustratorエクスポート）：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0, SVG Export -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve">最適化後：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">削減効果：メタデータだけで40〜60%
2. パスの簡略化
小数点の精度を削減：
最適化前：
<path d="M12.3456789,45.6789012 L67.8901234,12.3456789"/>最適化後：
<path d="M12.35,45.68 L67.89,12.35"/>削減効果：20〜40%
Pro Tip: SVGOのcleanupNumericValuesの精度は、アイコンやUI要素には小数点以下2桁に設定しましょう。詳細なイラストや地図など精度が重要な場合は3〜4桁を使用します。一般的なアイコンサイズでは2桁での視覚的な違いはほぼ分かりません。
3. パスの統合
類似するパスを結合：
最適化前：
<path d="M0,0 L10,0" fill="#000"/>
<path d="M10,0 L20,0" fill="#000"/>
<path d="M20,0 L30,0" fill="#000"/>最適化後：
<path d="M0,0 L30,0" fill="#000"/>削減効果：50〜70%
4. 属性の代わりにCSSを使用
最適化前：
<circle cx="50" cy="50" r="40" fill="#1cb721" stroke="#000" stroke-width="2"/>最適化後：
<style>.c{fill:#1cb721;stroke:#000;stroke-width:2}</style>
<circle cx="50" cy="50" r="40" class="c"/>削減効果：10〜30%（繰り返し要素が多いほど効果大）
5. 非表示要素の削除
表示されないものをすべて削除：
- viewBox外の要素
- 完全に透明なシェイプ
- 空のグループ
- 未使用の定義
SVG最適化ツール ベスト4
1. SVGO（総合ベスト）
コマンドラインツール、最も設定が柔軟：
npx svgo input.svg -o output.svg一般的な削減率：50〜80%
2. SVGOMG（Webインターフェース）
SVGOのオンライン版、ビジュアルプレビュー付き：
- jakearchibald.github.io/svgomg/
3. ImageOptim（Mac）
ドラッグ＆ドロップで最適化：
- SVG、PNG、JPGを処理
- ロスレス圧縮
4. VectoSolve（変換時に最適化）
VectoSolveで生成されるSVGは最適化済み：
- クリーンなパス
- 最小限のコード
- メタデータなし
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal最大限の削減を実現するSVGO設定
// svgo.config.js
module.exports = {
plugins: [
'removeDoctype',
'removeXMLProcInst',
'removeComments',
'removeMetadata',
'removeEditorsNSData',
'cleanupAttrs',
'mergeStyles',
'inlineStyles',
'minifyStyles',
'cleanupIds',
'removeUselessDefs',
'cleanupNumericValues',
'convertColors',
'removeUnknownsAndDefaults',
'removeNonInheritableGroupAttrs',
'removeUselessStrokeAndFill',
'cleanupEnableBackground',
'removeHiddenElems',
'removeEmptyText',
'convertShapeToPath',
'convertEllipseToCircle',
'moveGroupAttrsToElems',
'collapseGroups',
'convertPathData',
'convertTransform',
'removeEmptyAttrs',
'removeEmptyContainers',
'mergePaths',
'removeUnusedNS',
'sortDefsChildren',
'removeTitle',
'removeDesc'
]
};"最速のSVGは小さなSVGです。最適化はオプションではありません — 快適なインターフェースと遅いインターフェースの違いそのものです。
最適化ビフォー・アフター
ロゴの最適化
| 段階 | サイズ | 削減率 |
|---|---|---|
| オリジナル（Illustrator） | 125 KB | - |
| メタデータ削除 | 52 KB | 58% |
| パス簡略化 | 28 KB | 78% |
| パス統合 | 18 KB | 86% |
| 最終（SVGO） | 12 KB | 90% |
アイコンセット（50アイコン）
| 段階 | 合計サイズ |
|---|---|
| オリジナル | 450 KB |
| 最適化後 | 85 KB |
| 削減率 | 81% |
上級テクニック
1. SVGスプライトを使用
複数のアイコンを1つのファイルに統合：
<svg style="display:none">
<symbol id="icon-home" viewBox="0 0 24 24">...</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">...</symbol>
</svg>
<svg><use href="#icon-home"/></svg>メリット：
- HTTPリクエスト1回
- ブラウザキャッシュ
- 合計サイズの削減
2. GZIP圧縮
SVGは非常に高い圧縮率を実現：
| ファイル | オリジナル | Gzip後 |
|---|---|---|
| Logo.svg | 12 KB | 3.2 KB |
| Icons.svg | 85 KB | 18 KB |
サーバー設定：
gzip on;
gzip_types image/svg+xml;SVGファイルはXMLベースのテキストであるため、GZIP圧縮に最適です。ほとんどのSVGはGZIP後にさらに60〜75%の削減が可能です。サーバーがまだSVG圧縮に対応していない場合、これが最も効果的な改善策です。
3. 遅延読み込み
ファーストビュー外のSVGに：
<img src="illustration.svg" loading="lazy" alt="...">Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeCore Web Vitalsへの影響
最適化されたSVGは以下を直接改善：
LCP（Largest Contentful Paint）
- ファイルが小さい = 読み込みが速い
- 目標：2.5秒未満
FID（First Input Delay）
- パース量が少ない = インタラクティブになるのが速い
- 目標：100ms未満
CLS（Cumulative Layout Shift）
- viewBox付きSVG = 安定したサイズ
- 目標：0.1未満
まとめ
SVG最適化はWebパフォーマンスに不可欠です。数分の最適化作業でファイルサイズを80%削減し、Core Web Vitalsスコアを大幅に改善できます。
すぐにできること：
- すべてのSVGをSVGOで処理
- サーバーでGZIPを有効化
- アイコンにはSVGスプライトを使用
- VectoSolveで最適化済みの変換を利用
最適化を始めましょう：VectoSolveで画像を変換・最適化して、すぐにWeb対応のSVGを手に入れましょう。
| 最適化テクニック | 平均サイズ削減 | Core Web Vitalsへの影響 | 難易度 |
|---|---|---|---|
| エディタメタデータの削除 | 40〜60% | LCP改善 | 簡単（自動化可能） |
| チューニング済みSVGO設定 | 合計50〜80% | LCP + CLS改善 | 簡単（CLIツール） |
| パス簡略化とシェイプ統合 | 15〜30% | FCP改善 | 中程度 |
| インラインスタイルの代わりにCSS | 10〜20% | FCP改善 | 中程度 |
| Gzip/Brotli圧縮 | 転送時60〜70% | TTFB改善 | 簡単（サーバー設定） |
参考資料
- web.dev — Core Web VitalsのためのSVG最適化を含むGoogleのWebパフォーマンス公式ガイド
- W3C SVG 2仕様 — 最適化準拠のための有効なSVG構造を定義する公式仕様
- MDN Web Docs — SVG — 最適化に関連するSVG要素と属性の技術リファレンス
- CSS-Tricks: Using SVG — 実践的な最適化ワークフローとSVGO設定ガイド
- Smashing Magazine — SVGパフォーマンス監査と実際の最適化事例の詳細記事