Crea una fuente de color SVG

Tutorial
Color
by Rainer Erich Scheichelbauer
en es fr zh

20 agosto 2021 Publicado el 20 enero 2017

Glyphs ofrece varias formas de crear una fuente OpenType-SVG. Lee el siguiente tutorial para saber casi todo al respecto.

Cuando busques la palabra SVG, descubrirás que es un acrónimo en inglés que significa Scalable Vector Graphics. Hasta aquí todo bien, pero cuando usamos el término en el ámbito de las fuentes, SVG puede significar cosas diferentes.

Formato de fuente SVG

Comenzaré señalando que SVG solía existir como un formato de archivo de fuente web. Sus sufijos de nombre de archivo eran .svg o .svgz (el zip comprimido). Puedes olvidarte de este SVG porque solo era compatible con el Safari de los primeros iPhone. Afortunadamente, este formato ya no existe. Su tamaño de archivo era enorme en comparación con otros formatos de fuentes y no ofrecía más que contornos simples. Lo que significaba: sin kerning, sin hinting y ninguna de las otras cosas buenas que pueden proporcionar las tablas OpenType. En otras palabras, ni siquiera era una fuente OpenType. Glyphs es un editor de fuentes OpenType y, por lo tanto, no puede producir fuentes SVG como estas.

Este tutorial no trata sobre el formato de archivo SVG antiguo obsoleto.

La tabla SVG OpenType

Los formatos de fuente web de uso común hoy en día son WOFF y WOFF2. Por supuesto, hay más, pero en resumen, las WOFF son fuentes OpenType comprimidas. Sus homólogas, las fuentes de escritorio de formato CFF/OTF y TTF, también son OpenType, que comparten la singularidad de no estar muy bien comprimidas como el formato WOFF.
Lo que hace que las fuentes OpenType sean fuentes OpenType es su estructura interna, que es una colección de las llamadas tablas OpenType, y una de estas tablas puede ser la tabla SVG, que contiene información basada en SVG. Las fuentes que contienen una tabla SVG de este tipo se conocen comúnmente como OpenType-SVG, a veces como SVG-in-OT, o simplemente como fuente de color SVG. La tabla SVG fue desarrollada e impulsada principalmente por Mozilla y Adobe. Y ocasionalmente, verás este logotipo para OpenType-SVG:

Este tutorial trata sobre las fuentes de color OpenType-SVG.

En Glyphs, hay tres formas de obtener información SVG en una fuente:

Así que profundicemos en ello.

Opción A: archivos de imagen SVG externos

Si ya tienes los gráficos SVG disponibles en archivos separados, puedes colocarlos en los glifos respectivos y exportar una fuente con una tabla SVG. Este método te permite aprovechar al máximo las capacidades del formato de archivo SVG, incluidas cosas locas como animaciones vectoriales.

Para prepararte, te recomendamos que guardes tu archivo .glyphs en la ubicación que desees y crees una subcarpeta llamada Images para los archivos SVG. Dado que solo las rutas relacionadas con la imagen se almacenan en el archivo .glyphs, los archivos SVG deben ser fáciles de ubicar y es más fácil mantener sus .glyphs con los SVG cuando están en una subcarpeta.

Ahora necesitamos un ejemplo. Si no tienes un SVG a tu alcance, aquí tengo uno para ti. Intentemos crear la animación de un círculo rojo giratorio para la O mayúscula. Selecciona y copia (Cmd-C) este código SVG:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1000" height="1000" viewBox="-400 -400 800 800">
 <title>SVG animation using SMIL</title>
 <circle cx="0" cy="100" r="200" stroke="none" fill="red">
  <animateTransform
   attributeName="transform"
   attributeType="XML"
   type="rotate"
   from="0"
   to="360"
   begin="0s"
   dur="1s"
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

Pégalo (Cmd-V) en una nueva ventana de un editor de texto sin formato de tu elección, como TextMate, SublimeText, o Atom.

Luego, guarda el archivo en la carpeta Images como O.svg. Entonces, en el Finder, tus archivos deberían verse así:

De vuelta en tu archivo .glyphs, prepara la O mayúscula. Ábrela en el modo de edición y, en la paleta Capas, presiona el botón con el signo más (+) para agregar un duplicado de la capa, haz clic derecho y elige svg como tu Tipo de capa del menú contextual que aparece:

Ahora, esta es la situación: lo que pongas en la capa del máster es la versión en blanco y negro del llamado glifo alternativo, que es visible en las aplicaciones que no pueden mostrar la información de color almacenada en la tabla SVG. En caso de que te lo estés preguntando, la capa del máster es aquella cuyo texto está en negrita en la paleta Capas, en nuestro ejemplo, la que se llama ‘Regular’.

Pero en la nueva capa svg, puedes arrastrar y soltar tu archivo de imagen .svg. Debe mostrarse de inmediato. Sin embargo, no verás la animación. Puedes cambiar el tamaño y mover la imagen a tu gusto:

