LocalToolsOffline browser tools collection

Category: Developer tools

SVG viewBox Editor

System ideaMissing a tool?

Read and rewrite an SVG's viewBox by hand

Paste SVG markup, load its current viewBox (or its width and height if it has none), then adjust the min-x, min-y, width and height to crop, pad or re-anchor the artwork, and copy the rewritten SVG.

SVG preview
Output
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <rect width="120" height="120" rx="16" fill="#0f766e" />
  <circle cx="60" cy="60" r="34" fill="#f4d35e" />
</svg>

Nothing is uploaded. The markup is parsed and rewritten in this page only.

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

The viewBox attribute is what maps an SVG's internal coordinate system onto the space it renders in, so changing it is how you crop into part of an icon, add padding around one, or shift its origin without touching a single path. Hand-editing four numbers in a text editor is fiddly and easy to get wrong; this tool parses the SVG you paste, prefills the four viewBox fields from what it finds, and rewrites the markup live as you change them, with a preview so you can see the crop before copying.

How to use it

  1. Paste SVG markup that includes an <svg> tag.
  2. Click "Load current viewBox" to prefill the four fields, or type your own min-x, min-y, width and height.
  3. Check the preview, then copy the rewritten SVG markup.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Does this upload my SVG anywhere?
No. The markup is parsed and rewritten with plain string matching in your browser tab; nothing is sent to a server.
What happens to the width and height attributes?
They are left exactly as they are. Changing the viewBox rescales what is drawn inside the existing viewport, the same way a browser applies it, rather than resizing the element itself.
Why does the preview sometimes look empty?
A width or height of zero, or a viewBox that does not overlap the artwork, crops it down to nothing. Widen the box or check the min-x/min-y values.

Back to all tools