【CSSで簡単！】SVGを親コンテナにぴったりフィットさせる3つの方法

2024-04-15

SVG を親コンテナに合わせてスケーリングする方法

方法 1: viewBox 属性を使用する

viewBox 属性は、SVG 画像の表示領域を定義するために使用されます。親コンテナに合わせて SVG 画像をスケーリングするには、viewBox 属性の値を親コンテナのサイズに設定します。

<svg viewBox="0 0 100 100">
  </svg>

上記の例では、viewBox 属性の値は 0 0 100 100 と設定されています。これは、SVG 画像の表示領域が (0, 0) から (100, 100) までの領域であることを意味します。親コンテナの幅が 100 ピクセル、高さが 100 ピクセルである場合、SVG 画像は親コンテナ全体にスケーリングされます。

方法 2: width と height 属性を使用する

<svg width="100%" height="100%">
  </svg>

方法 3: CSS を使用する

CSS を使用して、SVG 画像を親コンテナに合わせてスケーリングすることもできます。これを行うには、次の CSS ルールを使用します。

svg {
  width: 100%;
  height: 100%;
}

上記の CSS ルールは、すべての SVG 画像に適用されます。親コンテナに合わせて SVG 画像をスケーリングするには、この CSS ルールを親コンテナに適用する必要があります。

上記以外にも、SVG 画像を親コンテナに合わせてスケーリングする方法はいくつかあります。たとえば、JavaScript を使用して SVG 画像のサイズを動的に変更したり、preserveAspectRatio 属性を使用して SVG 画像の縦横比を維持したりすることができます。

注意点

SVG 画像を親コンテナに合わせてスケーリングすると、画像の品質が低下する可能性があります。これは、SVG 画像がピクセル化するためです。画像の品質を維持するには、preserveAspectRatio 属性を使用して SVG 画像の縦横比を維持することをお勧めします。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>SVG Scaling</title>
  <style>
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
</body>
</html>

説明

上記の HTML コードは、次のことを行います。

viewBox 属性を使用して、SVG 画像の表示領域を (0, 0) から (100, 100) までの領域に設定します。
circle 要素を使用して、赤い円を描画します。円の中心座標は (50, 50)、半径は 40 ピクセルです。
CSS ルール svg { width: 100%; height: 100%; } を使用して、すべての SVG 画像を親コンテナに合わせてスケーリングします。

このコードを実行すると、赤い円が親コンテナ全体にスケーリングされます。

CSS

svg {
  width: 100%;
  height: 100%;
}

上記の CSS コードは、すべての SVG 画像を親コンテナに合わせてスケーリングします。

JavaScript

const svg = document.querySelector('svg');

svg.style.width = '100%';
svg.style.height = '100%';

上記の JavaScript コードは、querySelector() メソッドを使用して SVG 要素を取得し、style.width と style.height プロパティを使用して、SVG 画像の幅と高さを親コンテナのサイズに設定します。

SVG を親コンテナに合わせてスケーリングするその他の方法

preserveAspectRatio 属性は、SVG 画像の縦横比を維持しながらスケーリングする際に使用されます。この属性には、以下の値を設定できます。

none: 縦横比を維持せずにスケーリングします。
meet: 画像が親コンテナ全体に収まるようにスケーリングします。縦横比は維持されますが、余白が発生する場合があります。
slice: 画像が親コンテナ全体に収まるようにスケーリングし、余白は切り捨てられます。縦横比は維持されます。
auto: meet と slice のどちらかを選択して、画像が親コンテナ全体に収まるようにスケーリングします。

<svg viewBox="0 0 100 100" preserveAspectRatio="meet">
  </svg>

上記の例では、preserveAspectRatio 属性の値は meet と設定されています。これは、画像が親コンテナ全体に収まるようにスケーリングされ、縦横比は維持されることを意味します。

transform プロパティは、SVG 画像を回転、移動、スケーリングするために使用されます。scale() 関数を使用して、SVG 画像をスケーリングすることができます。

<svg viewBox="0 0 100 100" transform="scale(0.5)">
  </svg>

上記の例では、transform 属性の値は scale(0.5) と設定されています。これは、SVG 画像が 0.5 倍にスケーリングされることを意味します。

SVG レスポンシブライブラリを使用すると、SVG 画像をさまざまな画面サイズに合わせて簡単にスケーリングすることができます。いくつかのライブラリが利用可能ですが、人気のあるライブラリには SVGator: https://www.svgator.com/ や SVG Resizer: https://products.aspose.app/words/picresize/svg などがあります。

これらのライブラリは、通常、JavaScript コードを使用して実装されます。ライブラリをページに追加し、SVG 画像のセレクタとスケーリングオプションを指定するだけです。

css html svg