What is the difference between meet, slice, and none in SVG?

meet fits inside the viewport; slice fills and may crop; none ignores aspect and can distort.

When should I choose slice over meet?

Use slice when you want the graphic to fill the box and cropping is acceptable.

Open Set SVG preserveAspectRatio Online.

FAQ

Quick answers

What is the difference between meet, slice, and none in SVG?: meet fits inside the viewport; slice fills and may crop; none ignores aspect and can distort.
When should I choose slice over meet?: Use slice when you want the graphic to fill the box and cropping is acceptable.
Want to fill a container without distortion after picking a mode?: Open Set SVG preserveAspectRatio Online.
Is comparing meet/slice/none free in the browser?: Yes. Free, no upload.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B