Why is my SVG getting cropped?

The viewBox is smaller than the drawn content, so anything outside that window is clipped in the preview and many exporters.

How do I fix SVG viewBox cropping?

Paste the clipped SVG and click Fix cropping. The viewBox expands to cover the full measured artwork with a small pad.

Sometimes. If viewBox already fits the art, check parent overflow or fixed width/height. This tool fixes viewBox-driven clipping.

No. It only changes the visible window. Shape coordinates stay the same; more of the art becomes visible.

FAQ

Quick answers

Why is my SVG getting cropped?: The viewBox is smaller than the drawn content, so anything outside that window is clipped in the preview and many exporters.
How do I fix SVG viewBox cropping?: Paste the clipped SVG and click Fix cropping. The viewBox expands to cover the full measured artwork with a small pad.
Is cropping caused by CSS overflow instead?: Sometimes. If viewBox already fits the art, check parent overflow or fixed width/height. This tool fixes viewBox-driven clipping.
Will expanding viewBox distort the icon?: No. It only changes the visible window. Shape coordinates stay the same; more of the art becomes visible.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B