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 que parte do espaço de coordenadas o ficheiro está a mostrar.

A margem vem desses quatro números. Um ícone exportado a 512 × 512 com a forma ao meio tem espaço vazio de todos os lados, e nenhuma mudança de tamanho o tira: encolha o ficheiro e encolhe a margem juntamente com o desenho. O logótipo continua a flutuar no meio da sua própria caixa e continua a recusar-se a alinhar com o texto ao lado.

Esta ferramenta muda a viewBox e mais nada. Descobre onde o desenho começa e acaba de facto, aperta a caixa à sua volta e devolve-lhe um SVG — os mesmos traçados, os mesmos gradientes, os mesmos grupos, numa caixa do seu tamanho.

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

A forma óbvia de encontrar as margens de um SVG é pedir ao navegador a caixa que envolve todas as formas. Essa forma erra em dois casos banalíssimos, e são exatamente esses dois que trazem as pessoas à procura de uma ferramenta destas:

• Um retângulo branco de fundo. É uma forma, por isso conta, por isso a caixa envolvente é a tela inteira e não se corta nada.
• Desfoques e sombras. Um filtro pinta bem para lá da forma que o produziu, por isso uma caixa geométrica corta a margem suave.

Por isso esta ferramenta desenha primeiro o SVG e só depois olha para o resultado, tal como o seu olho faz. Um retângulo branco lê-se como vazio. Uma sombra lê-se como conteúdo e é guardada. O que vê é o que é medido.

Transparente ou branco

• Transparente ou branco *(a escolha do costume)* — vai embora tudo o que chamaria «vazio»: píxeis totalmente transparentes e píxeis brancos por igual. É o que quer num ícone exportado numa prancheta branca, ou num logótipo com uma placa branca por trás.
• Só transparente — o branco é tratado como parte do desenho. Use quando o branco é mesmo o design: um logótipo escrito a branco, um fundo branco que tem de ficar, ou arte pensada para uma página escura.

A tolerância decide o que está perto o suficiente de vazio para contar como vazio. Ficheiros exportados raramente são puros: um fundo pode ser #fefefe, uma margem pode estar ligeiramente transparente. Suba a tolerância se nada foi cortado; baixe-a se uma parte clara do desenho foi cortada.

A margem

Margem a deixar repõe uma quantidade de espaço à sua escolha 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 quer para um ícone dentro de um botão ou um logótipo numa grelha, onde é a maquetização que deve decidir os espaçamentos. Vale a pena acrescentar uma margem pequena quando o desenho tem um contorno que um recorte apertado cortaria, ou quando o ficheiro vai para algum sítio onde será recortado outra vez.

A largura e a altura acompanham

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

Isto importa: o desenho não muda de tamanho quando o recorta. Só desaparece o espaço vazio à sua volta. Um SVG sem width nem height fica sem eles, por isso continua a adaptar-se àquilo onde for posto.

Nada é enviado

O ficheiro é lido, desenhado e reescrito dentro do seu navegador. Nunca chega a um servidor, que é o que interessa quando o ficheiro é um logótipo por lançar, a marca de um cliente ou trabalho sob acordo de confidencialidade.

Também quer dizer que não há espera de envio nem limite de tamanho, e que a ferramenta funciona offline assim que a página estiver carregada.

Para que serve

• Um ícone exportado com uma prancheta fixa que não há maneira de alinhar num botão
• Um logótipo com uma placa branca por trás que tem de ir para um cabeçalho colorido
• Arte do Figma, Illustrator ou Inkscape que saiu com a tela toda à volta
• Um SVG para uma folha de sprites 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 ficheiro é o material
• Fazer um conjunto de ícones bater certo, recortando cada um pelo seu próprio conteúdo

Bom saber

• O recorte é medido a partir de uma representação, por isso a precisão é de cerca de um píxel desenhado — a caixa é alargada um cabelo para garantir que nada é rapado
• O que estivesse desenhado fora da viewBox original já era invisível, e assim fica
• O texto vivo é medido com os tipos de letra que o seu navegador tem; converta-o em traçados primeiro se o encaixe tiver de ser exato
• Um <image> ou uma referência que aponte para outro ficheiro não pode ser desenhado aqui, por isso não conta
• Comentários, <defs>, metadados e ids sobrevivem todos — isto é um novo recorte, não uma limpeza
• Para recortar um bitmap, use Cortar imagem, que também tira margens automaticamente
• Para transformar depois o resultado num PNG, use SVG para PNG

Como usar

• Clique em Clique para carregar, ou arraste o seu SVG para a caixa
• O recorte é calculado de imediato — o contorno tracejado à esquerda mostra o que fica
• Deixe Transparente ou branco, a não ser que o branco faça parte do design
• Suba a tolerância se nada foi cortado, baixe-a se algo claro foi cortado
• Defina uma margem se quiser deixar espaço nos quatro lados
• Carregue em Descarregar SVG, ou em Copiar o código SVG para o colar diretamente 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 lisa
• Imagem para SVG — vetorizar um logótipo ou ícone
• Gerador de favicon — transformar o resultado no ícone de um site
• Redimensionar imagem — redimensionar um bitmap em vez disso