recortar SVG
☞ roda inteiramente no seu navegador — nada é enviadoSolte seu SVG aqui
ou clique para procurar — somente SVG
Prévia
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.
ou clique para procurar — somente SVG
Prévia
uma janela, não uma faca
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
Escolha um arquivo .svg — ele fica no seu dispositivo.
Enquadre o que quiser, ou digite valores exatos de viewBox.
A mesma arte, com uma nova janela sobre ela.
respostas rápidas
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á. 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.
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.
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.
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.
Não. O arquivo é interpretado e reescrito no seu navegador.