PerfectVector
Por Irene Kim9 min de leitura

PSD para SVG sem perder camadas: o que permanece

Um PSD pode conter formas, texto editável, máscaras e pixels, mas o SVG não preserva tudo. Saiba quais partes exportar, achatar ou traçar primeiro.

Nesta página

Você não consegue converter toda camada do Photoshop em uma camada SVG equivalente. Um PSD pode misturar camadas de formas, texto editável, máscaras, efeitos, Objetos Inteligentes e pixels comuns. O SVG representa traçados, texto, grupos e imagens, mas esses objetos não correspondem de forma direta ao modelo de documento do Photoshop. O fluxo mais seguro é preservar o conteúdo vetorial por exportação nativa e traçar apenas a arte raster que não tem arquivo vetorial original reutilizável.

Decisão rápida
  • Se o PSD já contém traçados de formas limpos, preserve-os ou leve-os a um editor vetorial.
  • Mantenha texto editável como texto apenas quando o destino tiver a fonte e puder tratar texto SVG de forma confiável. Caso contrário, converta uma cópia de entrega em contornos.
  • Trate máscaras, efeitos, Objetos Inteligentes e camadas de pixels como aparência visível, não como estrutura portável de camadas.
  • Se você só precisa da arte achatada como formas editáveis, revise a composição salva e trace-a.
  • Abra o SVG final e examine seus objetos. A extensão .svg não prova que camadas foram preservadas ou que pixels viraram traçados.

Uma camada PSD não é uma camada SVG

O painel Layers do Photoshop descreve como um documento é editado. O SVG descreve o que um renderizador desenha. São trabalhos diferentes.

Conteúdo PSDMelhor caminhoO que esperar no SVG
Camada de forma ou traçado do PhotoshopPreservar ou mover de forma nativaTraçados editáveis, se a exportação mantiver a geometria vetorial
Texto editávelManter editável ou converter uma cópia em contornosTexto editável precisa da fonte; contornos preservam a aparência, mas perdem a edição de texto
Camada de pixelsTraçar apenas se formas vetoriais forem úteisNovos traçados aproximam os pixels visíveis
Máscara de camada ou de recorteReconstruir ou achatar deliberadamenteO recorte visível pode permanecer, mas a configuração de edição do Photoshop não
Objeto InteligenteAbrir primeiro seu arquivo originalO resultado inserido sozinho pode revelar apenas pixels renderizados
Efeito de camada, textura ou sombra suaveManter raster ou simplificarEfeitos suaves frequentemente viram pixels ou um conjunto grande de formas

O fluxo atual de recursos de imagem da Adobe gera recursos SVG a partir de camadas ou grupos de camadas nomeados. A mesma documentação informa que um recurso de grupo de camadas é achatado, mesmo quando o grupo contém formas e texto editável. Em outras palavras, escolher SVG como saída não transforma a hierarquia do Photoshop em uma hierarquia SVG equivalente.

Faça um inventário do arquivo antes de converter

Duplique o PSD antes de mudar qualquer coisa. Examine depois os painéis Layers, Paths, Properties e Smart Objects.

  1. Oculte as camadas de pixels. Se restar arte útil, talvez você já tenha formas vetoriais que vale preservar.
  2. Selecione cada camada de texto. Registre família e peso da fonte antes de converter em contornos ou mover o texto.
  3. Abra os Objetos Inteligentes. Um arquivo Illustrator vinculado ou outro arquivo vetorial original é melhor que traçar sua prévia renderizada.
  4. Ative e desative máscaras e efeitos. Decida se a construção editável importa ou apenas a aparência final.
  5. Confira a composição salva. Se o arquivo abre de forma diferente em outra máquina, salve novamente uma cópia verificada antes de usar um fluxo achatado.

A Adobe também documenta exportar camadas selecionadas como arquivos separados. Exportações separadas podem preservar limites úteis entre recursos, mas ainda não criam um SVG que se comporta como a pilha original de camadas PSD.

Escolha o caminho pelo tipo de objeto
Diagrama conceitual de caminhos separados mostrando um documento Photoshop em camadas direcionado a objetos vetoriais preservados ou a pixels achatados traçados como SVG
Dois caminhos: preserve objetos vetoriais existentes quando puder; trace apenas os pixels visíveis que não têm arquivo vetorial original reutilizável.

Caminho 1: preserve o conteúdo vetorial

Use esse caminho para camadas de formas, traçados da caneta, texto editável simples e Objetos Inteligentes cuja arquivo vetorial original ainda existe.

Mova ou exporte um recurso lógico por vez e abra-o no Illustrator, Inkscape ou outro editor SVG. Confira se o resultado contém traçados e grupos, em vez de uma imagem retangular. Se o texto deve continuar editável, abra o SVG em outra máquina que não tenha seu documento Photoshop e confirme que a fonte pretendida carrega. Para logotipos e arquivos de produção, guarde um mestre com texto editável e faça uma cópia de entrega com texto em contornos.

Não achate uma bom arquivo vetorial original só para passá-la por um vetorizador. O traçado redesenha a aparência renderizada, então pode adicionar nós, alterar curvas e transformar texto em contornos aproximados. A geometria nativa é o ponto de partida mais limpo.

Caminho 2: achate a arte visível e depois trace

Use o traçado quando o desenho útil existe apenas como pixels ou quando a aparência visível salva do PSD é a melhor versão original restante. Logotipos chapados, emblemas, ícones, lettering e ilustrações com limites de cor claros costumam servir a esse caminho. Fotos, gradientes sutis, textura de pincel e sombras suaves normalmente não.

