Converter TTF para SVG

Esta página transforma uma fonte TrueType em uma fonte SVG: um único arquivo XML em que cada caractere é um elemento <glyph> com o contorno escrito como dados de caminho SVG. Isso é útil para ferramentas de fontes de ícones e editores de fontes, mas não é o mesmo que uma imagem do seu texto.

ou solte arquivos TTF, OTF, WOFF … aqui ·

Até 95 MB por arquivo· Até 20 arquivos· Apagados após 30 minutos

Saída

Converter para

Os arquivos são processados em nossos servidores e apagados após 30 minutos.

Como usar esta ferramenta

1
Envie o TTF
Adicione um ou mais arquivos .ttf, até 20 por lote e 95 MB cada. Fontes de ícones e fontes de texto funcionam.
2
Mantenha fonte SVG como saída
Converter para já vem definido como fonte SVG. O hinting não se aplica à saída SVG, então a opção desaparece; Nome da família em Configurações avançadas continua permitindo renomear a fonte.
3
Converta para SVG
Clique em Converter para SVG e baixe o arquivo .svg. Abra-o em um editor de texto, no Inkscape ou no FontForge para acessar os caminhos dos glifos.

Fonte SVG x imagem SVG de texto

Quem pesquisa TTF para SVG encontra dois objetivos diferentes misturados. Um é a fonte SVG: o formato de fonte definido na Recomendação SVG 1.0 do W3C, de 2001, em que um elemento <font> contém um <glyph> por caractere, com valor Unicode, largura de avanço e o contorno como caminho. O outro é uma imagem SVG de um texto, as letras de um logotipo ou de um nome já compostos em uma linha e salvos como formas. Este conversor produz o primeiro tipo. Se o que você tem é uma imagem de logotipo, e não uma fonte, PNG para SVG a vetoriza em caminhos.

Converter um contorno TrueType em dados de caminho SVG não perde nada na forma. Os caminhos SVG aceitam as mesmas curvas quadráticas que o TrueType usa, então cada contorno é gravado como está. O que não sobrevive é tudo o que cerca os contornos: instruções de hinting, recursos OpenType além do kerning simples e as tabelas binárias de que os sistemas operacionais precisam para instalar uma fonte. Uma fonte SVG não pode ser instalada no Windows nem no macOS.

Como é um arquivo de fonte SVG

Exemplo resumido da marcação de uma fonte SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="MarcaSans" horiz-adv-x="1229">
      <font-face font-family="Marca Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

O que esta página gera: um arquivo, um <glyph> por caractere, em unidades da fonte e com o eixo y apontando para cima.

Abre no FontForge, no Inkscape e em ferramentas de fontes de ícones
Não pode ser instalada no computador
Não é carregada pelas versões atuais do Chrome, Edge ou Firefox

Uma OTF ou TTF comum com uma tabela SVG extra que guarda glifos coloridos e em camadas.

Instalada como qualquer fonte
Usada em emojis e letras multicoloridas
O suporte varia conforme o aplicativo e o navegador

De onde vieram as fontes SVG e o que aconteceu com elas

O SVG 1.0 define o elemento font: 2001
último Safari do iPhone que precisava de fontes web SVG: iOS 4.1
remove as fontes SVG em 2014: Chrome 38
elimina o capítulo de fontes: SVG 2

TTF

Fonte TrueType

TTF é o formato de fonte TrueType, desenvolvido pela Apple no fim dos anos 1980, lançado em 1991 e depois licenciado para a Microsoft. Ele define os contornos dos glifos com curvas quadráticas e inclui instruções de hinting que deixam o texto nítido na tela. O TrueType é suportado por todos os sistemas operacionais de desktop, processadores de texto e aplicativos de design. Faltam a ele alguns recursos tipográficos avançados do OpenType, e ele é maior que os formatos de fonte para a web.

Compressão: Sem perdas
Transparência: –
Animação: –
Lançamento: 1991 · Apple

Conversor de TTF

SVG

Scalable Vector Graphics (SVG)

SVG é um formato vetorial baseado em XML, padronizado pelo W3C em 2001. Em vez de pixels, ele descreve formas, caminhos e texto, por isso fica nítido em qualquer tamanho e costuma ser minúsculo para logotipos e ícones. Ele aceita transparência, estilo com CSS, scripts e animação, e todos os navegadores o renderizam nativamente. O SVG não é adequado para fotografias, e ilustrações complexas podem ficar lentas para renderizar. Illustrator, Inkscape, Figma e os navegadores conseguem abri-lo e editá-lo.

Compressão: –
Transparência: Sim
Animação: Sim
Lançamento: 2001 · W3C

Conversor de SVG

Converter TTF para SVG grava o contorno de cada glifo como dados de caminho SVG editáveis dentro de uma fonte SVG, usada por ferramentas de fontes de ícones, editores de fontes e kits antigos de webfonts; não serve para carregar fontes em páginas web modernas.

Perguntas frequentes sobre TTF para SVG

Ainda dá para usar uma fonte SVG no @font-face do CSS?

Na maioria dos navegadores, não. O Chrome removeu o suporte a fontes SVG na versão 38, em 2014, e o Firefox e o Internet Explorer nunca o adotaram. Para um site, converta o TTF com TTF para WOFF2.

Por que os glifos ficam de cabeça para baixo quando colo em um desenho?

As fontes SVG usam o sistema de coordenadas da própria fonte, em que o eixo y aponta para cima a partir da linha de base, enquanto os desenhos SVG comuns contam o y para baixo a partir do topo. Inverta o caminho na vertical, por exemplo com a transformação scale(1,-1), e ele aparece na posição correta.

Como transformar texto em caminhos SVG para Cricut ou cortadora a laser?

Instale o TTF, digite o texto no Inkscape ou no Illustrator e converta-o em contornos: Caminho › Objeto para caminho no Inkscape, Texto › Criar contornos no Illustrator. Salve como SVG. Uma fonte SVG guarda cada letra separadamente e não está organizada em palavras.

Fontes SVG mantêm o kerning e as ligaturas?

Só em parte. O formato de fonte SVG pode guardar pares de kerning com elementos hkern e glifos de vários caracteres, mas não tem equivalente às tabelas de recursos OpenType, como versaletes, alternativas ou regras contextuais. Se precisar disso, mantenha o TTF.

Fonte SVG serve para fontes de ícones?

Sim, esse é hoje o principal uso. Ferramentas de fontes de ícones, como o IcoMoon, importam fontes SVG, o que permite extrair ícones de uma fonte de ícones antiga, editá-los e montar um novo conjunto ou exportar cada ícone como um SVG separado.