Why does my SVG stretch inside a flexbox row?

Flex default align-items:stretch can squash a replaced SVG. This pass sets meet and flex-shrink:0 so the graphic keeps its aspect.

Is this the same as fix SVG gradient stretch in flexbox?

No. Gradient stretch is gradientUnits=objectBoundingBox. This page fixes the SVG box itself stretching as a flex item.

Use Scale With Container if you want 100%/auto fluid width. This page prioritizes not being stretched by the flex line.

No. Only preserveAspectRatio and root CSS. Geometry stays.

FAQ

Quick answers

Why does my SVG stretch inside a flexbox row?: Flex default align-items:stretch can squash a replaced SVG. This pass sets meet and flex-shrink:0 so the graphic keeps its aspect.
Is this the same as fix SVG gradient stretch in flexbox?: No. Gradient stretch is gradientUnits=objectBoundingBox. This page fixes the SVG box itself stretching as a flex item.
Do I still need width 100% after the flexbox stretch fix?: Use Scale With Container if you want 100%/auto fluid width. This page prioritizes not being stretched by the flex line.
Will path data change when I fix flexbox stretching?: No. Only preserveAspectRatio and root CSS. Geometry stays.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B