How do I make an SVG scale with its container?

Click Scale with container. The root gets width:100%, height:auto, and display:block so CSS parent width drives size.

How is scale-with-container different from a responsive SVG?

Scale-with-container is the CSS size contract (100% / auto). Make SVG Responsive Online adds preserveAspectRatio meet and ensures a viewBox.

Yes. viewBox keeps aspect. This tool does not invent a crop; it only sets fluid CSS size.

Root width/height attributes are stripped so they cannot override the 100% style.

FAQ

Quick answers

How do I make an SVG scale with its container?: Click Scale with container. The root gets width:100%, height:auto, and display:block so CSS parent width drives size.
How is scale-with-container different from a responsive SVG?: Scale-with-container is the CSS size contract (100% / auto). Make SVG Responsive Online adds preserveAspectRatio meet and ensures a viewBox.
Do I still need a viewBox after scaling with the container?: Yes. viewBox keeps aspect. This tool does not invent a crop; it only sets fluid CSS size.
Will fixed width and height attributes fight the container?: Root width/height attributes are stripped so they cannot override the 100% style.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B