Antes de traçar:

  1. Oculte tudo que não deve aparecer no vetor.
  2. Coloque a arte no fundo ou transparência necessários para a entrega.
  3. Confira pequenos interiores de letras, vazados e letras finas no tamanho pretendido de saída.
  4. Salve uma cópia de compatibilidade ou exporte um PNG de alta qualidade quando o PSD não tiver uma visualização mesclada confiável.
  5. Guarde o PSD original. O traçado é um novo recurso de entrega, não um substituto do documento.

Um SVG pode validamente conter uma imagem raster incorporada conforme o modelo de conteúdo incorporado do SVG 2. Um conversor que só muda o formato pode, portanto, colocar os pixels achatados do PSD dentro de um SVG sem traçá-los. Ampliar e examinar o tipo de objeto é como você identifica esse resultado de falso vetor.

Como isso funciona com o PerfectVector

O PerfectVector abre um PSD ou PSB compatível por sua imagem mesclada de compatibilidade salva. O navegador prepara essa imagem visível localmente e pede que você a revise antes de vetorizar. Ele não envia o documento Photoshop original nem afirma reconstruir camadas, máscaras, texto editável, efeitos, traçados, pranchetas ou Objetos Inteligentes. O fluxo de Photoshop para SVG reconstrói os pixels preparados como traçados SVG.

Isso o torna o caminho de traçado, não o de preservação de camadas. Use-o quando a composição salva tem a aparência certa e geometria de traçados editável é mais útil que a construção original do Photoshop. Depois de converter, examine silhueta, regiões de cor, formas das letras, espaço negativo e estrutura de nós. Se o PSD já contém arquivos vetoriais originais limpos, mova esses arquivos diretamente.

Confira o que permaneceu no SVG

Reabra o SVG baixado em um editor vetorial em vez de confiar na primeira prévia.

  • Selecione uma região de cor. Ela deve se comportar como traçado ou forma, não como parte de um retângulo de imagem.
  • Abra o painel Layers ou Objects. Procure uma estrutura de grupos administrável, em vez de esperar os nomes das camadas PSD.
  • Amplie curvas e interiores de letras. Confira trechos achatados, fechamentos acidentais e bordas ruidosas.
  • Mude uma cor de preenchimento. Um traçado real deve mudar de cor sem alterar regiões próximas.
  • Procure um elemento <image> no código quando alguma área continuar pixelando.
  • Importe o SVG no destino real e confira tamanho, fontes, máscaras e efeitos ali.

Se toda a arte visível se comporta como um único objeto, use o diagnóstico de desagrupamento SVG antes de aplicar operações destrutivas de traçado. O arquivo pode ser um traçado composto ou imagem incorporada, em vez de grupo.

Quando o PSD deve continuar sendo PSD

Mantenha o Photoshop como mestre quando ainda precisar de texto editável, camadas de ajuste, máscaras, Objetos Inteligentes, pranchetas, textura fotográfica ou efeitos. SVG é um formato forte de entrega para formas gráficas escaláveis, mas não substitui um documento Photoshop.

Você pode terminar com dois arquivos: o PSD como arquivo original editável e um SVG como recurso de produção. Essa é uma boa entrega. Os dois arquivos preservam tipos diferentes de editabilidade.

Perguntas frequentes

Um PSD pode ser convertido em SVG com todas as camadas intactas? Não de forma confiável. Parte do conteúdo de formas e texto pode ser transferida para SVG, mas máscaras, efeitos, Objetos Inteligentes, camadas de ajuste, nomes de camadas e camadas de pixels do Photoshop não têm equivalentes SVG diretos. Preserve primeiro os objetos vetoriais nativos e trate o restante como aparência renderizada.

Por que meu resultado de PSD para SVG tem apenas uma camada? O conversor provavelmente usou uma composição achatada ou incorporou uma imagem raster. Um objeto SVG também pode ser um traçado composto ou grupo; por isso, examine o tipo de objeto antes de presumir que o arquivo continua raster.

Salvar um arquivo Photoshop como SVG vetoriza os pixels? Não. SVG pode conter imagens raster. Uma exportação de formato pode colocar pixels dentro de um contêiner SVG sem traçá-los. Confira se a arte é selecionada como traçados e continua editável no nível de objetos.

Devo converter texto em contornos antes de exportar SVG do Photoshop? Converta uma cópia de entrega em contornos quando a aparência deve permanecer fixa e a edição de texto já não é necessária. Guarde um mestre com texto editável se a redação ou tradução puder mudar. Converter em contornos não preserva edição de fonte; transforma letras em traçados.

O PerfectVector recupera camadas do Photoshop a partir de um PSD? Não. O PerfectVector usa a imagem mesclada de compatibilidade salva do arquivo compatível e traça essa imagem visível como traçados. Ele não reconstrói a pilha original de camadas do Photoshop nem os recursos editáveis do documento.

Fontes

  1. Adobe — Criar recursos de imagem a partir de camadas — Documenta a geração de recursos SVG e o achatamento de recursos de grupos de camadas.
  2. Adobe — Exportar camadas como arquivos — Documenta o comportamento atual de exportação por camada.
  3. Adobe — Desenhar formas e traçados no Photoshop — Define as ferramentas de formas, caneta e traçados do Photoshop.
  4. W3C — Conteúdo incorporado do SVG — Explica por que um SVG ainda pode conter dados de imagem raster.
  5. PerfectVector — Photoshop para SVG — Descreve o fluxo compatível de composição salva e seus limites de recuperação de camadas.

Se a composição salva é a versão original de que você precisa, revise-a no conversor de Photoshop para SVG, vetorize e reabra o SVG para confirmar que as regiões importantes são traçados.

Mais do blog

Transforme seu arquivo de imagem em um
SVG editável