How to Make SVG Elements Expand and Contract with Their Parent Container?

Expand and Contract SVG Element to Parent Container

The challenge is to ensure an SVG element expands or contracts to match its parent container's dimensions, regardless of container size.

Common Solution: viewBox

A popular solution involves setting the viewBox attribute on the SVG element. However, this may not be effective when child elements within the SVG have fixed widths or heights.

Percentage-Based Element Dimensions

An alternative approach is to use percentage-based widths and heights for elements within the SVG. This mirrors the behavior of embedded SVGs using , which expand and contract seamlessly despite specific element dimensions.

Inkscape Percentage Setting

If percentage-based dimensions are preferred, consider modifying Inkscape's default settings. Locate the "Scale" option in the "Object" menu and enable "Scale by: Percentage". This ensures all elements created within the SVG have percentage-based dimensions.

Example Code with Percentage-Based Dimensions

Here's an updated code example:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="10%" height="10%" />
    </svg>
</div>

This ensures the rectangle within the SVG expands and contracts proportionately to its parent container's dimensions.

The above is the detailed content of How to Make SVG Elements Expand and Contract with Their Parent Container?. For more information, please follow other related articles on the PHP Chinese website!