Resize SVG & fix viewBox

How it works

The tool edits the root <svg> element only — width, height, viewBox and preserveAspectRatio — and never touches the drawing inside. The lock keeps width and height proportional to the file's intrinsic ratio while you type. Two buttons rebuild a missing or wrong viewBox: one from the typed dimensions (0 0 w h), one from the real bounding box of the content, measured with the browser's own getBBox().

When to use it

An icon that refuses to scale: fixed dimensions and no viewBox is the usual cause, and the fix is derive-from-dimensions, then remove width and height so the icon sizes in CSS. A drawing that renders off-centre or clipped after editing, where the viewBox no longer matches where the content actually sits: derive from content. And setting an exact box before a PNG export at a known output size. Which attribute wins in which situation is the subject of the viewBox guide.

Common problems

• The derived box clips strokes. getBBox() measures geometry, not paint — a stroke overhangs its path by half its width on every side, and shadows and markers are not counted at all. Pad the numbers after deriving.
• Setting width and height changes nothing on the page. CSS wins over attributes. The attributes only provide the default size for contexts with no stylesheet.
• Deriving from dimensions produced an empty view. The content is not drawn at the origin, so 0 0 w h frames the wrong region. Derive from content instead — it starts from where the drawing actually is.
• The drawing is distorted after applying. With the lock off, the width/height ratio no longer matches the viewBox ratio, and preserveAspectRatio decides how the mismatch resolves. Either relock, or set it deliberately.