Base de conocimientos sobre fuentes SVG | Aspose.Font

Introducción a la fuente SVG

Para explicar qué es la fuente svg, primero aprendamos el término svg en común. Del producto llamado Aspose.SVG entendemos que Scalable Vector Graphics (SVG) es un lenguaje XML para crear gráficos vectoriales bidimensionales y gráficos vectoriales/rasterizados mixtos. El documento SVG es un archivo de texto que describe imágenes como primitivas geométricas: líneas, curvas, formas, texto, etc. Los objetos vectoriales se construyen y almacenan como un conjunto de comandos, números y fórmulas, no en una cuadrícula de píxeles como en los mapas de bits.

La fuente SVG es un tipo de fuente que se utiliza en imágenes SVG y como cualquier otro objeto del formato, se puede escalar sin perder calidad. Puede incrustar fuentes directamente en la imagen, lo que facilita la creación de gráficos con tipografía personalizada.

Una fuente SVG es una fuente que se define mediante XML, al igual que una imagen SVG. Es una colección de formas, líneas y curvas que definen los caracteres de la fuente. La fuente también se puede diseñar y manipular usando CSS, por lo tanto, puede usar las mismas técnicas para codificar texto en una imagen SVG que lo haría con cualquier otro elemento SVG.

Ventajas y desventajas de la fuente SVG

La siguiente tabla muestra los pros y los contras de las fuentes SVG, para que puedas decidir si usarlas en tu proyecto o no.

Pros	Cons
Escalabilidad: Las fuentes SVG se pueden escalar a cualquier tamaño sin perder calidad, por lo que son perfectas para usar en cualquier diseño responsivo.	Compatibilidad con navegadores: La mayoría de los navegadores web modernos admiten fuentes SVG, pero algunos navegadores más antiguos pueden no hacerlo.
Tamaño de archivo más pequeño: En comparación con las fuentes web, las fuentes SVG tienen un tamaño de archivo más pequeño, lo que es crucial si desea mejorar el tiempo de carga.	Compatibilidad limitada con editores: No todos los editores de texto y software de diseño admiten fuentes SVG.
Mejor accesibilidad: Las fuentes SVG se consideran más accesibles para los usuarios con discapacidades. Pueden ser leídas fácilmente por lectores de pantalla y permiten incluir descripciones de texto alternativas.	Complejidad: Las fuentes SVG son difíciles de trabajar y editar porque requieren más conocimientos técnicos.
Tipografía avanzada: Las fuentes SVG incluyen funciones tipográficas avanzadas como ligaduras, interletraje, caracteres alternativos, etc.	Capacidad de búsqueda: Las fuentes SVG pueden afectar el SEO de un sitio web porque los motores de búsqueda no pueden buscarlas.
Estilo y animación: Diseñe o anime fácilmente fuentes SVG dentro de CSS y JavaScript.	Opciones de fuente limitadas: Hay menos opciones de fuente disponibles en formato SVG en comparación con las fuentes True Type.
Mejor compatibilidad con símbolos no latinos: Debido a la escalabilidad, las fuentes SVG se pueden usar para dibujar fuentes que tienen una gran cantidad de caracteres o requieren representaciones complejas como jeroglíficos, letras árabes o hindi.

¿SVG o WOFF?

Las fuentes SVG eran populares en los primeros días de SVG, pero ahora las fuentes web las reemplazaron en la mayoría de los casos, ya que son más flexibles y ampliamente compatibles con todos los navegadores modernos. De todos modos, todavía puedes encontrar fuentes SVG en versiones anteriores de Internet Explorer, por ejemplo. Entonces, comparemos estas fuentes.

Web Open Font Format o WOFF es un formato para entregar archivos de fuentes a través de Internet, diseñado para cubrir las necesidades del mercado de aplicaciones web. El formato WOFF se creó para proporcionar una forma más eficiente de entregar fuentes web en comparación con otros formatos de archivo, como TrueType y OpenType. El formato comprime los datos de fuentes para reducir el tamaño del archivo para descargar y utilizar páginas web más rápido. También incluye metadatos que proporcionan información sobre la fuente, como la familia de fuentes, el estilo y la información de derechos de autor.

SVG es un formato de gráficos vectoriales que se utiliza para crear y mostrar imágenes en la web. Es un formato basado en texto que se puede editar y manipular fácilmente, por lo que es una buena opción a la hora de crear logotipos, iconos y otros gráficos.

Entonces, si compara estos formatos según su propósito, si desea crear gráficos para usar en la web, debe usar SVG. Si necesita una fuente para usar en un sitio web, debe usar WOFF.

Ambos formatos pueden interactuar con CSS, pero los archivos WOFF se incrustan en páginas web utilizando la regla de fuente en CSS. Esto permite a los diseñadores web utilizar fuentes personalizadas en sus sitios web sin depender de que los usuarios tengan la fuente instalada en sus dispositivos. Esto brinda una mayor flexibilidad y una experiencia visual consistente sin importar qué navegador utilice el usuario.

¿SVG o TTF?

