How do I pad an SVG viewBox?

Set Pad (user units, the same units as the viewBox) and click Pad viewBox. The window becomes the artwork’s box plus Pad on every side. Shapes keep their coordinates.

How is Pad viewBox different from Remove SVG viewBox Whitespace?

Remove whitespace tightens the window onto the artwork (inset 0). Pad leaves Pad user units of empty margin around that same box.

Does padding crop to the bounding box first?

It measures the art so the four margins equal Pad. Shapes are not clipped or moved. Crop SVG is the tool for cutting the frame by hand; Change viewBox if you need to type the four numbers.

What units is the Pad value in?

ViewBox user units, not CSS pixels. On a 24×24 icon, Pad 2 is a typical inset. The preview may look slightly smaller because the camera pulled back — clicking again with the same Pad does nothing.

Pad SVG viewBox — Free Tool

FAQ

Quick answers

How do I pad an SVG viewBox?: Set Pad (user units, the same units as the viewBox) and click Pad viewBox. The window becomes the artwork’s box plus Pad on every side. Shapes keep their coordinates.
How is Pad viewBox different from Remove SVG viewBox Whitespace?: Remove whitespace tightens the window onto the artwork (inset 0). Pad leaves Pad user units of empty margin around that same box.
Does padding crop to the bounding box first?: It measures the art so the four margins equal Pad. Shapes are not clipped or moved. Crop SVG is the tool for cutting the frame by hand; Change viewBox if you need to type the four numbers.
What units is the Pad value in?: ViewBox user units, not CSS pixels. On a 24×24 icon, Pad 2 is a typical inset. The preview may look slightly smaller because the camera pulled back — clicking again with the same Pad does nothing.

Remove viewBox whitespace → Crop SVG → Change viewBox → Calculate viewBox →

Privacy Terms

Source

Pad

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Pad SVG viewBox

Live preview