Por que a fonte do SVG muda ao exportar ou importar

A fonte do seu SVG muda porque texto editável em SVG geralmente informa o nome de uma fonte; não carrega automaticamente as formas das letras dentro do arquivo. Se o navegador, editor, software de corte ou computador do destinatário não puder usar a fonte indicada, escolherá uma alternativa. Larguras diferentes dos glifos mudam quebras de linha, alinhamento e a posição da arte próxima.

Existem duas estratégias confiáveis de entrega. Mantenha texto editável quando o destino precisar de palavras selecionáveis, pesquisáveis ou editáveis e você puder fornecer a fonte corretamente. Converta texto em contornos vetoriais quando a aparência precisar ficar fixa e não for mais necessário editar as palavras. Nos dois casos, guarde um arquivo mestre editável separado.

Para exportação automatizada de PNG, carregue explicitamente arquivos de fonte no resvg e compare as letras renderizadas com o original antes da entrega.

Para figuras de documentos, compare ilustrações SVG e rótulos compostos no LaTeX. Separar a geometria do desenho do texto dos rótulos permite que o documento componha as palavras enquanto você mantém o arquivo mestre SVG.

Primeiro, determine se o SVG ainda contém texto

A extensão sozinha não responde isso. SVG representa lettering de pelo menos duas maneiras comuns:

<text font-family="Example Sans" font-weight="600">Sample</text>

Isso é texto editável. O SVG armazena caracteres e instruções de estilo. Um renderizador precisa encontrar uma fonte correspondente para transformar esses caracteres em glifos visíveis.

Texto convertido em contornos se parece mais com isto:

<path d="M ... Z" />

Aqui, cada letra virou geometria vetorial. O destinatário não precisa da fonte, mas a palavra deixa de ser uma sequência comum de texto editável.

Você pode conferir sem entender toda a marcação:

1. faça uma cópia do SVG;
2. abra a cópia em um editor de texto simples;
3. procure <text e <tspan>;
4. procure o nome visível da fonte;
5. se não encontrar, inspecione se as letras são construídas com elementos <path>.

Em um editor vetorial, use a ferramenta de texto e clique em uma letra. Um cursor de texto piscando indica texto editável. Nós ao redor de cada glifo indicam contornos.

Três estados da tipografia

Causa 1: a fonte pretendida não está instalada

O atributo SVG font-family é uma lista de nomes de famílias em ordem de prioridade. Como explica a referência de font-family em SVG da MDN, o renderizador escolhe nessa lista. Se não encontrar a primeira família, passa à próxima e finalmente a uma família genérica como sans-serif ou serif.

Isso costuma acontecer quando:

• o designer usou uma fonte local que o destinatário não tem;
• uma fonte foi ativada por um serviço de assinatura em apenas um computador;
• o SVG passou de um editor desktop a celular, tablet, aplicativo de corte ou pacote de escritório;
• o nome de família dentro da fonte difere do nome do arquivo ou do nome mostrado na pasta de download;
• só um estilo está instalado, enquanto o SVG solicita outro peso ou versão em itálico.

Instalar “algo parecido” não restaura o layout. Duas fontes sem serifa podem ter larguras de letras, ascendentes, kerning e métricas de linha de base diferentes. A substituta pode parecer próxima e ainda deslocar uma palavra centralizada da posição pretendida. Quando a fonte correta estiver disponível, o exemplo de alinhamento vertical de texto SVG ajuda a separar o posicionamento da linha de base da caixa de texto e da centralização visual.

Causa 2: o SVG espera uma fonte web que não carregou

Um SVG dentro de uma página web pode receber fontes do CSS da página. Também pode incluir um bloco de estilo com uma regra @font-face; SVG 2 exige suporte a fontes baixáveis pelo modelo CSS Fonts. Esse arranjo falha quando a URL da fonte está errada, o arquivo não foi publicado, o acesso é bloqueado, o formato solicitado não é compatível ou o SVG é aberto sozinho em vez de na página que fornecia os estilos.

Use as ferramentas de desenvolvedor do navegador e recarregue a página. No painel Network, filtre arquivos de fonte e procure uma requisição que falhou. Nos estilos computados do elemento <text>, confirme qual fonte realmente foi renderizada, em vez de confiar no nome declarado.

