How do I make an SVG responsive online?

Click Make responsive. The tool keeps or adds viewBox, sets preserveAspectRatio to xMidYMid meet, and removes root pixel width/height.

Why not only set width 100% for a responsive SVG?

100% without meet can squash art in a tall or wide box. This page locks aspect via preserveAspectRatio. Use Scale With Container for the CSS 100%/auto pair.

Does make-responsive change path data?

No. Only root sizing attributes. Geometry stays put.

Can I combine responsive SVG with a flex parent?

Yes. After this pass, drop the SVG in flex/grid. For gradient stretch in flex, use the Flexbox aspect tools.

Make SVG Responsive Online — Free Tool

FAQ

Quick answers

How do I make an SVG responsive online?: Click Make responsive. The tool keeps or adds viewBox, sets preserveAspectRatio to xMidYMid meet, and removes root pixel width/height.
Why not only set width 100% for a responsive SVG?: 100% without meet can squash art in a tall or wide box. This page locks aspect via preserveAspectRatio. Use Scale With Container for the CSS 100%/auto pair.
Does make-responsive change path data?: No. Only root sizing attributes. Geometry stays put.
Can I combine responsive SVG with a flex parent?: Yes. After this pass, drop the SVG in flex/grid. For gradient stretch in flex, use the Flexbox aspect tools.

Fix clipping → Scale with container → Remove width/height → preserveAspectRatio →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Make SVG Responsive Online

Live preview