Si elige entre TTF o SVG, primero debe aclarar los requisitos del proyecto porque generalmente se usan para casos diferentes. Estas fuentes son bastante similares ya que ambas proporcionan texto de alta calidad, escalable y fácilmente legible.

True Type Font Format es el formato de fuente más conocido para diseño web e impreso y es compatible con la mayoría de los sistemas operativos y dispositivos. TTF también es bastante fácil de usar e implementar. Este es un formato vectorial, pero utiliza la herramienta de instrucciones desarrollada que permite que las fuentes tengan una calidad similar a la de las fuentes de mapa de bits y algunas fuentes lo consideran rasterizado. SVG es un formato de fuente vectorial. Almacena la fuente como un conjunto de trazados, escalados a cualquier tamaño sin pérdidas. Permite que dichas fuentes le proporcionen un archivo de fuente más pequeño, como ya se mencionó en la comparación de SVG a WOFF. SVG también es una mejor opción que True Type para personas discapacitadas, ya que ofrece una mejor legibilidad.

En resumen, TTF es el formato más admitido y es el mejor para la mayoría de los casos, pero SVG es una excelente opción si necesita escalar el texto, desea que el texto sea accesible o necesita funciones tipográficas avanzadas.

¿Dónde utilizar fuentes SVG?

Elija el formato de fuente SVG si se centra en:

• Diseños responsivos: Las fuentes escalables, como SVG, son buenas para estos problemas.
• Accesibilidad: Como se mencionó anteriormente, las fuentes SVG pueden proporcionar una mejor legibilidad.
• Tipografía avanzada: Las funciones como ligaduras, interletraje y caracteres alternativos se incluyen en las fuentes SVG.
• Estilo y animación: Las fuentes SVG brindan mayor flexibilidad para el diseño y la animación.
• Escrituras no latinas: Puede utilizar fuentes SVG para representar fuentes que tienen una gran cantidad de caracteres complejos de representar.
• Diseño de impresión: SVG es útil en ciertos proyectos de diseño de impresión donde el tamaño de un archivo es crucial, pero es necesario utilizar imágenes de alta resolución y tipografía compleja al mismo tiempo.
• Trabajar con gráficos SVG: Como las fuentes SVG en común son parte de la imagen gráfica SVG y se representan utilizando el lenguaje XML, puede editar manualmente o con la ayuda de una aplicación especial, los glifos de fuentes y ver inmediatamente los resultados (texto). ver cambios en toda la imagen SVG.

Es importante tener en cuenta que es posible que las fuentes SVG no sean la mejor opción para todos los proyectos. Es mejor agregar también fuentes de un formato diferente como opción alternativa.

¿Las fuentes SVG son gratuitas?

Existen muchas bibliotecas de fuentes de código abierto con una amplia variedad de fuentes SVG gratuitas bajo licencias de código abierto como Google Fonts, Open Font Library, etc. Sin embargo, no todas las fuentes SVG son de uso gratuito. Algunos diseñadores venden licencias y las condiciones de la licencia pueden variar. Algunas fuentes pueden tener una versión gratuita con un conjunto limitado de funciones y una versión paga con más opciones. Verifique la licencia y los términos de uso de una fuente antes de usarla en un proyecto. Al hacer esto, estará seguro de que su uso es gratuito o de que tiene los permisos necesarios.

Hay cuatro opciones a tener en cuenta para la concesión de licencias de fuentes:

1. Permite incrustar y cargar temporalmente fuentes en otros sistemas. Con dicha licencia puede editar fuentes, incluido el formato del texto nuevo, y guardar los cambios.
2. Permite incrustar la fuente de manera temporal, lo que permite cargar la fuente en otros sistemas. Con dicha licencia, puede editar y formatear texto nuevo utilizando la fuente incrustada y guardar los cambios.
3. Permite incrustar la fuente de manera permanente, lo que permite que la fuente sea instalada y utilizada por sistemas remotos u otros usuarios.
4. Permite incrustar la fuente de manera temporal con el fin de visualizar o imprimir el documento en otros sistemas.

archivo de fuente SVG

Las fuentes SVG utilizan sintaxis XML y se pueden incrustar directamente en documentos SVG o hacer referencia a ellos como archivos externos. Su estructura consta de los siguientes componentes:

• Declaración XML al principio del archivo. Especifica la versión utilizada de XML y la información de codificación.
• Elemento de fuente. Contiene información común sobre la fuente como nombre de fuente, familia, estilo, etc.
• Elemento glifo. Define caracteres individuales de la fuente. Cada glifo tiene un identificador único, un número Unicode y un conjunto de trazados o formas que componen el carácter.
• Elemento tipográfico. Se utiliza para definir metadatos de fuente ( metrics) como su ascenso, descenso, posición de línea base y cuadro delimitador de glifo.
• Elemento de glifo faltante. Define un glifo predeterminado. Este glifo se utilizará si el necesario no se encuentra en la fuente.
• Elementos opcionales como font-face-src, que define el origen del archivo de fuente, y font-face-uri, que proporciona un URI para la fuente.

