How to make an SVG scale with its parent container with CSS?

Spread the love

Sometimes, we want to make an SVG scale with its parent container with CSS.

In this article, we’ll look at how to make an SVG scale with its parent container with CSS.

How to make an SVG scale with its parent container with CSS?

To make an SVG scale with its parent container with CSS, we set the viewBox attribute.

For instance, we write

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

to set the viewBox attribute to the min-x, min-y, width and height values.

Conclusion

To make an SVG scale with its parent container with CSS, we set the viewBox attribute.

Leave a Reply

Your email address will not be published.