SVG Resize

Resize SVG to any dimension by editing width, height and viewBox. Output is editable SVG markup — no raster conversion.

Browser-based SVG editing

Resize SVG by editing width, height and viewBox.

Paste SVG code, upload a file or try the built-in sample. Set new dimensions, pick a unit and resize mode, then copy or download the updated SVG markup — no upload, no raster conversion.

Local only SVG output Aspect ratio lock viewBox aware
Drop an SVG file here or paste SVG markup into the input editor below.
Original size
New size
Aspect ratio
viewBox
Output size
Status
Preview

Original vs resized SVG preview

Original SVG No SVG

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

Resized SVG Waiting

Resize SVG to preview the result.

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

SVG markup

Use a complete SVG document or inline SVG element. Width and height are pre-filled from the source SVG when one is detected.

Output

Resized SVG

The resized SVG markup appears here after resizing. Copy or download the result using the buttons above.

How It Works

SVG Resize edits the root SVG element attributes directly in your browser. It reads the current width, height and viewBox values from the source SVG, updates them to the new dimensions you specify, and outputs the same editable SVG markup with the revised attributes. Two resize modes are available. Attributes only updates the root width and height without touching the viewBox, which is the safest choice when the SVG already has a correct viewBox. Scale viewBox updates the width and height and generates a viewBox from the original dimensions when one is missing, so browsers can scale the SVG correctly at any size. Path coordinates and internal shapes are never modified. The output is real editable SVG markup, not a raster image.

Use Cases

  • Setting an exact pixel width and height on an SVG icon before embedding it in a design system
  • Changing the declared dimensions of an SVG from pixel units to em or rem for responsive CSS layouts
  • Adding a viewBox to a legacy SVG that only has width and height attributes so it can scale correctly
  • Resizing an SVG while locking the aspect ratio to prevent distortion
  • Preparing a vector illustration at a specific square size for use as a social media avatar or app icon

FAQ

Does SVG Resize upload my file?

No. SVGTrim resizes SVG markup locally in your browser. Your SVG file is never uploaded to any server and the output remains entirely on your device.

What is the difference between Attributes only and Scale viewBox mode?

Attributes only updates only the root width and height attributes and leaves the viewBox untouched. Scale viewBox also handles the viewBox — it keeps an existing viewBox as-is and generates a new one from the original dimensions when none is present. Use Attributes only for SVGs that already have a correct viewBox. Use Scale viewBox when you need to add a viewBox so the browser can scale the SVG proportionally.

Does resizing change the SVG paths or shapes?

No. Only the root SVG element attributes are modified. Path data, shapes, gradients, and all internal elements are left exactly as they were in the original. The coordinate space defined by the viewBox is also preserved.

Why is my SVG missing a viewBox?

Some SVG exporters write only width and height attributes without a viewBox. This can cause browsers to crop or mis-scale the graphic at different sizes. Use Scale viewBox mode to generate a viewBox from the original dimensions so the SVG scales correctly.

Can I resize to non-pixel units like em or rem?

Yes. The Unit dropdown supports px, em, rem and %. The unit is applied to the output width and height attributes. The viewBox values always remain unitless numbers as required by the SVG specification.

Will the resized SVG look the same visually?

Yes, if the SVG has a viewBox. Changing only the root width and height while keeping the viewBox tells the browser to render the same shapes at the new size. If there is no viewBox and you use Attributes only mode, some browsers may crop the SVG instead of scaling it.