Recortar SVG

Sobre recortar um SVG

Um SVG não é uma imagem com uma moldura. É um desenho mais uma viewBox — quatro números que dizem qual parte do espaço de coordenadas o arquivo está mostrando.

A margem vem desses quatro números. Um ícone exportado em 512 × 512 com a forma no meio tem espaço vazio de todos os lados, e nenhum redimensionamento resolve isso: diminua o arquivo e a margem diminui junto com o desenho. O logo continua flutuando no meio da própria caixa e continua se recusando a alinhar com o texto ao lado.

Esta ferramenta muda a viewBox e mais nada. Ela descobre onde o desenho realmente começa e termina, ajusta a caixa em volta dele e te devolve um SVG — os mesmos traçados, os mesmos gradientes, os mesmos grupos, numa caixa do tamanho certo.

Olha para a imagem, não para o código

O jeito óbvio de encontrar as margens de um SVG é pedir ao navegador a caixa que envolve todas as formas. Esse jeito erra em dois casos bem comuns, e são justamente esses dois que fazem as pessoas procurarem uma ferramenta como esta:

• Um retângulo branco de fundo. É uma forma, então conta, então a caixa envolvente é a tela inteira e nada é cortado.
• Desfoques e sombras. Um filtro pinta bem além da forma que o gerou, então uma caixa geométrica corta a borda suave.

Por isso esta ferramenta primeiro desenha o SVG e só depois olha o resultado, do mesmo jeito que o seu olho faz. Um retângulo branco é lido como vazio. Uma sombra é lida como conteúdo e é mantida. O que você vê é o que é medido.

Transparente ou branco

• Transparente ou branco *(a escolha padrão)* — remove tudo o que você chamaria de "vazio": pixels totalmente transparentes e pixels brancos, do mesmo jeito. É o que você quer num ícone exportado numa prancheta branca, ou num logo com um fundo branco atrás.
• Só transparente — o branco é tratado como parte do desenho. Use quando o branco faz parte do design: um logo escrito em branco, um fundo branco que precisa ficar, ou uma arte feita para uma página escura.

A tolerância decide o que está perto o bastante de vazio para contar como vazio. Arquivos exportados raramente são puros: um fundo pode ser #fefefe, uma borda pode ser levemente transparente. Aumente a tolerância se nada foi cortado; diminua se uma parte clara do desenho foi cortada.

A margem

Margem a manter devolve a quantidade de espaço que você quiser nos quatro lados, medida nas unidades do próprio SVG — os mesmos números que a viewBox usa.

Zero dá a caixa mais justa possível, que é o que você quer para um ícone dentro de um botão ou um logo numa grade, onde é o layout que deve decidir os espaçamentos. Vale a pena colocar uma margem pequena quando o desenho tem um contorno que um recorte apertado cortaria, ou quando o arquivo vai para algum lugar onde vai ser recortado de novo.

A largura e a altura acompanham

Se o SVG tinha os atributos width e height, eles são ajustados pelo mesmo fator da caixa, na unidade em que estavam escritos. Um desenho de 40 mm de largura dentro de uma tela de 100 mm sai com 40 mm de largura.

Isso é importante: o desenho não muda de tamanho quando você recorta. Só some o espaço vazio em volta dele. Um SVG sem width e height continua sem eles, então continua se adaptando a onde for colocado.

Nada é enviado

O arquivo é lido, desenhado e reescrito dentro do seu navegador. Ele nunca chega a um servidor, o que importa quando o arquivo é um logo ainda não lançado, a marca de um cliente ou um trabalho sob acordo de confidencialidade.

Isso também significa que não há espera de upload nem limite de tamanho, e que a ferramenta funciona offline depois que a página carrega.

Para que serve

• Um ícone exportado com uma prancheta fixa que não tem como alinhar num botão
• Um logo com um fundo branco atrás que precisa ir para um cabeçalho colorido
• Arte do Figma, Illustrator ou Inkscape que saiu com a tela inteira em volta
• Um SVG para uma sprite sheet ou uma fonte de ícones, onde cada glifo precisa de uma caixa justa
• Um desenho para uma máquina de corte ou um laser, onde a caixa do arquivo é o material
• Deixar um conjunto de ícones alinhado, recortando cada um pelo próprio conteúdo

Bom saber

• O recorte é medido a partir de uma renderização, então a precisão é de cerca de um pixel renderizado — a caixa é aumentada um fio para garantir que nada seja cortado
• O que estava desenhado fora da viewBox original já era invisível, e continua assim
• O texto editável é medido com as fontes que seu navegador tem; converta em contornos antes se o encaixe precisar ser exato
• Um <image> ou uma referência que aponte para outro arquivo não pode ser desenhado aqui, então não conta
• Comentários, <defs>, metadados e ids continuam todos lá — isto é um novo recorte, não uma limpeza
• Para recortar um bitmap, use Cortar imagem, que também remove margens automaticamente
• Para transformar o resultado num PNG depois, use SVG para PNG

Como usar

• Clique em Clique para enviar, ou arraste seu SVG para a caixa
• O recorte é calculado na hora — o contorno tracejado à esquerda mostra o que fica
• Deixe Transparente ou branco, a não ser que o branco faça parte do design
• Aumente a tolerância se nada foi cortado, diminua se algo claro foi cortado
• Defina uma margem se quiser deixar espaço nos quatro lados
• Clique em Baixar SVG, ou em Copiar o código SVG para colar direto numa página

Ferramentas relacionadas

• Cortar imagem — o mesmo trabalho para PNG e JPG
• SVG para PNG — transformar o SVG recortado num bitmap
• SVG para JPG — um SVG como imagem comum
• Imagem para SVG — vetorizar um logo ou ícone
• Gerador de favicon — transformar o resultado no ícone de um site
• Redimensionador de imagens — redimensionar um bitmap em vez disso