devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Escalador de ViewBox e Path de SVG

Normalize ícones para um novo viewBox (por exemplo, 24×24) reescalando as coordenadas reais dentro de cada path, circle, rect e polygon, sem gambiarras com transform="scale()".

Atualizado em
SVG escalado




Antes
Depois

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

    
    
    

      
Como usar: Escalar SVG ViewBox
  1. Cole um SVG que tenha um viewBox (ou largura e altura).
  2. Informe o novo tamanho do viewBox, por exemplo 24 × 24 para combinar com o seu conjunto de ícones.
  3. Escolha a precisão decimal e se a espessura do traço também deve ser escalada.
  4. Copie o resultado. As duas prévias devem ficar idênticas, mudando apenas os números.


Por que reescalar as coordenadas em vez de usar transform?


Conjuntos de ícones funcionam melhor quando todos os ícones compartilham o mesmo viewBox (24×24, 20×20, 16×16…), assim eles ficam alinhados e a espessura dos traços fica consistente. Envolver um ícone em <g transform="scale(0.5)"> funciona visualmente, mas deixa números estranhos no código-fonte, escala os traços de forma imprevisível e quebra ferramentas que leem os dados do path. Reescalar as coordenadas gera um SVG limpo, que se comporta como se tivesse sido desenhado no novo tamanho.


O que é escalado


    

  • Dados do path (d): todos os comandos, absolutos e relativos: M, L, H, V, C, S, Q, T e A. Nos arcos, os raios são escalados enquanto a rotação e as flags são preservadas.
    • 

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

  • Opcionalmente, stroke-width e font-size.
    • 

  • Um viewBox que não começa em 0 0 é deslocado para 0 0.
    • 



Limitações


Elementos com o próprio atributo transform mantêm esse valor sem alteração, e porcentagens ou tamanhos baseados em CSS não são convertidos. Para resultados exatos, aplique os transforms no Figma/Illustrator (ou use o convertTransform do SVGO) antes. Escala não uniforme (fatores diferentes para X e Y) aproxima os raios dos círculos usando o fator médio.


Próximos passos: limpe e cole o ícone no Webflow com o SVG para Webflow, ou converta-o para React com o SVG para JSX.
Também pesquisado como: svg viewbox, escalar path svg, redimensionar coordenadas svg, normalizar ícones, svg 24x24, path transform, mudar tamanho svg, escalar svg online.
Ferramentas que combinam com: Escalar SVG ViewBox
  • SVG para CSS — Cole um SVG e receba uma data URI compacta, codificada em URL, além de regras background-image e mask-image prontas para uso, com cor ajustável.
  • Calculadora de Proporção — Redimensione imagens e vídeos sem distorcer: informe uma proporção e um lado para obter o outro, ou digite um tamanho para descobrir sua proporção — com CSS pronto para colar.
  • 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.
  • Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
Perguntas frequentes
Como mudar um SVG de 512×512 para 24×24?
Cole o SVG, informe 24 e 24 como o novo tamanho do viewBox e copie o resultado. Todas as coordenadas são multiplicadas por 24/512.
Meu ícone vai ficar diferente?
Não. A forma é idêntica, apenas expressa em outro sistema de coordenadas. A espessura do traço é escalada proporcionalmente, a menos que você desative essa opção.
Por que manter o stroke-width sem escala?
Se você quer traços consistentes de 1,5 ou 2px em todo o conjunto de ícones após a normalização, desmarque “Escalar stroke-width” e defina a espessura do traço manualmente.
E os transforms?
Os atributos transform existentes são mantidos como estão, e você verá um aviso. Aplique-os na sua ferramenta de design para obter um resultado totalmente limpo.
Posso instalar o Escalar SVG ViewBox como um aplicativo da web e usá-lo offline?
Sim. O Escalar SVG ViewBox é 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 para WebflowCole um SVG do Figma e copie para o Webflow como Custom Elements de verdade. Cada <svg>, <path> e <g> vira…localConversor de SVG para JSXCole um SVG do Figma, do Illustrator ou de um conjunto de ícones e receba um componente React (JSX ou TSX)…localSVG para CSSCole um SVG e receba uma data URI compacta, codificada em URL, além de regras background-image e…localCalculadora de ProporçãoRedimensione imagens e vídeos sem distorcer: informe uma proporção e um lado para obter o outro, ou digite…localGerador de faviconsCrie um pacote completo de favicons a partir de um logotipo, uma letra ou um emoji: um arquivo favicon.ico…localGerador de Animação CSSCrie animações CSS em uma linha do tempo de keyframes real. Comece com mais de 50 presets, navegue quadro…