How do I fix an SVG gradient that stretches in Flexbox?

Paste the SVG and click Fix gradient stretch. preserveAspectRatio and gradient framing update so the fill no longer distorts in a flex item.

Why do gradients stretch inside flex containers?

Flex sizing can change the SVG viewport while gradientUnits stay objectBoundingBox, so paints scale unevenly with the box.

Open Fix SVG Gradient Stretch in CSS Grid for grid-specific framing.

Yes. Everything runs in your browser — free, no upload.

FAQ

Quick answers

How do I fix an SVG gradient that stretches in Flexbox?: Paste the SVG and click Fix gradient stretch. preserveAspectRatio and gradient framing update so the fill no longer distorts in a flex item.
Why do gradients stretch inside flex containers?: Flex sizing can change the SVG viewport while gradientUnits stay objectBoundingBox, so paints scale unevenly with the box.
Need the same fix for CSS Grid instead of Flexbox?: Open Fix SVG Gradient Stretch in CSS Grid for grid-specific framing.
Is fixing Flexbox gradient stretch free without uploading?: Yes. Everything runs in your browser — free, no upload.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B