How do I set preserveAspectRatio for an SVG used in Flexbox?

Paste the SVG and click Set Flexbox aspect to write a Flexbox-friendly preserveAspectRatio.

Should Flexbox icons use meet or slice?

meet letterboxes to fit; slice crops to fill. Pick based on whether clipping is acceptable.

Open SVG preserveAspectRatio Meet Slice None to compare modes.

FAQ

Quick answers

How do I set preserveAspectRatio for an SVG used in Flexbox?: Paste the SVG and click Set Flexbox aspect to write a Flexbox-friendly preserveAspectRatio.
Should Flexbox icons use meet or slice?: meet letterboxes to fit; slice crops to fill. Pick based on whether clipping is acceptable.
Want a general meet/slice/none explainer tool?: Open SVG preserveAspectRatio Meet Slice None to compare modes.
Does setting preserveAspectRatio require uploading?: No — free browser-only tool.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B