A continuación se muestra un ejemplo de código de la estructura básica de un archivo de fuente SVG:

 
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">
      <font id="MyFont" horiz-adv-x="1000">
        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
      </font>
    </svg>

Expliquemos el ejemplo del código.

Primero, vemos la declaración XML común, que define el número de versión XML y la codificación. La codificación UTF-8 es la codificación más común para la World Wide Web desde 2008.

El elemento principal (etiqueta) en este XML es el elemento “svg” que define un fragmento de documento SVG. El atributo xmlns del elemento “svg” hace referencia al espacio de nombres xml, definido en la especificación Scalable Vector Graphics (SVG) 1.0.

La descripción de la fuente en sí comienza desde el elemento <font>. Este elemento incluye 2 atributos:

Un atributo “id” identifica de forma única la fuente y se utiliza cuando es necesario para hacer referencia a la fuente desde un archivo SVG externo. El atributo horiz-adv-x determina el avance horizontal predeterminado después de representar un glifo en orientación horizontal (consulte métricas de glifos para obtener más información). Si no se especifica este atributo, el valor predeterminado será 1000.

El elemento “font-face” en este ejemplo define características comunes de la fuente como:

• Familia de fuentes - un grupo de tipos de letra relacionados y similares por diseño.
• Unidades por em: número de unidades de coordenadas en el cuadrado de em, el tamaño de la cuadrícula de diseño en la que se colocan los glifos.
• Ascenso, descenso - longitud desde el punto de origen en la línea de base hasta el punto más alto/más bajo del glifo respectivamente.

Cada glifo que contiene nuestra fuente de ejemplo está representado por el elemento “glifo”. Parámetros como “unicode” y “nombre-glifo” indican cómo acceder al glifo correspondiente, utilizando un código de carácter o el nombre del glifo respectivamente. En los datos de fuentes SVG reales, basta con proporcionar un solo atributo, Unicode o nombre de glifo para acceder al glifo deseado.

Un atributo d es el atributo más importante del elemento “glifo”. Define el contorno de un glifo utilizando primitivas geométricas como líneas y curvas.

Veamos cómo obtener una ruta gráfica para el glifo llamado “Triángulo” en nuestro ejemplo. Cada letra en esta ruta es una abreviatura especial, relativa al comando correspondiente del contexto gráfico. Cada letra va seguida de 2 números, estas son las coordenadas. Todas las coordenadas del ejemplo son globales, ninguna coordenada es relativa al punto anterior.

La primera letra de este camino es “M”. Es un comando “Mover a”. Como su nombre indica, este comando establece un lápiz en las coordenadas especificadas, en nuestro caso, el inicio del sistema de coordenadas (0, 0).

Siguiente comando: “L” significa comando “LineTo”. Este comando dibuja una línea desde el punto actual (0,0) hasta la coordenada (x,y) dada que se convierte en el nuevo punto actual.

Las coordenadas del nuevo punto actual son los parámetros del comando “L”; en nuestro caso, son coordenadas (100, 0).

Entonces, la primera línea de nuestro glifo es la línea que va desde el punto (0,0) al punto (100, 0). El siguiente comando, “L50,100”, dibuja una línea desde el punto actual (100, 0) hasta el punto (50, 100). Y el último comando en nuestra ruta de glifo - “z” se llama “cerrar ruta” y se usa para cerrar la subruta actual dibujando una línea recta desde el punto actual hasta el punto inicial de la subruta actual - (0,0).

So from the explained example we briefly learned how the glyphs are represented in the SVG format, how to access these glyphs, and what the most common characteristics a font should have in order to get texts rendered with this font displayed correctly.

¿Cómo crear una fuente SVG?

Normalmente, el proceso de creación de una fuente SVG tiene el siguiente orden:

1. Cree gráficos vectoriales para cada glifo de la fuente. Para ello, puede utilizar software como Illustrator, Inkscape o Glyphs.
2. Exporte cada glifo como un archivo SVG, asegurándose de utilizar el mismo nombre de fuente y atributos para cada uno de ellos.
3. Cree el archivo de fuente utilizando software como FontForge o FontLab. Luego importe los archivos SVG para cada personaje.
4. Agregue metadatos como el nombre de la fuente, el autor y la licencia al archivo creado.
5. Pruebe el resultado. Instala la fuente en tu computadora y pruébala en diferentes editores de texto y software de diseño. Tenga en cuenta que no todos estos programas admiten fuentes SVG, así que asegúrese de tener los adecuados para crear y editar fuentes SVG.

Conclusión

La fuente SVG tiene un nivel bastante alto de popularidad y en muchos casos es una mejor solución que otras fuentes. Pero para tomar una decisión sobre si este formato es la opción correcta para su proyecto, será mejor que primero conozca sus ventajas y desventajas.

Si desea trabajar con SVG en línea sin cargar ningún software adicional, puede usar aplicaciones multiplataforma y si se está enfocando en trabajar con fuentes, vaya a otro grupo de aplicaciones para trabajar con fuentes allí puede encontrar convertidores para transformar sus archivos de fuentes SVG a un formato, visores y fusiones más adecuados.