How to Use object-fit with SVG Images

Control SVG scaling and cropping with CSS object-fit and the preserveAspectRatio attribute.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

object-fit vs preserveAspectRatio

For an SVG in an <img>, CSS object-fit (contain, cover, fill) controls scaling like any image. For inline SVG, the preserveAspectRatio attribute on the root element does the equivalent job within the viewBox.

Use object-fit on <img> elements loading SVGs
Use preserveAspectRatio for inline SVG scaling
cover crops to fill; contain fits without cropping

Choosing the Right Approach

If you need CSS-controlled cropping, load the SVG as an img and use object-fit. If you need internal control, keep it inline and tune preserveAspectRatio. Convert raster art to SVG so either approach stays crisp.

Img + object-fit for CSS-controlled cropping
Inline + preserveAspectRatio for internal control
Convert raster art to SVG for crisp scaling

Frequently Asked Questions

Does object-fit work on inline SVG?

object-fit applies to replaced elements like img; for inline SVG, use the preserveAspectRatio attribute to achieve similar contain/cover behavior.

How do I crop an SVG like background cover?

Load the SVG in an img and set object-fit: cover, or for inline SVG set preserveAspectRatio='xMidYMid slice'.

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