SVG Resize / Scale Tool (Client-Side)
This tool updates an SVG’s rendered size and, when you choose, its internal coordinate system. Use it to set exact width/height, scale by a percentage, and control viewBox plus preserveAspectRatio so the output behaves predictably across browsers, design apps, and responsive layouts. Processing happens entirely in your browser, so the SVG never needs to leave your device.
Resize an SVG by changing width/height, scaling by percentage, and optionally updating viewBox and preserveAspectRatio. This runs fully client-side.
This is not a cleaner or minifier. Use it when the problem is displayed size, coordinate space, responsive behavior, or how the SVG fits into a layout.
What this tool actually changes
SVG sizing is split into two layers: the viewport (rendered size) and the viewBox (internal coordinate space). Many resizing problems happen when one changes while the other stays the same, or when size metadata is missing.
Editing width and height changes the viewport. Editing viewBox changes how internal units map to the viewport, which can affect scaling and fitting if the drawing does not match the viewBox bounds.
This tool detects the best sizing reference (explicit width/height first, then viewBox), applies your rules, and outputs a clean SVG you can download.
When to use the resizer instead of other SVG tools
Choose the resize and scale editor when your SVG already looks correct but displays at the wrong size, crops unexpectedly, or needs predictable width, height, and viewBox values. Choose the SVG cleaner for metadata, comments, scripts, or editor junk. Choose the SVG minifier when the markup is already good and file size is the main problem.
Figma import sizing for components, icons, and handoff
Figma assets are easier to place when width, height, and viewBox values are predictable. Use this resizer before importing icons, logos, UI artwork, or component assets that appear too large, too small, or cropped.
Use this route for Figma import and sizing review. Use the cleaner first if the SVG has editor markup or unsafe content.
Figma SVG sizing workflow
SVG resizer for Figma imports, components, and viewBox review
Use this page when an SVG needs predictable width, height, and viewBox values before Figma import, component work, icon sizing, or design handoff. It helps with placement and scale review, but it does not guarantee editable layers.
Best for
- Figma import checks for icons, logos, UI artwork, and design-system components.
- Component assets that need consistent dimensions before handoff.
- SVGs that display at the wrong size because width, height, or viewBox metadata is missing.
Settings to try
- Set exact width and height for the component, icon, or frame target.
- Use viewBox match output only when you want the coordinate space to match the new size.
- Keep aspect ratio locked unless the design intentionally needs a stretched asset.
Useful limits
- Resizing does not guarantee Figma layer editability or fix masks, filters, or font differences.
- A viewBox change can alter how artwork fits inside the SVG canvas.
- Inspect the imported result in Figma before using it in a component library.
Related tools
Need help choosing?
Read the concise workflow, preset, settings, and troubleshooting docs without adding clutter to the converter.
