Softonic

Redimensionar SVG

Etapa 1 / 2
Próximo

O SVG é um formato vetorial, portanto é independente da resolução e permanece nítido em qualquer tamanho. “Redimensionar” um SVG não o rasteriza nem altera o desenho: esta ferramenta apenas define um novo width e height em pixels no elemento raiz <svg>, que é o seu tamanho de exibição declarado. O viewBox, os traçados e cada coordenada ficam exatamente como estão, então o desenho mantém suas proporções e não perde qualidade. Cole seu markup, defina a largura e a altura, pré-visualize o resultado e copie-o ou baixe-o.

Como redimensionar um SVG

  1. 1

    Cole o SVG

    Cole o markup completo `<svg>...</svg>` na caixa de texto.

  2. 2

    Defina a largura e a altura

    Insira a nova largura e altura em pixels.

  3. 3

    Pré-visualize ao vivo

    A ferramenta reescreve o `width` e o `height` do `<svg>` raiz (ou os adiciona se estiverem faltando) e mostra o resultado na hora.

  4. 4

    Copie ou baixe

    Copie o markup atualizado para a área de transferência ou salve-o como arquivo `.svg`.

Tamanho de exibição vs. viewBox

Um SVG tem um tamanho de exibição (width/height) e seu próprio sistema de coordenadas (viewBox).

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

Este SVG tem 200 x 200 pixels na tela, enquanto suas coordenadas internas vão de 0 a 100. O círculo com r="40" preenche cerca de 80% do viewBox, então é renderizado com aproximadamente 160 px de largura. Esta ferramenta muda apenas o width e o height, ou seja, o tamanho de exibição declarado. Ela não toca no viewBox nem nas coordenadas, e é exatamente por isso que o desenho mantém suas proporções e continua nítido: você está dizendo ao navegador para desenhar a mesma imagem em outro tamanho, não para redesenhá-la.

Por que um SVG pode parecer igual depois que você muda o tamanho

Se o SVG for colocado com algo como <img src="icone.svg" width="500"> ou dimensionado por CSS, a página ao redor controla o tamanho de exibição e substitui o width/height do arquivo. Nesse caso, mude o tamanho onde o SVG é usado (o <img>, o CSS ou o contêiner), não apenas dentro do markup.

Traços e texto continuam nítidos

Como nada é rasterizado, o texto continua sendo texto vetorial de verdade e as linhas permanecem suaves em qualquer tamanho. A espessura dos traços é definida no sistema de coordenadas, então ela escala junto com o desenho. Para que um traço mantenha a mesma espessura visual independentemente do tamanho, adicione vector-effect="non-scaling-stroke" a esse elemento na sua fonte antes de redimensionar.

Mantenha o markup limpo

SVGs exportados do Figma, Illustrator ou Sketch costumam carregar peso extra: namespaces do editor (sodipodi:, inkscape:), metadados ocultos e <defs> não utilizados. Esta ferramenta deixa seu markup como está, exceto pelo tamanho. Para remover o excesso, passe o arquivo por um otimizador como o SVGO antes ou depois de redimensionar.

Perguntas frequentes

Não. Ele apenas define o width e o height no <svg> raiz. O viewBox, os traçados e cada coordenada ficam intactos, então a ilustração mantém suas proporções exatas.

Normalmente é a página que controla o tamanho: uma largura no <img>, uma regra de CSS ou um contêiner estão substituindo as dimensões próprias do arquivo. Mude o tamanho onde o SVG é usado, não apenas no markup.

Sim. O SVG é um formato vetorial, então nada é rasterizado e o texto e os traços continuam nítidos em qualquer tamanho. Se o arquivo de origem já converteu o texto em traçados, ele escala como qualquer outra forma, e continua nítido.

Sim. Apenas o width e o height são alterados; <animate>, <script>, manipuladores de eventos e o CSS dentro do SVG ficam intocados.

O markup é enviado ao nosso servidor para renderizar a pré-visualização redimensionada e não é armazenado após a solicitação. Ele não é guardado nem compartilhado.

Ferramentas relacionadas

Seletor de Cores do Material Design

Navegue pela paleta de cores do Material Design. Copie qualquer tonalidade (50 a A700) como HEX, RGB ou HSL com um toque.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Criador de Crachás

Crie até 60 crachás imprimíveis a partir de uma lista Nome | segunda linha. Escolha 8 cartões ou 15 etiquetas por página em A4 ou US Letter e imprima localmente.

Conversor de imagens em lote

Converta localmente até 20 imagens que o navegador consiga ler para JPG, PNG ou WebP e baixe arquivos separados ou um ZIP.

Ferramenta disponível em outros idiomas