How to Scale SVG Proportionally
Maintain your SVG's aspect ratio when resizing by using the viewBox attribute and CSS — the correct way to scale SVG without distortion.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why Proportional Scaling Matters
Changing only width or height independently distorts the SVG. The viewBox + CSS approach scales both dimensions proportionally automatically.
- SVG default: viewBox aspect ratio is automatically maintained if only one CSS dimension is set
- CSS: svg { width: 200px; } — height scales proportionally if height: auto
- HTML: <img src='icon.svg' width='200'> — height auto-scales from intrinsic SVG ratio
- Never: svg { width: 200px; height: 300px; } on a 1:1 SVG — this forces distortion
- Intrinsic ratio: set by viewBox values, maintained when only one dimension is CSS-controlled
Setting Exact Dimensions While Preserving Ratio
To scale to an exact pixel size proportionally, set width and calculate height from the aspect ratio.
- Get SVG aspect ratio: width ÷ height from the viewBox values
- Formula: CSS height = desired width ÷ aspect ratio
- Example: 100×50 SVG scaled to 300px wide: height = 300 ÷ 2 = 150px
- CSS aspect-ratio: .icon { width: 100px; aspect-ratio: 1 / 1; } for a square icon
- Inkscape: lock the ratio lock icon when typing W or H in the toolbar
Scaling for Different Output Contexts
Different contexts need different scaling approaches.
- Web CSS: set width: 100%; height: auto; — fills container and scales proportionally
- Inkscape print: type W, click lock ratio, the H auto-calculates
- Export PNG: set W in Inkscape export, lock ratio — H scales automatically
- HTML img: add only width attribute — browser maintains intrinsic SVG ratio
- CSS container queries: @container { svg { width: 100%; } } for fluid icon scaling
Frequently Asked Questions
How do I resize an SVG to exactly 512×512 without distortion?
Only if the SVG has a square aspect ratio (viewBox with equal width and height). For non-square SVGs, resizing to 512×512 will distort — instead resize to 512×[proportional height].
What is the intrinsic size of an SVG?
The intrinsic size is defined by the width and height attributes on the <svg> element. If only viewBox is set (no width/height), the SVG has no intrinsic size and expands to fill its CSS container.
Can I change an SVG's aspect ratio?
Yes — change the viewBox dimensions in the SVG file. This redefines the coordinate space and effectively changes the aspect ratio of the SVG canvas.
How do I make an SVG icon always square?
In CSS: svg { aspect-ratio: 1 / 1; }. Or set the viewBox to a square (viewBox='0 0 100 100'). For non-square SVGs, this letterboxes the content in the square area.
Why does my SVG look stretched in some apps?
The app is not respecting the SVG's aspect ratio. Some apps (Word, PowerPoint) allow independent width/height handles — avoid dragging corner handles independently; use the locked ratio resize method.
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