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.
Please check the SVG markup and try again.
This SVG has no viewBox attribute. In Attributes only mode only width and height are updated — some browsers may crop rather than scale the graphic. Switch to Scale viewBox mode to generate a viewBox from the original dimensions.
Original vs resized SVG preview
Paste SVG markup or try the sample to preview the source.
Resize SVG to preview the result.
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.
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.