Importar SVG no Penpot: leve formas editáveis ao design

Para importar um SVG no Penpot, abra um arquivo de design e arraste o .svg para a tela ou escolha a ferramenta de imagem da barra para selecionar o arquivo. O comando Import files do painel inicial serve para arquivos de projeto do Penpot. Se está tentando posicionar um ícone, comece dentro do design. As orientações de inserção de camadas e a documentação de importação de projetos descrevem essas rotas separadas.

Quando a arte aparecer, confira se consegue mudar uma região de cor e editar um contorno. Um ícone pode parecer correto e ainda ser difícil de modificar. Se a arte original já é vetorial, repare ou exporte novamente quando necessário. Trace um PNG ou JPG apenas quando precisar recuperar formas de pixels.

Confira a importação antes de reutilizá-la

Mantenha o SVG original, importe um ícone representativo e trabalhe em uma cópia. Teste a aparência, um preenchimento, uma curva e qualquer texto editável. Exporte um SVG separado e compare com o original antes de repetir o fluxo em todo um kit.

Comece na tela e inspecione as camadas

Abra o arquivo do Penpot ao qual a arte pertence. Insira o SVG salvo em uma área vazia para examiná-lo separado do restante do design. Se arrastar falhar, use o seletor de arquivo da ferramenta de imagem para eliminar o comportamento de arrastar e soltar do diagnóstico.

Selecione a arte importada e expanda sua entrada no painel Layers. Um grupo é uma organização útil, não prova de que o SVG virou bitmap. Você pode selecionar um filho no painel ou dar um clique duplo para entrar em um grupo; o Penpot também permite seleção profunda com Ctrl-click ou Command-click. Esses controles são abordados no guia de seleção de camadas.

Conteúdos SVG diferentes podem virar tipos diferentes de objetos. No importador da versão publicada do Penpot, formas comuns como traçados, retângulos e elipses têm manipuladores de formas nativas; outros elementos podem ser mantidos como SVG bruto. O importador também trata elementos de imagem separadamente. Por isso o nome do arquivo, sozinho, não estabelece como cada parte será editada. Veja o importador de formas SVG.

Evite desagrupar ou achatar tudo no início. Primeiro identifique a parte que quer mudar. Preserve o grupo se seus filhos já fornecem o controle necessário.

Teste um preenchimento e uma curva

Use um ícone pequeno com partes visivelmente separadas. Uma planta em um vaso é um bom exemplo: o vaso deve aceitar outra cor sem mudar as folhas, e uma folha deve ser editável sem distorcer a planta inteira.

Em uma cópia do ícone importado:

1. Selecione a camada do vaso e mude seu preenchimento para uma cor contrastante. Confira se apenas a região desejada muda.
2. Selecione o traçado de uma folha. Pressione Enter para editar seus nós, mova um ponto um pouco e desfaça. O Penpot documenta isso nas instruções de edição de nós.
3. Compare a cópia com a importação intacta. Confirme que a silhueta original, os pequenos espaços e a espessura do contorno permanecem iguais depois de desfazer o teste.

Se vaso e folhas mudarem juntos, inspecione a seleção e a estrutura do arquivo original. Você pode ter selecionado o grupo externo, ou o arquivo original pode combinar várias regiões em um traçado. Uma mudança de cor bem-sucedida não comprova que todo contorno seja um traçado nativo separado.

Conteúdo SVG bruto é outra possibilidade. O Penpot tem um painel de opções separado para ele, incluindo controles de aparência para elementos aceitos. A presença de controles de preenchimento ou contorno, portanto, não garante edição comum de nós. Se a parte não puder ser editada conforme necessário, simplifique ou redesenhe essa parte no editor em que a arte foi criada e importe uma nova cópia. A distinção aparece na implementação das opções de SVG bruto.

Diagnostique o sintoma antes de mudar o arquivo

Use o SVG sem alterações como referência. Abra-o no navegador e compare essa renderização com a importação do Penpot. Se já estiver errado no navegador, volte à exportação original antes de tentar reparar a cópia do Penpot.

Contornos ausentes e arte invisível

Confira as configurações de preenchimento e contorno da camada selecionada antes de excluí-la. O Penpot expõe cor, opacidade, largura, estilo e visibilidade do contorno, além de controles de terminação para traçados abertos. Uma marca curta com contorno pode parecer bem diferente com outra terminação, então compare a forma em vez de presumir que a linha está ausente. Os controles disponíveis são descritos em Cor e contornos.

Para um objeto invisível, inspecione também camadas ocultas e recorte. Se o navegador renderiza o arquivo original corretamente, mas o Penpot não, isole o elemento que falha em uma cópia do arquivo original. Exporte novamente a amostra mais simples e compare. Isso fornece um arquivo e sintoma específicos para investigar, em vez de mudar várias configurações ao mesmo tempo.

Não remova todo style, máscara ou definição apenas porque uma solução antiga sugere isso. Esses elementos podem carregar informações de aparência. Se a construção do contorno do arquivo original é o problema, siga o diagnóstico aprofundado de contornos SVG ausentes e preserve um arquivo mestre editável antes de expandir contornos em formas.

