Convertir TTF a SVG

Esta página convierte una fuente TrueType en una fuente SVG: un único archivo XML en el que cada carácter es un elemento <glyph> con su contorno escrito como datos de trazado SVG. Sirve para herramientas de fuentes de íconos y editores de fuentes, pero no es lo mismo que una imagen de su texto.

o suelte aquí archivos TTF, OTF, WOFF … ·

Máx. 95 MB por archivo· Hasta 20 archivos· Se borran a los 30 minutos

Salida

Convertir a

Los archivos se procesan en nuestros servidores y se borran a los 30 minutos.

Cómo usar esta herramienta

1
Suba el TTF
Agregue uno o varios archivos .ttf, hasta 20 por lote y 95 MB cada uno. Funcionan tanto las fuentes de íconos como las de texto.
2
Deje Fuente SVG como salida
Convertir a está en Fuente SVG. El hinting no se aplica a la salida SVG, así que la opción desaparece; Nombre de la familia en Opciones avanzadas sigue permitiendo cambiar el nombre de la fuente.
3
Convierta a SVG
Pulse Convertir a SVG y descargue el archivo .svg. Ábralo en un editor de texto, Inkscape o FontForge para acceder a los trazados de los glifos.

Fuente SVG frente a imagen SVG de un texto

Al buscar TTF a SVG aparecen dos objetivos distintos mezclados. Uno es una fuente SVG: el formato de fuente definido en la Recomendación SVG 1.0 del W3C de 2001, donde un elemento <font> contiene un <glyph> por carácter con un valor Unicode, un ancho de avance y el contorno como trazado. El otro es una imagen SVG de un texto: las letras de un logotipo o de un nombre ya compuestas en una línea y guardadas como formas. Este convertidor produce lo primero. Si lo que tiene es una imagen de logotipo y no una fuente, convertir PNG a SVG la vectoriza en trazados.

Convertir un contorno TrueType en datos de trazado SVG no altera la forma. Los trazados SVG admiten las mismas curvas cuadráticas que usa TrueType, así que cada contorno se escribe tal cual. Lo que no se conserva es todo lo que rodea a los contornos: las instrucciones de hinting, las funciones OpenType más allá del kerning simple y las tablas binarias que los sistemas operativos necesitan para instalar una fuente. Una fuente SVG no se puede instalar en Windows ni en macOS.

Cómo es un archivo de fuente SVG

Ejemplo abreviado del marcado de una fuente 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>

Lo que genera esta página: un archivo, un <glyph> por carácter, en unidades de fuente con el eje y hacia arriba.

Se abre en FontForge, Inkscape y herramientas de fuentes de íconos
No se puede instalar en una computadora
Las versiones actuales de Chrome, Edge y Firefox no la cargan

Un OTF o TTF normal con una tabla SVG adicional que guarda glifos en color y por capas.

Se instala como cualquier fuente
Se usa para emojis y letras multicolor
La compatibilidad varía según la app y el navegador

De dónde vinieron las fuentes SVG y qué fue de ellas

SVG 1.0 define el elemento font: 2001
último Safari del iPhone que necesitaba fuentes web SVG: iOS 4.1
elimina las fuentes SVG en 2014: Chrome 38
suprime el capítulo de fuentes: SVG 2

TTF

Fuente TrueType

TTF es el formato de fuentes TrueType, desarrollado por Apple a finales de los años ochenta, publicado en 1991 y luego licenciado a Microsoft. Define los contornos de los glifos con curvas cuadráticas e incluye instrucciones de hinting que hacen que el texto se vea nítido en pantalla. TrueType es compatible con todos los sistemas operativos de escritorio, procesadores de texto y aplicaciones de diseño. Carece de algunas funciones tipográficas avanzadas de OpenType y ocupa más que los formatos de fuentes web.

Compresión: Sin pérdida
Transparencia: –
Animación: –
Presentado en: 1991 · Apple

Convertidor de TTF

SVG

Scalable Vector Graphics

SVG es un formato vectorial basado en XML estandarizado por el W3C en 2001. En lugar de píxeles, describe formas, trazados y texto, por lo que se mantiene nítido a cualquier tamaño y suele ocupar muy poco en logotipos e iconos. Admite transparencia, estilos CSS, scripts y animación, y todos los navegadores lo muestran de forma nativa. SVG no es adecuado para fotografías, y las ilustraciones complejas pueden tardar en renderizarse. Illustrator, Inkscape, Figma y los navegadores pueden abrirlo y editarlo.

Compresión: –
Transparencia: Sí
Animación: Sí
Presentado en: 2001 · W3C

Convertidor de SVG

Pasar de TTF a SVG escribe el contorno de cada glifo como datos de trazado SVG editables dentro de una fuente SVG, que usan las herramientas de fuentes de íconos, los editores de fuentes y los kits webfont antiguos; no es una forma de cargar fuentes en páginas web modernas.

Preguntas frecuentes sobre TTF a SVG

¿Se puede usar hoy una fuente SVG en CSS @font-face?

No en la mayoría de los navegadores. Chrome eliminó la compatibilidad con fuentes SVG en la versión 38, en 2014, y Firefox e Internet Explorer nunca la incorporaron. Para un sitio web, convierta el TTF con TTF a WOFF2.

¿Por qué los glifos de la fuente SVG salen al revés al pegarlos en un dibujo?

Las fuentes SVG usan el sistema de coordenadas de la propia fuente, en el que el eje y apunta hacia arriba desde la línea de base, mientras que los dibujos SVG normales cuentan y hacia abajo desde arriba. Voltee el trazado en vertical, por ejemplo con una transformación scale(1,-1), y se verá bien.

¿Cómo convierto texto en trazados SVG para Cricut o una cortadora láser?

Instale el TTF, escriba sus palabras en Inkscape o Illustrator y convierta el texto en contornos: Trayecto › Objeto a trayecto en Inkscape, Texto › Crear contornos en Illustrator. Guarde el resultado como SVG. Una fuente SVG guarda cada letra por separado y no la compone como palabras.

¿Las fuentes SVG conservan el kerning y las ligaduras?

Solo en parte. El formato de fuente SVG puede guardar pares de kerning con elementos hkern y glifos de varios caracteres, pero no tiene equivalente a las tablas de funciones OpenType como versalitas, alternativas o reglas contextuales. Conserve el TTF si las necesita.

¿La salida en fuente SVG sirve para fuentes de íconos?

Sí, ese es hoy su uso principal. Herramientas de fuentes de íconos como IcoMoon importan fuentes SVG, lo que permite sacar íconos de una fuente antigua, editarlos y crear un nuevo conjunto o exportar cada ícono como su propio SVG.