Um SVG que só funciona incorporado em um site não é necessariamente um arquivo de entrega autossuficiente. Teste o SVG exportado diretamente em uma janela privada e em outro dispositivo. Isso revela dependências ocultas de um serviço de fontes com login, fonte em cache ou folha de estilos do site.

Incorporar um recurso de fonte pode tornar um SVG web mais portátil, mas aumenta o arquivo, pode enfrentar limites de suporte específicos dos aplicativos e precisa ser permitido pela licença. Confira a licença real, em vez de presumir que uma licença desktop autoriza redistribuir os dados da fonte.

Causa 3: a família ou o peso não corresponde exatamente

A correspondência de fontes em CSS usa mais que o nome visível da família. O SVG pode solicitar:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Se os arquivos disponíveis contêm apenas pesos 400 e 700, o renderizador pode sintetizar um peso ou escolher uma versão próxima. Fontes variáveis acrescentam eixos e nomes de instâncias que um aplicativo importador pode interpretar de outro modo. Software antigo de design ou corte pode ignorar alguns recursos OpenType, ligaturas ou configurações de variação.

Confira o documento original e o SVG lado a lado:

• nome exato da família;
• estilo e peso numérico;
• espaçamento entre letras;
• maiúsculas e minúsculas e os caracteres reais;
• recursos OpenType como ligaturas;
• valores dos eixos de fonte variável;
• comportamento de texto em traçado ou texto vertical.

Não corrija uma incompatibilidade de família redimensionando cada palavra manualmente. Isso esconde o sintoma e mantém os glifos errados.

Causa 4: a exportação preservou texto, mas o importador trata de outro modo

O layout de texto SVG não é idêntico a um documento de editoração. Um exportador pode usar elementos <tspan> aninhados, coordenadas individuais, text-anchor ou <textPath>. O aplicativo importador pode achatar, reagrupar ou reinterpretar esses recursos. Se você reconstrói um emblema, o passo a passo de texto editável em traçado SVG separa emblema, curva-guia e lettering editável para testar cada parte.

Para inserir em documentos, siga o fluxo de figuras SVG e arte inserida no texto no Typst. Manter legendas como texto nativo do documento permite conferir as letras da ilustração separadamente da numeração das figuras e da tipografia dos parágrafos.

A documentação atual de exportação SVG da Adobe observa que texto em traçado pode não manter a mesma aparência em todo visualizador SVG. Também distingue a saída com fonte editável de Convert To Outlines, que transforma tipografia em traçados vetoriais para preservar a aparência.

Se a fonte correta está presente, mas a posição ainda muda, inspecione a estrutura em vez de trocar de fonte:

1. compare a renderização no navegador com o editor original;
2. confira se cada caractere tem sua própria posição x;
3. inspecione transformações aninhadas no grupo de texto;
4. veja se o importador removeu text-anchor, kerning ou configurações de linha de base;
5. teste uma cópia com texto horizontal simples para isolar o comportamento em traçado.

Para logotipo, emblema ou título de uma linha cuja aparência importa mais que a edição, contornos geralmente são o formato de entrega mais seguro.

Causa 5: você converteu em contornos e esperava continuar editando texto

Texto em contornos não sofre substituição de fonte porque não referencia mais uma fonte. Ainda pode surpreender ao importar:

• letras podem chegar como traçados compostos, em vez de uma palavra editável;
• espaços internos podem ser preenchidos se um traçado composto for liberado;
• muitos glifos podem estar agrupados;
• um aplicativo de destino limitado pode unir ou simplificar traçados;
• o arquivo pode ficar maior que a versão com texto editável.

Isso são mudanças de geometria e possibilidade de edição, não de fonte. Se as formas correspondem ao original, a exportação em contornos cumpriu seu papel.

Sempre guarde dois arquivos:

• Arquivo mestre editável: texto editável, informações originais de fonte, camadas nomeadas e formato do aplicativo de origem.
• Cópia de entrega: SVG, EPS ou PDF com texto em contornos para uma entrega em que a aparência é crítica.

Nunca converta o único arquivo mestre em contornos. Uma correção ortográfica, tradução ou novo slogan vira redesenho manual demorado quando o texto é feito de traçados.

Qual solução usar?

O destino determina a troca. Texto editável preserva significado e edição. Contornos preservam aparência. Um arquivo não maximiza os dois sem carregar dependências extras ou dados de origem.

