devpack
Site Audit

SVG ViewBox & Path Scaler

Normalise icons to a new viewBox (e.g. 24×24) by rescaling the actual coordinates inside every path, circle, rect and polygon — no transform="scale()" hacks.

Runs in your browser
Scaled SVG




Before
After

    
 Your data never leaves your computer. All processing happens 100% locally in your browser.

    
    
    

      
How to use the SVG ViewBox Scaler
  1. Paste an SVG that has a viewBox (or width and height).
  2. Enter the new viewBox size — e.g. 24 × 24 to match an icon set.
  3. Choose precision and whether stroke widths should scale too.
  4. Copy the result; both previews should look identical, only the numbers change.


Why rescale coordinates instead of using transform?


Icon sets work best when every icon shares the same viewBox (24×24, 20×20, 16×16…), so they align and stroke widths look consistent. Wrapping an icon in <g transform="scale(0.5)"> works visually, but it leaves odd numbers in the source, scales strokes unpredictably and breaks tools that read path data. Rescaling the coordinates produces clean SVG that behaves like it was drawn at the new size.


What gets scaled


    

  • Path data (d) — all commands, absolute and relative: M, L, H, V, C, S, Q, T and A. For arcs, radii scale while the rotation and flags are preserved.
    • 

  • x, y, cx, cy, x1…y2, width, height, rx, ry, r and points.
    • 

  • Optionally stroke-width and font-size.
    • 

  • A viewBox that doesn’t start at 0 0 is shifted to 0 0.
    • 



Limitations


Elements with their own transform attribute keep it unchanged, and percentages or CSS-based sizes aren’t converted — flatten transforms in Figma/Illustrator (or SVGO’s convertTransform) first for exact results. Non-uniform scaling (different X and Y factors) approximates circle radii with the average factor.


Next steps: clean and paste the icon into Webflow with SVG to Webflow, or convert it for React with SVG to JSX.
Tools that pair well with the SVG ViewBox Scaler
  • SVG to CSS Converter — Paste an SVG and get a compact, URL-encoded data URI plus ready-made background-image and recolourable mask-image CSS.
  • Aspect Ratio Calculator — Resize images and videos without distortion: fill in a ratio and one side to get the other, or enter a size to find its ratio — with ready-to-paste CSS.
  • Favicon Generator — Make a complete favicon package from a logo, a letter or an emoji: a multi-size favicon.ico, Apple touch icon, Android/PWA icons, a Webflow webclip, the web manifest and the HTML tags to paste.
  • CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
Frequently asked questions
How do I change an SVG from 512×512 to 24×24?
Paste it, enter 24 and 24 as the new viewBox size and copy the result. All coordinates are multiplied by 24/512.
Will my icon look different?
No — the shape is identical, just expressed in a different coordinate system. Stroke widths scale proportionally unless you turn that off.
Why keep stroke-width unscaled?
If you want consistent 1.5 or 2px strokes across an icon set after normalising, untick “Scale stroke-width” and set the stroke width yourself.
What about transforms?
Existing transform attributes are left as they are, and you’ll see a warning. Flatten them in your design tool for fully clean output.

      
    

    
Related tools
SVG to WebflowPaste an SVG from Figma and copy it to Webflow as real Custom Elements — every <svg>, <path> and <g>…SVG to JSX ConverterPaste an SVG from Figma, Illustrator or an icon set and get a ready-to-use React (JSX or TSX) component —…SVG to CSS ConverterPaste an SVG and get a compact, URL-encoded data URI plus ready-made background-image and recolourable…Aspect Ratio CalculatorResize images and videos without distortion: fill in a ratio and one side to get the other, or enter a…Favicon GeneratorMake a complete favicon package from a logo, a letter or an emoji: a multi-size favicon.ico, Apple touch…CSS Gradient GeneratorDesign a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy…