SVG画像のデータURI
Base64またはパーセントエンコーディングを使用してSVG画像をデータURIとして埋め込む。どちらのエンコーディングがより小さな結果を生成するか、SVGデータURIの最適化方法を学ぶ。
Images
詳細な説明
SVGデータURI: Base64 vs パーセントエンコーディング
SVGはテキストベースのXMLであるため、画像フォーマットの中でユニークです。データURIには2つのエンコーディングオプション（Base64とパーセントエンコーディング）があります。正しいものを選択すると、データURIサイズを大幅に削減できます。
Base64エンコードされたSVG
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0...');
パーセントエンコードされたSVG（通常より小さい）
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
サイズ比較
一般的な500バイトのSVGアイコンの場合：
- Base64: 約668バイト（33%オーバーヘッド）
- パーセントエンコード: 約550-600バイト（10-20%オーバーヘッド）
ほとんどのSVGコンテンツがエンコードなしで通過する印刷可能ASCIIであるため、パーセントエンコーディングが優位です。エスケープが必要な文字は少数です：
| 文字 | パーセントエンコード |
|---|---|
< |
%3C |
> |
%3E |
# |
%23 |
" |
%22（SVGではシングルクォートを使用） |
エンコード前のSVG最適化
- 不要な属性を削除:
xmlnsはルートのみに必要 - 短い属性値を使用:
fill='transparent'の代わりにfill='none' - コメントとメタデータを削除: エディタ生成のクラフトを除去
- パスを簡素化: SVGOを使用してパスデータを最適化
- currentColorを使用:
fill='currentColor'でCSSが色を制御
ユースケース
一般的なSVGアイコンのユーティリティクラスを提供するTailwind CSSプラグインを構築しており、各アイコンが外部ファイル依存なしにCSS内に自己完結する必要がある場合。