Cómo usar: SVG ViewBox Scaler
- Paste an SVG that has a
viewBox(or width and height). - Enter the new viewBox size — e.g. 24 × 24 to match an icon set.
- Choose precision and whether stroke widths should scale too.
- 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,randpoints.- Optionally
stroke-widthandfont-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.
También se busca como: svg viewbox, scale svg path, resize svg coordinates, normalize icons, svg 24x24, path transform.
Herramientas que combinan con: SVG ViewBox Scaler
- SVG to CSS Converter — Paste an SVG and get a compact, URL-encoded data URI plus ready-made background-image and recolorable 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.
- Generador de favicons — Crea un paquete completo de favicones a partir de un logotipo, una letra o un emoji: un archivo favicon.ico con varios tamaños, un icono táctil de Apple, iconos para Android y PWA, un webclip de Webflow, el manifiesto web y las etiquetas HTML para pegar.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Preguntas frecuentes
How do I change an SVG from 512×512 to 24×24?
Will my icon look different?
Why keep stroke-width unscaled?
What about transforms?
transform attributes are left as they are, and you’ll see a warning. Flatten them in your design tool for fully clean output.