SVG preserveAspectRatio Reference
This attribute controls exactly how an SVG's viewBox content fits into its actual rendered dimensions — essential for predictable scaling.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Alignment and Scaling Modes
`preserveAspectRatio="xMidYMid meet"` (the default) centers content and scales it to fit entirely within the viewport without cropping — `xMinYMin`, `xMaxYMax`, and other alignment keywords control positioning when there's leftover space, while `slice` (instead of `meet`) scales to fill the viewport completely, cropping any overflow.
- xMidYMid meet (default) centers and fits content without cropping
- Alignment keywords (xMin/xMax, YMin/YMax) control positioning of extra space
- slice fills the viewport completely, cropping overflow instead of fitting
Practical Use Cases
Use `meet` (the default behavior) for icons and logos that must display in full regardless of container proportions, and `slice` for background-style SVG images meant to fill a container completely like CSS `background-size: cover` — setting `preserveAspectRatio="none"` disables aspect ratio preservation entirely, stretching content to fill exactly.
- meet suits icons/logos that must always display in full
- slice suits cover-style background images filling a container completely
- none stretches content to exactly fill the viewport, ignoring proportions
Frequently Asked Questions
Why is part of my SVG background image getting cut off?
You're likely using slice alignment (or it's the effective default in your context), which crops overflow to fill the container completely — switch to meet if you need the full image visible without cropping.
Does preserveAspectRatio apply to <img>-embedded SVGs?
Yes — the attribute set within the SVG file itself controls this scaling behavior regardless of whether the SVG is embedded inline, via <img>, or as a CSS background-image.
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