About Compare All Tools

SVG ViewBox Editor

Adjust your SVG viewport visually with instant live preview.

SVG canvas management

Manage the SVG canvas — pad, normalize, center and reframe.

Adjust the viewBox, add custom padding per side, normalize the coordinate origin, make a square canvas, center artwork, and remove fixed dimensions for responsive output. Everything runs locally — no upload, no rasterisation, no path rewriting.

Canvas manager Padding control Origin normalize Responsive SVG
Drop an SVG file here or paste SVG markup into the input editor below.
New viewBox—
Canvas size—
Padding—
Origin—
Responsive mode—
Output size—
Preview

Original vs updated SVG preview

Original SVG No SVG

Paste SVG markup or try the sample to preview the source.

Updated SVG Waiting

Apply Canvas to preview the result.

Processed locally viewBox: — Origin: — Scripts: — Events: — External assets: — Output: —
Input

SVG markup

Paste a complete SVG document or inline element. ViewBox values are pre-filled from the source on load.

Output

Updated SVG

The updated SVG markup appears here after applying the canvas settings. Copy or download using the buttons above.

How It Works

SVG ViewBox Editor edits the root SVG viewBox attribute, which defines the visible coordinate space — four numbers: Min X, Min Y, Width and Height. Unlike SVG Crop, which strictly trims the canvas inward, SVG ViewBox Editor lets you do the full range of canvas operations: expand the canvas by adding padding per side, normalize the coordinate origin so all artwork starts at 0,0, make the canvas perfectly square, center the viewport within the source artwork, and remove fixed width and height attributes to make the SVG responsive. The Normalize Origin feature wraps existing content in a translate() transform and sets Min X and Min Y to zero — preserving every visual detail while cleaning up negative or offset coordinate spaces. All operations run locally in your browser using DOMParser and XMLSerializer. Nothing is uploaded and the output is always editable SVG markup. Path coordinates are never rewritten.

Use Cases

  • Adding breathing room around a tightly exported SVG logo by setting per-side padding values before embedding it in a design system
  • Normalizing the coordinate origin of an SVG exported from Figma or Sketch with a non-zero viewBox start point, so downstream tooling treats 0,0 as the canvas origin
  • Making a rectangular illustration square for use as an app icon or favicon, expanding the shorter side symmetrically with Make Square
  • Converting a fixed-size SVG diagram to a fully responsive layout by removing the width and height attributes while preserving the viewBox
  • Centering an off-axis viewport back over the source artwork after manually editing viewBox values in the Min X, Min Y, Width, Height fields

FAQ

What is the difference between SVG ViewBox Editor and SVG Crop?

SVG Crop is a visible-area selection tool: it constrains the new viewBox to be inside the source viewBox, effectively trimming the canvas. SVG ViewBox Editor is a full canvas management tool: it imposes no boundaries, lets you expand the canvas with padding, normalize the coordinate origin, make it square, center the artwork, and make the output responsive. Use Crop when you want to trim inward; use SVG ViewBox Editor when you want broader control over the canvas.

Does SVG ViewBox Editor upload my file?

No. Every operation runs locally in your browser using DOMParser and XMLSerializer. Your SVG file is never sent to any server and all output stays on your device.

What does Normalize Origin do exactly?

If the source SVG has a non-zero Min X or Min Y — for example viewBox='-100 -50 400 300' — Normalize Origin sets the viewBox to '0 0 400 300' and wraps all renderable SVG children in a <g transform='translate(100, 50)'> element. This preserves the exact visual appearance while making the coordinate origin clean and predictable. Path coordinates are never rewritten.

What does the Canvas Padding section do?

The Top, Right, Bottom and Left fields add SVG-coordinate padding around the current viewBox. For example, adding 20 top and 20 bottom to a 500×360 SVG changes the viewBox to start 20 units higher and extend 40 units taller, resulting in a 500×400 canvas. The overlay on the original preview updates in real time as you type.

What does Make SVG Responsive do?

When checked, the output SVG has its width and height attributes removed, leaving only the viewBox. This makes the SVG scale to fill any container it is placed in — standard practice for inline SVG in HTML and CSS. The viewBox is preserved so aspect ratio and coordinate space remain correct.

What does Generate Missing ViewBox do?

Some SVGs have width and height attributes but no viewBox. SVG ViewBox Editor reads those dimensions and writes a viewBox of '0 0 width height' directly into the source markup, enabling all other canvas operations. The signal strip shows 'viewBox: generated' when this happens automatically on load.

Will shapes outside the updated viewBox still be in the output?

Yes. The viewBox is a viewport, not a delete operation. Artwork outside the visible area remains in the markup but is not rendered. If you want to reduce file size by removing hidden content, run the output through SVG Optimizer afterwards.