How to Control SVG Sizing with CSS aspect-ratio
Pair the SVG viewBox with CSS aspect-ratio to keep graphics proportional and shift-free.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
viewBox Plus aspect-ratio
An SVG's viewBox sets its intrinsic ratio, but you can reinforce sizing with CSS aspect-ratio to reserve space and avoid Cumulative Layout Shift while the page loads.
- viewBox defines the SVG's intrinsic proportions
- CSS aspect-ratio reserves space to prevent CLS
- Set width: 100% and let ratio drive height
Avoiding Layout Shift
Give responsive SVGs a width and matching aspect-ratio so the browser reserves the correct box before render. Convert raster art to SVG so it scales fluidly within that box.
- Match aspect-ratio to the viewBox proportions
- Convert raster art to SVG for fluid scaling
- Improves Core Web Vitals by reducing CLS
Frequently Asked Questions
Does an SVG need CSS aspect-ratio if it has a viewBox?
The viewBox usually sets the ratio, but adding CSS aspect-ratio makes sizing explicit and helps reserve space to prevent layout shift in some layouts.
How does this help Core Web Vitals?
Reserving the correct box before the SVG loads prevents Cumulative Layout Shift, improving your CLS score.
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