Nota sobre el espaciado: la capa svg hereda su ancho de la capa del máster, por lo que debes volver a la capa del máster si deseas espaciar tu glifo. Para nuestro ejemplo aquí, tiene sentido establecer el ancho en 800, asumiendo que no escalaste ni distorsionaste el SVG colocado. Para hacer eso, haz clic en la capa Regular en la paleta Capas, luego cambia el ancho en el cuadro de información gris a 800:

En cualquier caso, exporta la fuente como fuente web: Archivo > Exportar > OTF, selecciona los formatos WOFF y WOFF2. CFF o TTF no deberían hacer ninguna diferencia:

No todos los navegadores son compatibles con OpenType-SVG. Consulta la sección de soporte de este tutorial (ver más abajo) cuando elijas un navegador para probar tu fuente OpenType-SVG. Con ese fin, puedes crear un archivo HTML que contenga el código HTML y CSS para mostrar el WOFF, o puedes ejecutar el script Test > Webfont Test HTML desde el directorio de scripts de mekkablue. Este script crea un archivo HTML para la fuente actual en el destino de exportación de fuente web utilizado más recientemente.

El script abre convenientemente tanto el HTML en tu navegador predeterminado como su carpeta adjunta en Finder. Todo lo que necesitas hacer ahora es arrastrar el archivo HTML al icono de Firefox en tu Dock (o hacer clic con el botón derecho y Abrir con > Firefox.app), escribir una O mayúscula y listo:

¡Genial! Pero ten cuidado, las animaciones en las fuentes tienden a hacer un uso intensivo del procesador. Puedes hacer que los fanáticos de su computadora se vuelvan locos, y todos los usuarios de dispositivos móviles desarrollarán sentimientos encontrados acerca de tu fuente por agotar su batería. Has sido advertido.

Opción B: a partir de una fuente de color existente

Glyphs te permite tomar fuentes de color existentes en varios formatos y exportarlas como SVG. Configurar la fuente de color en uno de estos formatos de origen tiene la ventaja de que puedas exportar tanto en el formato de origen como en SVG.

Tienes tres opciones:

  1. Una fuente CPAL/COLR: una fuente que contiene glifos con capas formadas por una paleta de color, cada una de estas capas vinculada a un color en una paleta de color predefinida.
  2. Una fuente multicapa, es decir, dos o más másteres que encajan uno encima del otro. Los másteres no necesitan ser compatibles, pero deben tener los parámetros de Color del máster.
  3. Una fuente sbix: una fuente que contiene glifos con imágenes de mapa de bits en varias resoluciones colocadas en capas iColor.

Mira las opciones, haz tu elección y lee a continuación para ver cómo agregar la exportación SVG.

Opción B, alternativa 1: convertir a CPAL/COLR

Prepara: lee este tutorial acerca de las fuentes CPAL/COLR de Microsoft. Asegúrate de tener una o más Paletas de color configuradas en la sección Parámetros personalizados del primer máster en Archivo > Información de la fuente > Fuente, y de haber numerado las capas de Paleta de color en los glifos.

  1. En Archivo > Información de la fuente > Exportaciones, crea una nueva instancia para la fuente que contiene la tabla SVG. Asígnale un nombre de estilo apropiado.
  2. Añade el parámetro personalizado Capas de color a SVG.
  3. Añade el parámetro personalizado Paleta de color para SVG y establece su valor en el índice de la paleta de colores deseada. Si solo tienes una paleta definida en el parámetro Paletas de color descrito anteriormente, usa 0 como valor.
  4. Finalmente, agrega el parámetro personalizado Exportar tabla SVG y asegúrate de que su casilla de verificación de valor (la de la derecha) esté activada.

Opción B, alternativa 2: convertir una fuente de capas

Prepara: lee este tutorial acerca de las fuentes multicapa. Asegúrate de haber configurado tus colores con los parámetros Color del máster en Archivo > Información de la fuente > Másteres.

  1. En Archivo > Información de la fuente > Exportaciones, crea una nueva instancia para la fuente que contiene la tabla SVG haciendo clic en el botón con el signo más (+) en la esquina inferior izquierda y seleccionando Añadir instancia en el menú que aparece. Asígnale un nombre de estilo sensato, como Multicolor o SVG o el que tenga sentido para ti.
  2. Añade el parámetro personalizado Capas de color a SVG y asegúrate de que su casilla de verificación de valor (la de la derecha) esté activada.
  3. Añade el parámetro personalizado Exportar tabla SVG y asegúrate de que su casilla de verificación de valor (la de la derecha) esté activada.

Opción B, alternativa 3: convertir una fuente sbix

Prepara: lee este tutorial acerca de las fuentes sbix estilo Apple. Si tienes varias resoluciones de iColor, asegúrate de tener todas las imágenes sbix en la resolución que deseas para tu SVG.

  1. Crea una nueva instancia en Archivo > Información de la fuente > Exportaciones.
  2. Añade el parámetro personalizado SBIX a SVG con el tamaño preferido de iColor como valor. Esto tomará las imágenes sbix de las capas iColor del mismo tamaño del índice y las convertirá en gráficos SVG. Por ejemplo, si especificas 256 como valor en el parámetro personalizado, Glyphs buscará todas las capas iColor 256 y las convertirá en SVG:

