SVGスプライトにおけるviewBoxの理解
スプライトシンボルのSVG viewBox属性をマスター。異なるソースのアイコンを組み合わせる際のスケーリング、アスペクト比、座標系の制御方法を学びます。
Styling
詳細な説明
SVGスプライトにおけるviewBoxの理解
viewBox属性はSVGスプライトの最も重要でありながら一般的に誤解されている部分の1つです。<symbol>内のグラフィックスの座標系を定義し、異なるサイズでレンダリングされる際のアイコンのスケーリングを制御します。
viewBoxの機能
viewBox属性には4つの値があります：min-x min-y width height。SVG座標空間内の矩形領域を定義し、レンダリングされたビューポートにマッピングされます。
<symbol>上のviewBox vs <svg>上のviewBox
スプライトシステムでは、各<symbol>が独自のviewBoxを持ちます。各シンボルはviewBoxに基づいて独立してスケーリングされます。同じサイズでレンダリングすると、viewBoxが座標マッピングを処理するため、両方のアイコンが24x24ピクセル領域を正しく埋めます。
viewBoxの正規化
異なるソースのアイコンを組み合わせる場合、共通のviewBoxに正規化したい場合があります。SVGスプライトジェネレーターの「Custom viewBox」オプションがこれを行います。ただし注意：異なるグリッド用に設計されたアイコンにviewBox変更を強制すると、位置合わせの問題が生じる可能性があります。
一般的なviewBoxサイズ
- 24x24 — Material Design、Lucide、Heroicons
- 20x20 — HeroiconsのMiniバリアント
- 16x16 — Octicons（GitHub）、小さなUIアイコン
- 512x512 — Font Awesome SVGs（より大きな座標空間）
ユースケース
複数のアイコンライブラリからアイコンを1つのスプライトに結合する開発者、共通のアイコングリッドサイズに標準化するチーム、SVGスプライトでのアイコンサイジング問題をデバッグするすべての人。