¿Cómo uso una "fuente de icono" SVG en Illustrator?

Creo que me estoy acercando a una respuesta (quack quack), pero hasta ahora es bastante feo.

La clave es lograr que la estructura del archivo SVG coincida con lo que espera Illustrator. La forma más fácil de comenzar es simplemente guardar un archivo de Illustrator existente como SVG y abrir el resultado en un editor de texto.

Primero, elimine el XML para que todo lo que tenga sea el "marco" básico del archivo SVG sin ningún contenido. Aquí hay un ejemplo.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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" x="0px" y="0px" width="1920px"
   height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">


</svg>

En el archivo SVG para la fuente del ícono, los glifos se verán así (al menos para la fuente del ícono SVG de Trello ):

<glyph unicode="&#xf001;" d="M120 186q0 109 68 240t195.5 247.5t277.5 164.5l-9 -14q-106 73 -168.5 189.5t-62.5 249.5q0 146 72.5 269.5t197 195.5t271.5 72q144 0 268 -71.5t197 -195.5t73 -270q0 -132 -63 -249t-169 -193l-11 20q115 -37 218.5 -115.5t173 -170.5t110.5 -190t41 -179 q0 -78 -71 -138.5t-192 -96t-267.5 -53.5t-309.5 -18t-309.5 18t-267.5 53.5t-192 96t-71 138.5z" />

Tendremos que modificar eso un poco antes de pegarlo en el archivo que planeamos importar a Illustrator. Aquí hay algunas cosas que tuve que cambiar:

• Cambia la palabra glyphapath
• No necesita el unicodeatributo, así que cámbielo a id. (También modifiqué el valor para que Illustrator no intentara representar el Unicode, por ejemplo, ""se convirtió en "xf001". Esto puede no ser necesario).
• Envuelva el nuevo elemento de ruta en una getiqueta con una identificación que coincida con la identificación de la ruta.

Su etiqueta de glifo ahora debería verse así:

<g id="xf004">
   <path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>

En conjunto, el archivo se verá así:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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" x="0px" y="0px" width="1920px"
   height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">

<g id="xf004">
   <path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>

</svg>

Por supuesto, debe aplicar esos pasos para todos los glifos que desea importar, pero para eso están las Macros y Buscar/Reemplazar :)

Creo que la solución más sencilla es instalar el archivo de fuente en su sistema operativo y luego en Illustrator escribir todos los caracteres que cree que están asignados a iconos.

Luego, todo lo que tiene que hacer es cambiar la fuente a la fuente que instaló. Eso es. Ahora puedes hacer lo que quieras con el personaje.

Usé una pequeña transformación XSL que escribí para convertir la fuente svg en un gráfico svg. El archivo svg resultante se puede abrir en Illustrator.

Aquí está el xsl:

<xsl:stylesheet
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        xpath-default-namespace="http://www.w3.org/2000/svg"
        version="2.0"
        >
    <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <svg>
            <xsl:apply-templates/>
        </svg>
    </xsl:template>

    <xsl:template match="glyph">
        <g>
            <path>
                <xsl:attribute name="d" select="@d" />
            </path>
        </g>
    </xsl:template>

    <xsl:template match="text()"/>

</xsl:stylesheet>

Este es el procedimiento que he usado con éxito para importar una fuente y editarla en Illustrator.

1. Use FontBook para importar el archivo ttf (fuente de tipo verdadero) a su computadora (puede eliminarlo fácilmente más tarde si no quiere contaminar sus fuentes)
2. Abrir ilustrador
3. Seleccione "Ventana->Tipo-Glifos".
4. En la parte inferior de la ventana Glyphs, puede seleccionar la fuente que acaba de importar.
5. Cree un cuadro de texto y luego haga clic en uno de sus iconos en la ventana Glyphs para que la fuente aparezca en el cuadro de texto.
6. Convierta la fuente en una forma seleccionándola y luego eligiendo "Tipo->Crear contornos"
7. Expanda la fuente al tamaño correcto y edítela.
8. Seleccione todas las formas en su nueva fuente y combínelas en una sola forma seleccionando "Ventana-> Pathfinder" y luego eligiendo "Combinar"
9. Guarde el archivo como SVG e impórtelo a icomoon.io o algún otro servicio que le permita crear fuentes.

Creo que se puede hacer mucho más fácil. En Illustrator, abra el panel GLIFOS, en el lienzo cree un campo de texto vacío, establezca la fuente de ese campo de texto en la fuente del icono y haga doble clic en un icono en el panel GLIFOS.