How to make the svg element expand or contract to its parent container with HTML?

Spread the love

Sometimes, we want to make the svg element expand or contract to its parent container with HTML.

In this article, we’ll look at how to make the svg element expand or contract to its parent container with HTML.

How to make the svg element expand or contract to its parent container with HTML?

To make the svg element expand or contract to its parent container with HTML, we remove the width and height attributes.

For instance, we write

<svg viewBox="0 0 3212 3212" fill="none" xmlns="http://www.w3.org/2000/svg">
  circle cx="1606" cy="1606" r="1387" stroke="black" stroke-width="438"/>
</svg>

to remove the width and height attributes from the svg element to make it fit its parent container.

Conclusion

To make the svg element expand or contract to its parent container with HTML, we remove the width and height attributes.

Leave a Reply

Your email address will not be published. Required fields are marked *