Set SVG viewBox
Rewrite an SVG's viewBox: set it outright, crop to a rectangle, pad it with margin, or fit it tightly to the drawn pixels, and optionally set the width and height attributes to match.
Set SVG viewBox rewrites the viewBox in one of four modes. Set and crop take explicit x, y, width and height; pad grows the current box by a margin on every side. Fit renders the drawing at 8x scale and tightens the box around the pixels drawn there. OutputWidth and outputHeight can rewrite the width and height tags too.
Questions
What do set and crop modes do?
Both take explicit x, y, width and height values and write them straight into the viewBox as the new one; set and crop behave identically here, the two names exist for the two different ways someone might think about the same operation.
What does pad do?
It grows the current viewBox outward by the pad amount on all four sides, in the SVGs own user units, keeping the drawing centred inside the larger box.
What does fit do?
It renders the SVG at 8x scale, finds the bounding box of every non-transparent pixel in that render, and maps that box back into the SVGs own user units using the current viewBox, so the new viewBox tightly wraps whatever is drawn.
What happens if there is no current viewBox to pad or fit from?
It refuses, telling you to use mode set with explicit numbers instead, since pad and fit both need an existing viewBox or numeric width and height to measure from.
Can it also update the width and height attributes?
Yes, outputWidth and outputHeight optionally stamp new values onto those attributes in the same pass; leaving them blank leaves whatever width and height the file already had untouched.
Compare
| Tool | Runs on the CLI | Live as you type |
|---|---|---|
| Set SVG viewBox | Yes | Yes |
| Recolor SVG | Yes | Yes |
| Convert SVG text to paths | Yes | No |
| Inspect an SVG path | Yes | Yes |
| Validate SVG | Yes | Yes |