Como um arquivo traçado é por dentro

O traçado agrupa o resultado por objeto: primeiro vem um <g> para o fundo (quando a imagem tem um), depois um <g> para cada objeto separado, cada um nomeado num <title> (Background, Object 1, Object 2 …). Dentro de cada grupo, cada forma é um elemento <path> próprio, com um fill e um atributo d que guarda o contorno como comandos de mover, linha e curva cúbica, e as formas ficam aninhadas conforme o que as envolve: uma forma que contém outras (um rosto com os olhos) vira um grupo próprio (Part 1.1, Part 1.1.1 …), cujo primeiro caminho é a própria forma, desenhada inteira por baixo do que contém — então ocultar um olho mostra o rosto, e não um buraco. Pontinhos menores que alguns pixels ficam como caminhos sem nome dentro do grupo de cima. Não há traços nem elementos de texto: o logotipo de um logo é um contorno preenchido, não texto. Com Camadas em Por cor nas Configurações, o arquivo não tem grupos, e sim um <path> por cor.

Um pequeno SVG redondo de paisagem e cada um dos seus quatro caminhos sozinho: um disco azul, um céu creme, uma montanha azul-marinho e um sol laranja com o reflexo

O SVG de exemplo da nossa página inicial (à esquerda) e cada um dos seus quatro caminhos isolado: cada forma é um elemento separado com o próprio preenchimento, pronto para selecionar, recolorir ou excluir.

O editor lê exatamente essa estrutura, no tamanho e nas coordenadas do próprio arquivo. Cada caminho é uma forma em que você pode clicar para selecionar. A lista de camadas mostra os grupos de nível superior do arquivo: um arquivo cujas formas ficam direto no SVG (um traçado Por cor) abre como uma camada só, e um arquivo agrupado por objeto abre com uma camada por grupo, com o nome dele.

Edições que o editor do navegador faz bem

  • Recolorir uma forma. Selecione e escolha um novo preenchimento. Como um caminho guarda todas as regiões daquela cor dentro de um objeto, recolorir "o azul" muda todas as áreas azuis desse objeto de uma vez; se você precisar que duas delas fiquem diferentes, essa é uma separação para um editor de desktop.
  • Mover e redimensionar. Arraste para mover e use as alças para redimensionar. Redimensionar um vetor nunca borra, então faça uma versão no tamanho do cabeçalho da página e outra para um favicon a partir do mesmo arquivo.
  • Mover pontos um a um. Selecione uma forma e mude para a ferramenta de pontos (N): cada ponto de ancoragem da curva traçada ganha uma alça que você pode arrastar, e as alças de curva dele dobram os segmentos vizinhos. É assim que você corrige uma ondulação ou endireita uma borda sem sair do navegador.
  • Alinhar e espaçar formas. Selecione várias formas e alinhe as bordas ou os centros delas entre si ou em relação à arte (uma forma sozinha sempre se alinha à arte); com três ou mais selecionadas, Distribuir deixa espaços iguais entre elas.
  • Unir, subtrair, fazer interseção. Selecione duas ou mais formas e use Combinar formas: Unir junta tudo num contorno só, Subtrair recorta da forma de baixo as formas que estão acima, Interseção mantém só a sobreposição, Exclusão mantém o que não se sobrepõe e Dividir transforma cada sobreposição numa forma própria. Curvas continuam curvas, o resultado mantém a cor e a camada da forma de baixo, e um único desfazer traz as formas originais de volta. Esse é o passo habitual antes de um corte: unir letras sobrepostas numa peça só ou subtrair uma forma para criar um vazado.
  • Encaixar na grade. Ative o ímã e escolha um tamanho de grade: o que você mover, desenhar, redimensionar ou remodelar ponto por ponto passa a cair na grade, que aparece sobre a arte enquanto está ativa. O editor guarda essa configuração no seu navegador.
  • Reaproveitar formas e trabalhar em vários arquivos. Guarde uma seleção em Minhas partes (armazenadas no seu navegador para a sua conta, e exportáveis para um arquivo) e adicione-a a qualquer outro desenho. Abra outro arquivo desbloqueado seu numa nova aba para copiar entre eles: cada aba tem o próprio histórico de desfazer e salva como nova versão do próprio arquivo.
  • Reordenar, ocultar e bloquear. As camadas podem ser ocultadas, bloqueadas (para os cliques irem para as formas de baixo), renomeadas e movidas para cima ou para baixo; dentro de uma camada, Ctrl+D duplica uma forma e as setas do teclado a deslocam.
  • Excluir sobras. Caminhos de pontinhos e um retângulo de fundo que sobrou saem com um clique. Normalmente essa é a primeira edição depois de traçar um JPEG.
  • Exportar. Salve o SVG ou exporte um PNG numa largura em pixels escolhida, com a transparência mantida. Editar um resultado desbloqueado não gasta créditos extras.

O editor só abre vetores que são seus: o SVG que você mesmo enviou ou um resultado que você desbloqueou. As prévias são imagens raster com marca d'água e não podem ser editadas — é assim que o vetor pago só sai do servidor depois de pago.

Edições que pedem um editor vetorial de desktop

Algumas mudanças exigem uma "cirurgia" nos caminhos que o editor do navegador não oferece:

  • Separar uma cor em objetos diferentes (as duas formas azuis que precisam se mover de forma independente): "Separar" (Break apart) num editor de desktop.
  • Deslocar um contorno (aumentar ou diminuir por uma distância fixa, um contorno para o recorte de uma figurinha).
  • Converter preenchimentos em traços de linha central para plotters de caneta ou gravação de linha única.
  • Converter texto em contornos. O editor do navegador adiciona e mantém texto editável, mas não o transforma em caminhos.

O Inkscape (gratuito, de código aberto) faz tudo isso; os editores comerciais também. Abra o SVG, use "Separar", "Expandir" (Outset) ou a ferramenta de nós conforme precisar e salve. Como o arquivo é um SVG simples com dados de caminho padrão, nada nele depende do png2svg.art.

Uma ordem de trabalho que faz sentido

  1. Desbloqueie e abra no editor. Exclua formas soltas, corrija cores óbvias, suavize ponto por ponto uma borda tremida e confira o empilhamento.
  2. Una ou recorte formas com Combinar formas e alinhe o que precisa ficar alinhado.
  3. Salve o SVG. Passe pelo otimizador se o tamanho importar (remoção de metadados e arredondamento de coordenadas; confira o antes e depois informado).
  4. Desloque contornos ou separe partes num editor de desktop, se o trabalho exigir.
  5. Mantenha o resultado desbloqueado nos seus arquivos: baixar de novo é grátis enquanto ele estiver guardado, e você pode reabri-lo no editor a qualquer momento dentro do período de retenção.

Limites para ter em mente

  • O editor não consegue adicionar um degradê; os preenchimentos são cores sólidas ou nenhum. Traços (cor e largura) podem ser adicionados, e degradês, traços e texto editável que já estão num arquivo são mantidos. Tudo o que o editor não consegue manter aparece numa lista antes de você salvar.
  • Traçados muito grandes (milhares de caminhos de uma ilustração detalhada) ficam lentos de manipular em qualquer navegador; simplifique o traçado com um número menor de cores antes de editar.
  • Os PNGs exportados são imagens raster no tamanho que você escolher — exporte no maior tamanho de que vai precisar ou continue usando o SVG.