Texto que parece correto, mas não permite edição

Para um rótulo de botão, tente mudar uma palavra. Para um logo, decida se preservar as formas das letras basta. São requisitos diferentes.

As letras importadas podem já ser contornos ou permanecer como conteúdo SVG em vez de uma camada de texto nativa. Não presuma que todo elemento de texto SVG importado vire texto editável do Penpot. Se as palavras precisam mudar regularmente, recrie-as com a ferramenta de texto do Penpot, escolha a fonte desejada e compare espaçamento e quebras de linha. O guia de texto explica como criar camadas de texto e editar seu conteúdo.

Quando as letras mudarem de forma ou quebrarem linhas de outra maneira, use o guia de problemas de fontes SVG. Mantenha uma cópia com texto editável mesmo se uma versão de entrega precisar de letras em contornos.

Quando o PerfectVector faz parte do fluxo

O PerfectVector é útil quando você tem um ícone ou ilustração raster e precisa de contornos editáveis no Penpot. Converta o PNG ou JPG em traçados SVG, inspecione a silhueta e as regiões de cor e importe o resultado para executar o teste de um preenchimento e uma curva. O traçado ainda precisa ser avaliado em relação à arte que pretende usar.

Uma figura raster colocada dentro de um SVG não ganha contornos editáveis de folha ou vaso só porque seu contêiner mudou. O importador do Penpot tem um manipulador de imagens separado; ele não transforma essa imagem nos objetos de traçado nativos tratados em outro ponto do código do importador.

Use a exportação vetorial original quando a tiver. Para um símbolo simples de interface, desenhá-lo com formas nativas do Penpot pode fornecer geometria mais intencional do que traçar. Mantenha fotografias e arte com muita textura como imagens quando seus pixels fizerem parte do design. A explicação de vetorização de imagens aborda o que o traçado recupera e o que muda.

Exporte uma amostra antes de montar o kit

Mantenha o design de trabalho no Penpot e exporte um SVG de entrega separado. Selecione o ícone ou seu quadro, adicione uma predefinição de exportação com o botão de mais na seção Export do painel Design e escolha SVG. O Penpot documenta isso em Exportação de camadas.

Abra o arquivo exportado no navegador. Compare cores, contornos, aparência do texto, recorte e espaço vazio com a referência. Se o arquivo precisar voltar a um editor de design, importe essa exportação em uma área separada e repita o teste de edição. Aparência correta e estrutura útil de edição precisam de verificações próprias.

Antes de adicionar a amostra a um kit maior, confirme:

• As regiões que precisam de cores separadas podem ser selecionadas de forma independente.
• Os contornos que espera remodelar expõem controles de edição utilizáveis.
• Rótulos editáveis permanecem texto no design de trabalho.
• O ícone exportado tem os limites e o espaçamento interno desejados.
• O ícone continua legível no tamanho real de interface.

Aplique então as mesmas verificações ao conjunto. O fluxo de ícones PNG para kit de interface SVG acrescenta grades compartilhadas, dimensionamento óptico e regras de nomenclatura quando as importações individuais estiverem corretas.

Perguntas frequentes

Por que a caixa Import files do Penpot rejeita meu SVG? Essa caixa importa arquivos de projeto do Penpot. Para posicionar um gráfico SVG, abra um arquivo de design e use a ferramenta de imagem ou arraste o SVG para a tela.

Importar um SVG torna toda parte editável? Formas vetoriais comuns podem virar objetos nativos do Penpot, mas outros conteúdos podem permanecer como SVG bruto ou imagens. Teste a mudança específica de preenchimento, curva ou texto necessária antes de reutilizar a arte.

Preciso desagrupar um SVG importado? Somente se mudar a estrutura de grupo ajudar sua tarefa. Tente primeiro selecionar um filho no painel Layers. Manter um grupo útil não impede editar seus filhos selecionáveis.

Devo vetorizar um SVG que importa incorretamente? Comece reparando ou exportando novamente a arte vetorial existente. A vetorização é útil quando a arte disponível é raster e você precisa de traçados; não é uma etapa geral de reparo de um SVG existente.

Fontes

1. Penpot: Camadas — Inserção de arte, seleção de filhos e edição de nós dos traçados.
2. Penpot: Exportar e importar arquivos Penpot — Rota nativa de importação de projetos, separada da inserção de arte na tela.
3. Penpot: Importador de formas SVG — Tratamento separado de formas nativas, imagens e conteúdo SVG bruto em uma versão lançada.
4. Penpot: Opções de SVG bruto — Controles de aparência sozinhos não estabelecem editabilidade nativa de traçados.
5. Penpot: Cor e contornos — Controles de preenchimento, contorno e terminações usados nas verificações de diagnóstico.
6. Penpot: Texto e tipografia — Criação de camadas de texto nativas e edição do conteúdo.
7. Penpot: Exportação de camadas — Adição de uma predefinição de exportação SVG para camada ou quadro.

---

Se a imagem original é PNG ou JPG e você precisa de formas editáveis, prepare um SVG com o PerfectVector. Importe-o no Penpot, altere um preenchimento e teste uma curva antes de incorporar a arte ao kit de design.