SVG stretching in CSS happens when an SVG icon, logo, illustration, or chart is forced into a CSS box that does not match its internal viewBox ratio.
CSS SVG fixWhy does my SVG stretch or squash in CSS?
SVG stretching in CSS usually happens when the SVG is treated like a normal rectangle, but its internal drawing, viewBox, width, height, or preserveAspectRatio behavior is not allowed to keep the intended shape. The element may fit the layout, but the artwork inside can become too tall, too wide, squeezed, flattened, or distorted.
This is different from a normal image being cropped. A JPG can be covered, cropped, or contained. An SVG has its own coordinate system. If that coordinate system is missing, or CSS forces a conflicting ratio, the visible result can look broken even when the browser is doing exactly what your CSS asked for.
Quick diagnosis
If an SVG looks stretched, inspect the SVG markup and the CSS sizing rule together. The bug is rarely just one line. It is usually a mismatch between the SVG’s internal ratio and the box CSS is trying to create.
The viewBox is missing
Without a viewBox, the SVG may not scale from a reliable internal coordinate system.
CSS forces a new ratio
Setting both width and height can reshape the SVG box in a way the drawing was not designed for.
preserveAspectRatio is risky
Using none can intentionally distort the artwork instead of fitting it naturally.
Icons need fixed rules
Small inline SVGs can stretch inside buttons, flex rows, grid cells, or line-height changes.
Logos need a shell
A brand mark should not be forced into whatever shape the header happens to create.
The fix is ratio ownership
Let the SVG own its ratio or give it a wrapper that protects the intended shape.
Test the SVG box before blaming the whole layout
Select the SVG in DevTools and compare three things: the rendered box size, the SVG viewBox, and the CSS width and height. If the rendered box has a different proportion from the artwork, the browser is obeying your CSS while the drawing is being forced into the wrong shape.
Related: Try this in the FrontFixer Live Inspector.
Open Live Inspector →What the bug looks like
A logo becomes flat, an icon turns tall, or an illustration looks squeezed.
Why it happens
The SVG’s internal ratio and the CSS box ratio are fighting each other.
What usually fixes it
Add a useful viewBox, protect the ratio, and avoid forcing both dimensions blindly.
The SVG is missing a useful viewBox
The viewBox tells the browser how the SVG drawing should scale. Without it, the SVG may have width and height attributes, but it does not have a flexible internal map. That makes responsive resizing unpredictable, especially when CSS tries to scale the SVG inside a card, button, header, or logo slot.
Broken code
No internal mapBroken visual result
flattened into slot
Correct code
viewBox controls scaleFixed visual result
scales from viewBox
preserveAspectRatio is set to none
preserveAspectRatio="none" tells the browser that distortion is allowed. That can be useful for abstract backgrounds, but it is dangerous for icons, maps, badges, logos, charts, and UI illustrations. The SVG fills the box, but it fills the box by stretching the drawing.
Broken code
Distortion allowedBroken visual result
symbol
looks normal
Correct code
Ratio protectedFixed visual result
circle
change
The icon is stretched by its flex or grid parent
Small inline SVGs often break inside buttons and navigation rows. A parent might stretch children, a grid cell might fill available height, or a utility class might set width:100% and height:100%. The icon then stops behaving like an icon and starts behaving like a layout block.
Broken code
Icon fills parentBroken visual result
Correct code
Icon owns sizeFixed visual result
The logo is forced into a header shape
Logos are where SVG stretching is most visible. A header may give the logo slot a fixed width and height, then force the SVG to fill that slot. The layout may look aligned, but the brand mark becomes wider, shorter, or taller than it should be. A logo needs a maximum size and a protected ratio, not blind stretching.
Broken code
Header controls logoBroken visual result
crushes logo height
Correct code
Logo shell protects ratioFixed visual result
without distortion
Fast practical rule
Do not fix SVG stretching by guessing larger widths or smaller heights. First give the SVG a correct viewBox. Then let one layer own the ratio. For icons, use fixed token sizes. For logos, use width plus height auto. For decorative SVGs, use a wrapper with an intentional aspect ratio.
Meaningful SVG
Logos, icons, charts, maps, and UI illustrations should keep their geometry.
Decorative SVG
Abstract waves, blobs, separators, and masks can stretch only when distortion is intentional.
Best first move
Add or verify the viewBox, then remove forced height and test again.
Most sneaky cause
A parent button, flex row, or grid cell stretches the SVG without touching the SVG markup.
Debug checklist
- Check whether the SVG has a real
viewBox. - Look for CSS that sets both
widthandheight. - Remove
preserveAspectRatio="none"unless distortion is intentional. - Set icon SVGs with
inline-size,block-size, andflex:0 0 auto.
- Use
height:autofor responsive logos and illustrations that should keep their ratio. - Give decorative SVGs a wrapper when the layout needs a specific art box.
- Test inside real buttons, headers, cards, and mobile rows.
- Compare the rendered box ratio with the SVG artwork ratio.
How to choose between meet, slice, and none
For most meaningful SVGs, meet is the safest behavior because the whole drawing stays visible. It may leave extra space in the box, but the artwork keeps its shape. slice is useful when the SVG should cover the box like a hero illustration, but it can crop edges. none should be rare because it allows the drawing to stretch differently on each axis.
The clean production habit is simple: use meet for icons, logos, diagrams, and UI symbols; use slice only for decorative artwork that can be cropped; use none only when distortion is the design. That decision alone prevents many SVG bugs from turning into mysterious CSS layout problems.
Cannibalization check
This fix targets SVG-specific distortion: viewBox, preserveAspectRatio, icon token sizing, and logo ratio shells. The regular image stretching fix is for bitmap images. The aspect-ratio fix is for wrapper shape problems. This page is focused on SVG artwork being squeezed or stretched inside a CSS box.
Related fixes that can help
SVG stretching bugs often connect to image sizing, aspect-ratio behavior, mobile overflow, and responsive layout decisions.
Final takeaway
SVG stretching in CSS happens when the SVG’s internal drawing system and the CSS layout box disagree. The browser is not confused. It is following the size rules you gave it. The visual breaks because the artwork needs a protected ratio, a useful viewBox, or a smaller dedicated icon rule.
Fix the ownership: let the SVG drawing keep its coordinate system, let the wrapper control layout when needed, and avoid forcing meaningful SVG artwork into random box shapes. That turns a stretched icon or squashed logo into a clean responsive asset.