Um fluxo seguro de conversão em contornos

Para entrega em que a aparência é crítica:

1. salve o documento original com texto editável;
2. duplique e acrescente -outlined ou -delivery ao nome do arquivo;
3. selecione o texto e use Create Outlines, Convert to Curves, Object to Path ou equivalente;
4. inspecione buracos nas letras e formas sobrepostas;
5. exporte SVG;
6. abra no navegador e em um segundo editor;
7. compare no tamanho normal e em zoom alto com o original;
8. envie o arquivo em contornos e arquive o arquivo mestre editável e as informações de licença da fonte.

Não rasterize o texto apenas para evitar uma fonte ausente. Um PNG dentro de SVG evita substituição, mas elimina a geometria redimensionável de traçados. Converter em contornos mantém vetores reais.

Se o único logotipo restante é uma imagem raster

Às vezes, nem o texto editável nem o arquivo mestre em contornos sobreviveram. Você pode ter apenas um PNG pequeno, JPG ou captura do logotipo. O guia de decisão sobre vetorização de logotipos explica quando vetorizar esse raster e quando redesenhar. Instalar fontes não repara um raster, e identificar uma tipografia semelhante pode não reproduzir modificações personalizadas nas letras.

É aqui que o PerfectVector pode ajudar, dependendo do caso: vetorizar o logotipo pode reconstruir lettering raster visível como formas vetoriais. O resultado é arte em contornos, não texto editável recuperado. Não identifica a fonte original, não restaura kerning nem permite digitar as palavras novamente. Use para recuperar a geometria visível do logotipo e mantenha essa reconstrução separada de qualquer novo arquivo mestre com texto composto.

Para uma estratégia mais ampla de entrega, o guia de formatos de arquivo de logotipo explica quais formatos de arquivo mestre e de entrega manter.

Perguntas frequentes

Por que meu SVG usa outra fonte em outro computador? Provavelmente contém texto editável que nomeia uma fonte indisponível no outro computador. O renderizador substitui por outra família da lista de alternativas, mudando formas dos glifos, largura, espaçamento e às vezes alinhamento.

Um SVG incorpora automaticamente sua fonte? Não. Um SVG pode nomear uma fonte, recebê-la do CSS da página ou incluir um recurso de fonte, mas texto editável comum não empacota automaticamente o arquivo da fonte desktop. Disponibilidade, suporte do navegador e licença ainda precisam ser tratados.

Devo converter texto SVG em contornos? Converta uma cópia de entrega quando a aparência precisar ficar fixa, especialmente para logotipos, lettering decorativo, impressão e software de produção com máquinas. Mantenha texto editável no arquivo mestre editável quando palavras, acessibilidade, busca ou localização importarem.

Por que texto em contornos deixou de ser editável depois de importar? A conversão substitui caracteres por traçados vetoriais. O destinatário edita nós e formas, mas não pode inserir um cursor de texto ou mudar a fonte. Isso é esperado, então preserve e compartilhe um arquivo mestre com texto editável quando futuras mudanças forem necessárias.

O PerfectVector recupera a fonte original de um logotipo raster? Não. O PerfectVector pode reconstruir lettering raster visível como contornos vetoriais, mas não identifica a fonte original nem restaura caracteres editáveis, kerning e configurações de fonte. Use quando o objetivo for recuperar a geometria visível do logotipo.

Fontes

1. W3C — texto SVG — conteúdo editável <text> e <tspan>, propriedades de fonte, layout e suporte a fontes baixáveis.
2. W3C — CSS Fonts Module Level 3 — correspondência de font-family, escolha de versões, famílias ausentes e alternativas do sistema.
3. MDN — SVG font-family — listas prioritárias de famílias e alternativas genéricas em SVG.
4. Adobe Illustrator — criar texto em contornos — conversão de texto em traçados e perda resultante da edição como texto.
5. Adobe Illustrator — salvar arte — exportação de texto SVG, contornos e ressalvas de compatibilidade de texto em traçado.

Quando a perda do arquivo mestre deixa apenas um logotipo raster, reconstrua seu lettering visível como contornos vetoriais com o PerfectVector e confira as formas em um segundo editor. Se ainda há texto editável, corrija a dependência da fonte ou converta uma cópia de entrega em contornos, em vez de vetorizar novamente.