How to Make an SVG Scale With its Parent Container?

Last Updated : 05 Jul, 2025

SVGs (Scalable Vector Graphics) are great for graphics that need to stay sharp on any screen. But by default, they don’t always scale automatically with their parent container — unless you use the right settings.

In this article, you'll learn how to make an SVG resize and scale properly with its parent container using CSS and HTML.

Why Scaling Matters

SVGs are resolution-independent, but they won’t resize unless told to.
This is important for responsive designs — especially on mobile and various screen sizes.

1. By directly embed the SVG

This approach uses the <svg> tag within a parent container, making the image scalable based on the parent’s dimensions.

HTML

<html>
<body>
    <div class="container" style="width: 30%; height: 20%; border: 1px dashed black;">
        <svg width="100%" height="auto" viewBox="0 0 100 100">
            <rect width="50" height="50" style="fill:rgb(0,170,0); stroke-width:1; stroke:rgb(0,0,0)" />
        </svg>
    </div>
</body>
</html>

In this example

The parent <div> is given a width of 30% and height of 20%, which makes it responsive to the screen size.
The SVG element has its width="100%" and height="auto" so it scales with the parent container's width.
The viewBox="0 0 100 100" defines a coordinate system, ensuring that the SVG scales proportionally.

Output

Make an SVG Scale With its Parent Container

2. By embedding SVG as an `<img>`

In this approach, the SVG file is referenced using the <img> tag. The browser automatically adjusts the SVG’s aspect ratio when the screen size changes.

HTML

<html>
<body>
    <div class="container" style=
        "width:80%; height:80%; 
        border:1px dashed black;">
        <!-- Put your own SVG image below -->
        <img src="E:\method-draw-image.svg" 
            alt="Description of your SVG image" 
            style="width:50%">
    </div>
</body>
</html>

In this example

The SVG file is referenced in an <img> tag, and the browser scales the image based on the width and height attributes provided.
In this example, the width is set to 50%, meaning it will scale to fit half of the parent container's width.

This approach is simpler but less flexible than directly embedding the SVG within the HTML. It’s a good option for static images, but it doesn’t allow for styling or interaction as easily.

Output:

Full Screen:

Minimized Screen:

Comparing the Two Methods

Method	Pros	Cons
Embed SVG Directly in HTML	- Full control over styling and interactivity. - Best for dynamic content.	- Requires more complex markup. - May not be as straightforward for simple use cases.
Embed SVG as `<img>`	- Simple to implement. - Easy for static content.	- Limited styling or interactivity. - Less flexible for responsive designs.

Conclusion

To scale SVGs responsively, use the viewBox attribute to maintain proportional scaling without distortion. Choose between:

Direct embedding for more control and interactivity.
Using the <img> tag for a simpler, static solution.

Both methods allow SVGs to scale effectively, ensuring they look great on all screen sizes.