devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

SVG ViewBox & Path Scaler

Normalize 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.

Atualizado em
Scaled SVG




Before
After

    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: 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.
Também pesquisado como: svg viewbox, scale svg path, resize svg coordinates, normalize icons, svg 24x24, path transform.
Ferramentas que combinam com: 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.
  • Gerador de favicons — Crie um pacote completo de favicons a partir de um logotipo, uma letra ou um emoji: um arquivo favicon.ico com vários tamanhos, o ícone de toque da Apple, ícones para Android/PWA, um webclip do Webflow, o manifesto da web e as tags HTML para colar.
  • CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Perguntas frequentes
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 normalizing, 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.
Posso instalar o SVG ViewBox Scaler como um aplicativo da web e usá-lo offline?
Sim. O SVG ViewBox Scaler é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localSVG to WebflowPaste an SVG from Figma and copy it to Webflow as real Custom Elements — every <svg>, <path> and <g>…localSVG to JSX ConverterPaste an SVG from Figma, Illustrator or an icon set and get a ready-to-use React (JSX or TSX) component —…localSVG to CSS ConverterPaste an SVG and get a compact, URL-encoded data URI plus ready-made background-image and recolorable…localAspect Ratio CalculatorResize images and videos without distortion: fill in a ratio and one side to get the other, or enter a…localGerador de faviconsCrie um pacote completo de favicons a partir de um logotipo, uma letra ou um emoji: um arquivo favicon.ico…localCSS Animation GeneratorDesign CSS animations on a real keyframe timeline. Start from 50+ presets, scrub through every frame,…