How to Resize an SVG

Quick answer

Open the SVG in SVGSketch, deselect everything, and open the Geometry panel - its Document section has Width, Height, and ViewBox fields for the root <svg>. Type new values there, updating width/height and viewBox proportionally to keep the same framing. To resize a single shape, select it and type a width or height in the Geometry panel, or drag a corner handle.

Steps at a glance

Pick the resize target

Document, viewBox, or single shape.

Change document size

Deselect everything, then edit Width and Height in the Geometry panel Document section.

Update viewBox

Edit the ViewBox X/Y/W/H fields; copy the selection bounds from the Geometry panel to tighten it to content.

Resize a shape

Select with T, then type width/height in the Geometry panel or drag a corner handle.

Export

Save the SVG and re-export raster formats at the new size.

Step 1: Decide what to resize

There are three different "resize" operations in SVG: changing the document width and height (the box the SVG occupies in HTML), changing the viewBox (which controls the coordinate system), and resizing a shape inside the document. The right answer depends on what is wrong.

If the SVG looks cropped or empty, the viewBox is the problem. If the rendered size in HTML is wrong, the width/height attributes are the problem. If a shape inside the SVG is wrong, scale that shape.

Step 2: Change the document size

Deselect everything (press Esc or click empty canvas) and open the Geometry panel. Its Document section shows the root <svg> Width and Height - type new values and SVGSketch updates the attributes in place. The viewBox stays the same, so geometry inside is unchanged; keep the new width and height in the same ratio as the viewBox to avoid letterboxing.

Step 3: Update the viewBox

In the same Document section, edit the ViewBox X, ViewBox Y, ViewBox W, and ViewBox H fields. The viewBox is the coordinate window onto your geometry: shrinking it zooms in, growing it shows more empty space around the artwork.

To tighten a viewBox to the artwork, select everything (Ctrl+A), read the selection's X, Y, Width, and Height from the Geometry panel, then type those four numbers into the ViewBox fields. This is the fix when the source SVG has a viewBox that is too big or too small for its content.

Step 4: Resize a single shape

Select the shape with the Transform tool (T). Open the Geometry panel and type a new width or height for exact values, or drag a corner handle on canvas. For a clean multiple, typing the exact number in the Geometry panel is the precise path and avoids drift from hand-dragging.

Step 5: Export at the new size

Save the SVG. If you also want a raster export at the new size, open the Export panel - the scale presets are multiples of the document dimensions, so 1x-4x pick up the new size automatically.

FAQ

Will resizing make the SVG blurry?

No. SVG is vector, so geometry stays sharp at any size. Only the rasterized export (PNG/JPG/WebP) is resolution-sensitive.

What is the difference between width/height and viewBox?

width/height set the rendered size in HTML. viewBox sets the coordinate window. Resize one without the other and you scale or crop; resize both proportionally to keep the same look at a different size.

Why does my SVG look cropped after resize?

You probably resized the document but not the viewBox. Select all (Ctrl+A), read the content bounds from the Geometry panel, and type them into the ViewBox X/Y/W/H fields in the Document section.

Can I resize without changing the viewBox?

Yes. Change document width/height only. The geometry stays the same shape; only the on-page render size changes.

How do I make an SVG fluid in HTML?

Set the SVG to width="100%" and rely on the viewBox plus preserveAspectRatio for sizing. See "How to make SVG responsive" for the full pattern.