How SVG preserveAspectRatio Works  Align, Meet & Slice Guide
preserveAspectRatio controls SVG scaling alignment  choose where content aligns and whether it letterboxes (meet) or crops (slice).
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
preserveAspectRatio Value Structure
The value combines an alignment keyword and a meetOrSlice keyword: `xMidYMid meet`. The alignment (xMinYMin, xMidYMid, xMaxYMax, etc.) controls where the viewBox aligns in the viewport. `meet` fits; `slice` crops to fill.
- xMidYMid meet: center-aligned, letterboxed (default)
- xMinYMin meet: top-left aligned, letterboxed
- xMidYMid slice: center-cropped to fill viewport
Using preserveAspectRatio='none'
`none` disables aspect ratio preservation entirely  the SVG stretches to exactly fill its width×height viewport. Use for SVG patterns or backgrounds where stretching is acceptable or intentional.
- none: fill exactly, distorts if aspect ratios differ
- Use for fluid background patterns
- Use for SVG charts where axes should fill exactly
Frequently Asked Questions
Which preserveAspectRatio value should I use for a full-bleed SVG background?
Use xMidYMid slice  it scales the SVG to cover the full container area, cropping content at the edges without letterboxing.
How do I align an SVG icon to the top-left of its container?
Set preserveAspectRatio='xMinYMin meet' on the SVG. This positions the viewBox at the top-left of the viewport and scales to fit without cropping.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG