SVG スケーリング解説

SVGのスケーリングについて (CSS、HTML、SVG)

SVG (Scalable Vector Graphics)を親要素に合わせてスケーリングする方法

SVGは、ベクトル形式のグラフィックであり、拡大縮小しても画質が劣化しません。これをCSS、HTML、SVGで実現する方法を解説します。

CSSを使用する方法

最も一般的な方法は、SVG要素にCSSのwidthとheightプロパティを適用することです。これにより、SVGは親要素のサイズに合わせてスケーリングされます。

.parent-container {
  width: 200px;
  height: 200px;
}

.child-svg {
  width: 100%;
  height: 100%;
}

この例では、.parent-containerのサイズが200px × 200pxで、.child-svgは親要素の100%の幅と高さに設定されています。

SVGのviewBox属性を使用する方法

SVGのviewBox属性は、SVGの描画領域を定義します。この属性を使用して、SVGをスケーリングすることができます。

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

この例では、SVGの描画領域は100px × 100pxであり、widthとheight属性が100%に設定されているため、SVGは親要素に合わせてスケーリングされます。

SVGのpreserveAspectRatio属性を使用する方法

preserveAspectRatio属性は、SVGがスケーリングされる際のアスペクト比を維持する方法を指定します。

<svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMinYMin slice">
  </svg>

この例では、preserveAspectRatio="xMinYMin slice"を設定しているため、SVGは親要素に合わせてスケーリングされますが、アスペクト比は維持されます。

SVGスケーリング解説 (コード例付き)

<div class="parent-container">
  <svg class="child-svg">
    </svg>
</div>

.parent-container {
  width: 200px;
  height: 200px;
}

.child-svg {
  width: 100%;
  height: 100%;
}

• .child-svgのwidthとheightを100%に設定することで、親要素のサイズに合わせてスケーリングされます。
• .parent-containerのサイズを指定します。

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

• viewBox属性でSVGの描画領域を定義します。

<svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMinYMin slice">
  </svg>

• xMinYMin sliceは、SVGを親要素に合わせてスケーリングし、余白を埋めるようにします。

JavaScriptを使用する方法

JavaScriptを使用することで、動的にSVGのサイズを調整することができます。

const svgElement = document.querySelector('svg');
const parentContainer = svgElement.parentElement;

svgElement.style.width = `${parentContainer.clientWidth}px`;
svgElement.style.height = `${parentContainer.clientHeight}px`;

• 親要素の幅と高さを取得し、SVG要素のスタイルに設定します。
• JavaScriptでSVG要素と親要素を取得します。

SVGのtransform属性を使用する方法

transform属性を使用して、SVGをスケーリングすることができます。

<svg viewBox="0 0 100 100" width="100%" height="100%" transform="scale(2)">
  </svg>

• 他の変換関数（translate、rotateなど）も使用できます。
• scale(2)は、SVGを2倍に拡大します。

CSSのtransformプロパティを使用する方法

SVG要素をCSSのtransformプロパティを使用してスケーリングすることもできます。

.child-svg {
  transform: scale(2);
}