Importação SVG no Excalidraw: o que fica editável?

Arrastar um SVG para o Excalidraw pode fornecer uma imagem nítida e redimensionável sem disponibilizar seus traçados individuais para edição. Se você precisar recolorir ou mover uma parte, precisa de uma cena Excalidraw feita de elementos nativos. Um conversor de SVG para Excalidraw pode criar esses elementos, mas o resultado ainda exige uma verificação visual. A discussão do Excalidraw sobre importação SVG descreve exatamente esse problema de objeto único versus partes editáveis.

Testamos um pequeno ícone de duas cores com uma abertura transparente. Um conversor com versão fixada produziu três elementos Excalidraw selecionáveis, mas preencheu a abertura que estava livre no SVG. Isso é um lembrete útil: editável e fiel são verificações separadas.

Três coisas que um “SVG no Excalidraw” pode significar

O terceiro caso segue a direção oposta. Uma ferramenta pode colocar dados de origem Excalidraw dentro de uma exportação SVG para que seu próprio desenho possa ser reaberto para edição. A extensão Excalidraw para VS Code, por exemplo, documenta arquivos .excalidraw.svg com dados de cena incorporados. Isso não significa que uma ilustração SVG qualquer já contenha formas Excalidraw.

Se um gráfico importado não desagrupar, primeiro identifique a estrutura do objeto selecionado. Nosso guia de desagrupamento SVG separa objetos de imagem, traçados compostos e grupos reais; o Excalidraw acrescenta seu próprio formato de cena a essa questão do arquivo de origem.

Se você só precisa editar os traçados do SVG, siga as verificações de traçado ou importação do Boxy SVG e mantenha um original SVG. Converta em uma cena Excalidraw quando precisar de elementos nativos de cena.

Um pequeno teste de conversão: as formas permaneceram, a abertura não

Nossa origem era um SVG criado manualmente: um anel verde-petróleo feito de um traçado composto par-ímpar, mais um círculo dourado. O centro do anel era realmente transparente no original, não pintado de branco. Executamos a conversão pelo repositório oficial svg-to-excalidraw usando a versão 0.0.2 do pacote npm, salvamos a cena retornada como arquivo .excalidraw, abrimos esse arquivo no Excalidraw e exportamos um PNG transparente para comparação.

Origem original versus cena convertida

A conversão não informou erros e criou três elementos nativos: dois elementos de desenho verde-petróleo e uma elipse dourada. O detalhe dourado podia ser selecionado separadamente. O centro transparente, porém, falhou na verificação de aparência. Na renderização original, seu pixel central era transparente; na exportação PNG transparente do Excalidraw, o pixel correspondente era verde-petróleo opaco. Uma resposta de conversão sem erros não garantiu uma imagem equivalente.

Este é um teste deliberadamente restrito, não uma afirmação sobre todos os SVGs ou todos os caminhos de conversão. O experimento separado SVG Chop também trata estruturas SVG complexas como um desafio de conversão. Uma olhada rápida na contagem de objetos é insuficiente. Aberturas, máscaras, recorte, gradientes, texto e grupos aninhados merecem testes próprios quando seu design os usa.

Como conferir seu próprio SVG

1. Guarde o SVG original. Salve uma cópia antes de importar ou converter. Inspecione se a região que você quer mudar já é um traçado ou forma separada. Um único traçado composto pode ter uma abertura sem possuir partes separadamente selecionáveis.
2. Decida o que “editável” significa para este desenho. Se você só precisa escalar e posicionar a ilustração, uma imagem pode bastar. Se precisar mover ou recolorir uma peça, ela precisa existir como um elemento nativo de cena.
3. Experimente o caminho de conversão em uma cópia. O projeto de código aberto SVG-to-Excalidraw converte geometria SVG em conteúdo de cena Excalidraw. Confira sua configuração atual e registre a versão do pacote usada. Importe ou abra a cena resultante, em vez de presumir que uma inserção comum de imagem exponha traçados.
4. Conte e selecione as peças. Você consegue selecionar o detalhe sem o corpo? Consegue recolori-lo enquanto a outra cor permanece? Abra a cena salva novamente e repita a edição.
5. Compare a imagem, não apenas os objetos. Coloque o original e a exportação Excalidraw sobre fundos contrastantes. Inspecione aberturas, sobreposições, bordas, texto e efeitos dos quais você depende. Nosso teste teria passado em uma verificação de “três elementos”, mas falhado aqui.

Se a conversão dividir uma parte pretendida em muitos elementos de desenho, agrupá-los pode facilitar a movimentação, mas não restaura a estrutura original do traçado. Se uma abertura desaparecer, revise a origem ou use outro editor para essa arte. Mantenha o original editável no editor vetorial quando o Excalidraw não puder preservar um recurso necessário.

Onde o PerfectVector se encaixa

O PerfectVector ajuda antes no fluxo apenas quando a origem é arte raster, como um ícone PNG plano que ainda não tem traçados SVG. Converta o clipart em SVG, inspecione se as regiões coloridas e o espaço negativo sobreviveram e limpe a geometria antes de tentar uma conversão Excalidraw. O guia de preparação de ícones pequenos aborda clareza e consistência da origem. A vetorização não transforma sozinha uma imagem inserida no Excalidraw em elementos nativos de cena, e um SVG recém-traçado ainda precisa da verificação no aplicativo de destino descrita acima.

Para um SVG que já contém formas vetoriais adequadas, pule a nova vetorização. Compare o original com a cena convertida. O guia relacionado de formas SVG personalizadas no draw.io faz uma distinção semelhante entre imagem e forma nativa em outro editor de diagramas.

Perguntas frequentes

Posso desagrupar uma imagem SVG inserida em formas Excalidraw? Uma seleção no nível de imagem não expõe as partes SVG originais como elementos Excalidraw nativos. Use um fluxo de conversão quando precisar de formas separadas de cena e inspecione o resultado.

A conversão SVG-to-Excalidraw preserva todas as aberturas? Não presuma que sim. Em nosso teste da versão 0.0.2, um anel par-ímpar se tornou elementos de desenho editáveis, mas seu centro transparente foi preenchido. Compare sua própria origem e cena salva, especialmente onde o espaço vazio importa.

Devo vetorizar um SVG antes de importá-lo? Não. Se o SVG já tem as formas necessárias, confira sua estrutura e a conversão Excalidraw. A vetorização é relevante quando a imagem inicial é arte raster, como PNG ou JPG.

Fontes

1. Discussão Excalidraw #6082 — Pergunta de usuário sobre um SVG importado se comportar como um bloco único em vez de partes editáveis.
2. Excalidraw — svg-to-excalidraw — Caminho oficial de conversão de código aberto usado no teste do ícone original com versão fixada.
3. Extensão Excalidraw Editor para VS Code — Documenta arquivos de cena Excalidraw e exportações SVG/PNG com dados de cena incorporados.
4. Minixcali — SVG Chop — Experimento independente de conversão de partes SVG em elementos Excalidraw, com ressalvas sobre geometria.

Se seu ponto de partida é um ícone PNG, crie um candidato SVG com o PerfectVector, confira suas regiões separadas e aberturas e teste a cena Excalidraw salva antes de usá-la em um desenho.