SVGのviewBoxとレスポンシブな拡大縮小

SVGのwidthとheightは、DOM内でのレンダリングサイズを設定します。viewBox属性は内部の座標空間を定義します。これらは独立しており、width="200" height="200"でviewBoxが"0 0 100 100"の場合、座標空間は2倍に拡大されます。

viewBox="min-x min-y width height"。最も一般的なviewBox="0 0 100 100"は、原点から始まる100x100の座標空間を定義します。SVG内の座標値はピクセルではなく、この座標空間を参照します。

レスポンシブなSVGでは、width属性とheight属性を省略するか（または100%に設定し）、viewBoxで縦横比を定義します。CSSにsvg { width: 100%; height: auto; }を追加します。SVGはアスペクト比を維持しながら、コンテナに合わせて拡大縮小されます。

preserveAspectRatioは、アスペクト比が異なる場合にviewBoxをSVGのビューポートにどのように収めるかを制御します。値には、"xMidYMid meet"（デフォルト。レターボックス表示）、"xMidYMid slice"（領域を埋めるように切り抜き）、"none"（アスペクト比を維持せず引き伸ばす）があります。

min-xとmin-yを変更すると、SVGの座標空間内で表示する範囲をパンできます。viewBox="50 50 100 100"では、(50,50)から(150,150)までの領域が表示されます。JavaScriptでviewBoxの値を更新することで、インタラクティブなパン操作を実現できます。

viewBoxの幅と高さを小さくするとズームインできます。viewBox="25 25 50 50"では、より小さい領域がSVG要素いっぱいに拡大表示されます。値を大きくするとズームアウトできます。wheelイベントでviewBoxを更新すれば、SVG要素自体を拡大縮小せずにインタラクティブなズームを実現できます。

imgタグ内のSVGはobject-fitによってレスポンシブに拡大縮小できますが、CSSでスタイルを設定したり、スクリプトで操作したりできません。インラインSVGはCSSとJavaScriptから完全に操作できますが、HTMLのサイズが増加します。インタラクティブ性の要件に応じて選択してください。

アイコンSVGでは固定のviewBox（例："0 0 24 24"）を使用し、widthとheightは指定しません。これにより、CSSでサイズを設定できます。.icon { width: 1.5rem; height: 1.5rem; }。viewBoxによって、どのようなサイズでもアイコンを正しく拡大縮小し、鮮明なベクター表示を維持できます。

非表示のSVG内に<symbol viewBox="0 0 24 24">要素としてアイコンを定義します。<use href="#icon-name">で参照します。各use要素には独自のwidth、height、fill、colorを設定できるため、すべてのアイコンを1つのスプライトファイルで管理できます。

SVGのfill="currentColor"は、要素または親要素のCSSのcolorプロパティを継承します。SVGまたは親要素にcolor: redを設定すると、アイコンが自動的に赤で塗りつぶされます。これにより、SVG専用のスタイル設定を行わなくても、単色アイコンをテキストの色に合わせられます。

SVGの内容が切り取られたり、予期しない位置に表示されたりする場合は、viewBoxの値をログ出力または検査してください。よくある誤りは、元のアートのピクセル寸法をそのままviewBoxに設定し、表示サイズに合わせて調整しないことです。これにより、拡大縮小に問題が生じます。viewBoxがSVGアートの実際のコンテンツ範囲と一致していることを確認してください。

SVGを任意のコンテナ幅に合わせてレスポンシブに拡大縮小するには、どうすればよいですか？

SVGのviewBoxは、レンダリングされるピクセルサイズとは独立した内部座標空間を定義し、レスポンシブな拡大縮小を可能にします。viewBoxとwidth:100%; height:autoを設定すると、SVGは任意のコンテナに適応します。symbol+useスプライトパターン、currentColorによるテーマ設定、preserveAspectRatioを組み合わせることで、柔軟でテーマに対応したSVG利用に必要な機能がそろいます。