Opción C: capas de Color nativas

En primer lugar, tengamos cuidado con la redacción. Glyphs usa la expresión ‘capas de color’ de dos maneras. En primer lugar, se refiere a las capas de las fuentes CPAL/COLR de Microsoft. Pero, de nuevo, el término también puede significar las capas de Color nativas, nuevas en Glyphs 3. Para diferenciar entre las dos, me refiero a la última como ‘nativa’ y escribo ‘Color’ con una C mayúscula, porque así es como aparece en el menú Tipo de capa.

Bien, basta de palabrería, empecemos: cambia una capa al tipo de capa Color. Esta capa puede incluso ser tu capa del máster. Para ello, haz clic con el botón derecho en la capa en la paleta Capas y selecciona Color en el menú:

Si lo hemos hecho bien, aparecerá una pequeña rueda de color junto al nombre de la capa en la paleta:

Luego, asegúrate de que Vista > Mostrar información (Cmd-Shift-I) esté activado. De lo contrario no verás las opciones gráficas del siguiente paso.

Ahora, empieza a dibujar. Añade formas como estás acostumbrado. Sin embargo, hay una cosa que es diferente ahora. En la esquina inferior derecha de la ventana, verás una sección de Atributos para la forma seleccionada actualmente:

Puedes agregar trazos y rellenos, y hacer doble clic en los campos de color respectivos para elegir un color. Y hacer cosas como esta:

En la paleta, también puedes agregar atributos adicionales a través del botón con el signo más (+) junto a la palabra ‘Atributos’. Gradientes, sombras, brillos, lo que sea. Pero cuidado: no todo es compatible con una fuente. E incluso si queda escrito en la fuente, es posible que no sea compatible con la aplicación en la que la usarás. Para estar seguro, solo usa rellenos de color y trazos de color.

Antes de exportar, configura una instancia en Archivo > Información de la fuente > Exportaciones y agrega el parámetro personalizado Capas de color a SVG:

Y estará lista para usar.

Parámetros personalizados

En Archivo > Información de la fuente > Exportaciones (Cmd-I), en los Parámetros personalizados de las instancias respectivas, puedes agregar cualquiera o todos de estos tres parámetros:

  • Exportar tabla COLR
  • Exportar tabla SVG
  • Exportar tabla sbix

Se utilizan para indicar qué tablas de colores se generarán e incrustarán en la fuente OpenType y cuáles no. Para reducir el tamaño del archivo de fuente web, es posible que desees habilitar la exportación de una de las tablas, pero deshabilitar todas las demás. Por ejemplo, si estás utilizando uno de los métodos de fuente de color existentes descritos anteriormente, es decir, basado en una configuración CPAL/COLR o sbix (consulta la ‘Opción B’ anterior), es posible que desees omitir la creación de las otras tablas. De esta manera, puedes tener fuentes de color solo sbix, solo CPAL y solo SVG que se cargan mucho más rápido.

Scripts útiles

Los scripts Harbor Type de Henrique Beier contienen un script llamado SVG Export and SVG Import. Genera SVG externos desde dentro de Glyphs con DrawBot y los vuelve a importar para crear fuentes de color SVG.

Soporte de aplicaciones

Al momento de escribir este artículo, la tabla SVG es compatible con Firefox versión 32 y posteriores, Microsoft Word en Windows 10 y posteriores. También es compatible con algunas aplicaciones de Adobe, concretamente, Photoshop a partir de CC 2017, Illustrator a partir de CC 2018 e inDesign a partir de CC 2019. Y recientemente, incluso Apple comenzó a admitir fuentes SVG: en macOS 10.14 Mojave y versiones posteriores, las aplicaciones de Mac (incluidas Safari, TextEdit , Pixelmator, Sketch y Affinity Designer) deberían poder mostrarlos correctamente. Lo mismo ocurre con iOS 12 y versiones posteriores, donde las versiones 4.3 y posteriores de ProCreate pueden manejar OpenType-SVG.

Una vez más, ten cuidado: el hecho de que una aplicación o un sistema sea oficialmente compatible con SVG no significa que todas las funciones de SVG sean compatibles.

Más información sobre SVG

Solo hemos estado arañando la superficie. Para familiarizarte con SVG y todas sus posibilidades, profundiza en las especificaciones y algunos ejemplos de código:


Actualización 20/01/2017: se agregó Microsoft Edge a la lista de navegadores compatibles.
Actualización 26/03/2018: se agregó la conversión de sbix a SVG.
Actualización 14/04/2018: se actualizó el soporte de la aplicación/sistema operativo SVG, ¡gracias Behdad!
Actualización 02/01/2019: se corrigieron errores tipográficos y se reemplazó la palabra brothers por siblings. ¡Gracias, Nathalie!
Actualización 15/11/2019: se mejoró la introducción a la ‘Opción B’.
Actualización 20/08/2021: actualización para Glyphs 3, se agregó Opción C y Scripts útiles, se actualizó y reordenó Soporte de aplicaciones. ¡Se agregó el enlace de Color fonts! WTF?.
Traducción al español de Sol Matas.

Artículos relacionados

Ver todos los tutoriales →