Resize SVG

Display size vs the viewBox

An SVG has a display size (width/height) and its own coordinate system (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

This SVG is 200 x 200 pixels on screen, while its internal coordinates run 0 to 100. The circle at r="40" fills about 80% of the viewBox, so it renders roughly 160 px wide. This tool changes only the width and height, the declared display size. It does not touch the viewBox or the coordinates, which is exactly why the drawing keeps its proportions and stays sharp: you are telling the browser to draw the same picture at a different size, not redrawing it.

Why an SVG can look the same after you change the size

If the SVG is placed with something like <img src="icon.svg" width="500"> or sized by CSS, the surrounding page controls the display size and overrides the width/height in the file. In that case, change the size where the SVG is used (the <img>, the CSS, or the container), not only inside the markup.

Strokes and text stay crisp

Because nothing is rasterized, text stays as real vector text and lines stay smooth at any size. Stroke widths are defined in the coordinate system, so they scale together with the drawing. If you want a stroke to keep the same visual thickness regardless of size, add vector-effect="non-scaling-stroke" to that element in your source before resizing.

Keep the markup clean

SVGs exported from Figma, Illustrator or Sketch often carry extra weight: editor namespaces (sodipodi:, inkscape:), hidden metadata and unused <defs>. This tool leaves your markup as it is apart from the size. To strip the junk, run the file through an optimiser such as SVGO before or after resizing.