SVGスプライトのベストプラクティス

SVGスプライトのベストプラクティス

これらのベストプラクティスは、大規模アプリケーションでのSVGスプライトの本番経験から導き出されています。

1. 結合前に最適化する

常にスプライトにマージする前に個別のSVGを最適化します。メタデータ、コメント、エディターアーティファクト、不要な属性を除去します。

2. <g>や<defs>ではなく<symbol>を使用する

<symbol>要素はスプライト用に特別に設計されています：独自のviewBoxをサポート、デフォルトでレンダリングされない、再利用可能なグラフィックオブジェクトをセマンティックに表現します。

3. ハードコードされた色を除去する

fillとstrokeの色属性を除去します（fill="none"を除く）。CSS制御のカラーリングにcurrentColorを使用します。

4. 一貫したviewBoxを保つ

アイコンセットで単一のviewBoxサイズ（通常0 0 24 24）に標準化します。

5. 説明的でユニークなIDを使用する

icon-{name}のような命名規則に従います。

一般的な落とし穴

• 重複ID — 2つのシンボルが同じIDを持つと1つだけがレンダリングされます
• viewBoxの欠落 — viewBoxがないとシンボルが正しくスケーリングされない可能性があります
• xmlnsの忘れ — 外側の<svg>にはxmlns="http://www.w3.org/2000/svg"が必要です
• CSS詳細度の競合 — SVG内のインラインスタイルは外部CSSをオーバーライドします。除去してください。