SVG preserveAspectRatio Meet vs Slice Explained

This article explores the difference between the meet and slice values used in the SVG preserveAspectRatio attribute. You will learn how each parameter controls the scaling and alignment of an SVG when its aspect ratio does not match its container, their CSS equivalents, and when to use each approach in web design.

Understanding SVG preserveAspectRatio

The preserveAspectRatio attribute determines how an SVG image scales when its viewBox aspect ratio differs from the viewport (the width and height defined on the <svg> element or by its parent container).

The attribute takes two parameters: an alignment value and an optional aspect-ratio handling value:

preserveAspectRatio="<align> <meetOrSlice>"

The <meetOrSlice> parameter accepts two values: meet (the default) and slice.

The meet Parameter

When using meet, the SVG scales while preserving its aspect ratio until the entire viewBox fits within the viewport.

• Visibility: The entire SVG graphic remains visible; no part of the image is cropped.
• Sizing Behavior: Scaling stops as soon as one dimension (width or height) reaches the boundary of the viewport.
• White Space: If the container’s aspect ratio differs from the SVG, extra empty space (letterboxing or pillarboxing) will appear along the unconstrained axis.
• CSS Equivalent: Works identically to object-fit: contain or background-size: contain.

Example

<svg viewBox="0 0 100 100" width="300" height="150" preserveAspectRatio="xMidYMid meet">

In this scenario, the 1:1 viewBox scales down to fit the 150px height completely, leaving empty space on the left and right sides within the 300px width.

The slice Parameter

When using slice, the SVG scales while preserving its aspect ratio until the entire viewport is covered by the viewBox.

• Visibility: The SVG will cover the entire container, but any content extending beyond the viewport boundaries is clipped (sliced off).
• Sizing Behavior: Scaling continues until the larger dimension covers the viewport entirely.
• White Space: There is never empty space or letterboxing inside the container.
• CSS Equivalent: Works identically to object-fit: cover or background-size: cover.

Example

<svg viewBox="0 0 100 100" width="300" height="150" preserveAspectRatio="xMidYMid slice">

In this scenario, the 1:1 viewBox scales up to match the 300px width, causing the top and bottom portions of the SVG to be sliced off because they exceed the 150px height.

Summary Comparison