redimensionar SVG

Redimensionador de SVG

Dê ao SVG uma nova largura e altura — ou remova as duas para ele acompanhar o contêiner. A arte em si nunca é tocada.

redimensionar SVG

☞ roda inteiramente no seu navegador — nada é enviado

Solte seu SVG aqui

ou clique para procurar — somente SVG

nada é redesenhado

Por que redimensionar um SVG não perde qualidade

Uma imagem raster precisa ser redesenhada no novo tamanho, e nesse processo detalhe se perde ou é inventado. Um SVG carrega as instruções de desenho, então redimensionar é só uma anotação sobre o tamanho em que renderizar. Cada caminho, cor e gradiente do arquivo continua exatamente como estava.

Essa anotação é o par largura e altura. O viewBox por baixo define o sistema de coordenadas interno e fica intocado — e é exatamente por isso que as formas escalam em vez de serem cortadas.

três passos

Como redimensionar um SVG

01

Solte o SVG

Escolha um arquivo .svg — ele fica no seu dispositivo.

02

Defina o tamanho

Digite uma largura, escolha uma porcentagem ou deixe responsivo.

03

Baixe

Você recebe a mesma arte no tamanho que pediu.

respostas rápidas

Perguntas frequentes sobre redimensionar SVG

Redimensionar deixa a imagem borrada?

Não. Não há o que borrar — o arquivo descreve formas, não pixels, então é desenhado do zero no tamanho que você pedir. Vale igualmente a 25% e a 400%.

O que remover largura e altura faz?

Deixa o SVG responsivo. Sem esses atributos, o navegador recorre ao viewBox para a proporção e deixa o elemento preencher o contêiner, então você define o tamanho pelo CSS. É a escolha habitual para ícones em uma biblioteca de componentes.

Meu arquivo não tinha viewBox e algo ficou errado

Nesse caso, um viewBox é adicionado para você. Sem ele, o SVG trata as próprias coordenadas como pixels puros, então mudar a largura cortaria o desenho ou acrescentaria espaço vazio em vez de escalá-lo. O viewBox adicionado corresponde ao tamanho original, então nada se desloca.

O arquivo fica menor quando eu reduzo?

Quase nada — só dois números mudam. Se quiser um arquivo menor, passe pelo otimizador de SVG, que remove metadados do editor e coordenadas com casas decimais demais.

Meu arquivo é enviado para algum servidor?

Não. O arquivo é interpretado e reescrito no seu navegador.