How Do I Scale Inline SVGs to Fit Their Parent Containers While Maintaining Aspect Ratio?

Scaling Inline SVGs to Fit Parent Containers

Inline SVGs offer the flexibility of adding vector graphics directly to HTML documents. However, scaling them to match the size of the parent container while maintaining aspect ratio can present a challenge. Here's how to achieve this using the viewBox attribute:

To make an inline SVG scale, we employ the viewBox attribute on the SVG element. This attribute defines the bounding box of the image within its own coordinate system. Subsequently, we specify the desired width and height using the width and height attributes, which are relative to the containing page.

Consider the following example, which displays a 10px by 20px triangle:

<svg viewBox="0 0 20 10">
    <polygon fill="red" stroke-width="0"
             points="0,10 20,10 10,0" />
</svg>

This SVG will render as a 10px by 20px triangle within the given container, regardless of its size. The viewBox attribute (0 0 20 10) defines the coordinate system of the image, with (0,0) being the top-left corner and (20,10) being the bottom-right corner. By specifying the width and height attributes (not shown in the example), we scale the image to the desired size relative to the container while maintaining its aspect ratio.

The above is the detailed content of How Do I Scale Inline SVGs to Fit Their Parent Containers While Maintaining Aspect Ratio?. For more information, please follow other related articles on the PHP Chinese website!