How do I fix objectBoundingBox gradient stretch in SVG?

Paste markup and click Fix objectBoundingBox to rebalance gradientUnits and aspect framing.

Why does objectBoundingBox warp linear gradients?

It maps the gradient to the element's bounding box, so non-square boxes stretch the paint.

Try Stop SVG Linear Gradient From Stretching in Grid.

FAQ

Quick answers

How do I fix objectBoundingBox gradient stretch in SVG?: Paste markup and click Fix objectBoundingBox to rebalance gradientUnits and aspect framing.
Why does objectBoundingBox warp linear gradients?: It maps the gradient to the element's bounding box, so non-square boxes stretch the paint.
Need a Grid-specific linear-gradient stretch stop?: Try Stop SVG Linear Gradient From Stretching in Grid.
Is the objectBoundingBox fix free in the browser?: Yes — free, no upload.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B