recortar SVG

Recortar SVG

Arraste um quadro sobre o seu SVG para escolher a parte que quer manter. Só o viewBox muda — cada caminho continua exatamente como estava, então dá para desfazer o recorte a qualquer momento.

recortar SVG

☞ roda inteiramente no seu navegador — nada é enviado

Solte seu SVG aqui

ou clique para procurar — somente SVG

uma janela, não uma faca

O que recortar um SVG realmente muda

Um SVG guarda o desenho em um sistema de coordenadas, e o viewBox é a janela pela qual você o vê. Mova essa janela e a imagem estará recortada — nenhum caminho é editado, nenhum ponto é apagado, nada é redesenhado. É por isso que o resultado sai perfeito em qualquer tamanho, e por isso você pode alargar a janela depois e recuperar o desenho inteiro.

O custo é que o arquivo não fica menor: o que está fora da janela continua ali, apenas não é exibido. Se quiser que suma de fato, recorte aqui primeiro e depois passe o arquivo pelo otimizador de SVG.

três passos

Como recortar um SVG

01

Solte o SVG

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

02

Arraste o quadro

Enquadre o que quiser, ou digite valores exatos de viewBox.

03

Baixe

A mesma arte, com uma nova janela sobre ela.

respostas rápidas

Perguntas frequentes sobre recortar SVG

Recortar deixa o arquivo menor?

Não, e isso é esperado. O recorte move o viewBox, então as formas de fora continuam no arquivo — o navegador só não as desenha. Passe o arquivo recortado pelo otimizador de SVG se quiser limpar o que sobrou.

Dá para desfazer um recorte?

Dá. Como nada foi apagado, abrir o arquivo recortado aqui de novo e arrastar o quadro para fora traz o desenho inteiro de volta. É essa a diferença prática em relação a recortar um JPG.

Por que os números não são pixels?

São unidades de usuário do viewBox — o sistema de coordenadas do próprio SVG. Um arquivo pode ter 24 unidades de largura e ser exibido com 512 pixels. Os atributos width e height são ajustados proporcionalmente para você, então o arquivo recortado aparece no tamanho esperado.

Meu arquivo não tinha viewBox

Um é adicionado automaticamente, correspondendo ao width e ao height do arquivo. Sem viewBox não há janela para mover, então o recorte não teria sobre o que agir. Acrescentá-lo não muda nada visualmente.

Continua responsivo?

Se o seu SVG não tinha atributos width e height — a configuração usual de ícones dimensionados por CSS — continua assim. Esses atributos só são reescritos quando já existiam.

Meu arquivo é enviado para algum servidor?

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