PNG para SVG para Canva e Figma

Por que um PNG fica borrado no Canva e no Figma

Um PNG é uma grade de pixels. Amplie-o para um banner no Canva ou para um quadro grande no Figma e as bordas ficam suaves e serrilhadas. Converter PNG para SVG no Canva e no Figma substitui os pixels por formas vetoriais, mantendo o gráfico nítido em qualquer tamanho.

Também ajuda se você criou um logotipo no plano gratuito do Canva. Fazer upload de um SVG para o Canva não é limitado ao Pro, mas baixar seu design como SVG é um recurso do plano pago. Baixe-o como PNG em vez disso e faça a etapa de conversão de PNG para SVG do Canva aqui.

Regras do Canva para carregar um SVG

O centro de ajuda do Canva lista alguns requisitos para uploads de SVG. Veja como cada um se mapeia para o SVGR.

O que você verá ao importar o SVG para o Figma

O Figma importa um SVG como camadas vetoriais, para que você possa selecionar, recolore e redimensionar formas diretamente. Esse é o objetivo de uma conversão de PNG para SVG no Figma: você obtém formas editáveis em vez de uma imagem plana.

O SVGR empilha formas em vez de recortar buracos. O counter de uma letra O, ou a lacuna dentro de um anel, é uma forma da cor de fundo posicionada sobre uma forma sólida, então no Figma você verá camadas sobrepostas. Isso parece correto em um fundo correspondente, mas aparece em qualquer outra cor.

Para criar um buraco verdadeiro, selecione a forma superior junto com a inferior e aplique Subtrair nas operações booleanas do Figma.

Texto: formas rastreadas ou texto em vivo?

Com o Reconhecimento de texto desativado, as letras são traçadas como formas. Parece exatamente como o original e funciona em ambos os aplicativos, mas você não pode reescrevê-lo.

Com isso ativado, o texto detectado se torna texto SVG em tempo real, e o SVGR também executa o refinamento de cores, o que pode adicionar preenchimentos em gradiente. O Canva solicita que o texto seja expandido, portanto, mantenha essa opção desativada lá. O Figma importa o texto SVG como texto em tempo real, com limitações: a opacidade do texto é ignorada, os tamanhos de fonte baseados em em são lidos como pixels e o espaçamento entre letras em spans de texto individuais é ignorado.

Para logotipos, deixe o Reconhecimento de texto desativado. Se você precisar de títulos editáveis, reescreva-os no Figma com a fonte correta.

Limites do conhecimento

• A conversão de PNG para SVG no Canva e no Figma funciona para gráficos planos, não para fotos. Uma foto rastreada se torna um arquivo grande e complexo; no Canva, faça o upload da própria foto como JPG ou PNG.
• PNGs com bordas suaves podem vir com cores quase duplicadas, como várias tonalidades quase pretas. Recoloque-os para uma única cor no Figma ou em outro editor se você quiser uma paleta limpa.
• Como o Canva permite recolorear um SVG carregado depende do arquivo, e nós não testamos isso em todos os designs. Carregue um arquivo de teste antes de criar um modelo em torno dele.
• Formas empilhadas também importam no Canva. Com um fundo transparente, o interior de um "O" mantém sua cor de fundo original e aparece como um ponto em qualquer outra cor. Recorte esses buracos no Figma, ou com Caminho > Diferença no Inkscape, antes de fazer o upload.
• O fundo transparente remove a forma pintada na cor encontrada nos cantos da imagem, que é o que as pessoas chamam de fundo. Se a sua arte se estender até todos os quatro cantos, ou se os cantos tiverem cores diferentes, nada será removido e o fundo permanecerá — forneça à arte uma margem plana e uniforme e converta novamente. As áreas totalmente cercadas pela arte nunca são removidas, e um PNG que já possui um canal de transparência é mantido como está.
• As curvas são traçadas como muitos segmentos retos pequenos. Traçadas a partir de uma imagem pequena, elas podem parecer ligeiramente angulares quando ampliadas, por isso comece a partir da maior cópia que você tiver.