Wie verwende ich eine SVG-„Symbolschrift“ in Illustrator?

Ich glaube, ich nähere mich einer Antwort (quak quak), aber bisher ist es ziemlich hässlich.

Entscheidend ist, dass die Struktur der SVG-Datei den Erwartungen von Illustrator entspricht. Der einfachste Weg, um zu beginnen, besteht darin, einfach eine vorhandene Illustrator-Datei als SVG zu speichern und das Ergebnis in einem Texteditor zu öffnen.

Zerlegen Sie zuerst das XML, so dass Sie nur noch den grundlegenden "Rahmen" der SVG-Datei ohne Inhalt haben. Hier ist ein Beispiel.

<?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>

In der SVG-Datei für die Icon-Schriftart sehen die Glyphen so aus (zumindest für die SVG-Icon-Schriftart von 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" />

Wir müssen das ein wenig ändern, bevor wir es in die Datei einfügen, die wir in Illustrator importieren möchten. Hier sind einige Dinge, die ich ändern musste:

• Ändern Sie das Wort glyphinpath
• Sie benötigen das unicodeAttribut nicht, ändern Sie es also in id. (Ich habe den Wert auch so geändert, dass Illustrator nicht versucht hat, den Unicode zu rendern, z . B. ""wurde "xf001". Dies ist möglicherweise nicht erforderlich).
• Schließen Sie das neue Pfadelement in ein gTag mit einer ID ein, die der ID des Pfads entspricht.

Ihr Glyph-Tag sollte nun etwa so aussehen:

<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>

Zusammengesetzt sieht die Datei so aus:

<?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>

Natürlich müssen Sie diese Schritte für alle Glyphen anwenden, die Sie importieren möchten, aber dafür sind Makros und Suchen/Ersetzen da :)

Ich denke, die einfachste Lösung besteht darin, die Schriftartdatei in Ihrem Betriebssystem zu installieren und dann in Illustrator alle Zeichen einzugeben, von denen Sie glauben, dass sie Symbolen zugeordnet sind.

Dann müssen Sie nur noch die Schriftart auf die von Ihnen installierte Schriftart ändern. Das ist es. Jetzt können Sie mit dem Charakter machen, was Sie wollen.

Ich habe eine kleine XSL-Transformation verwendet, die ich geschrieben habe, um die SVG-Schriftart in eine SVG-Grafik zu konvertieren. Die resultierende SVG-Datei kann im Illustrator geöffnet werden.

Hier ist die xsl-Datei:

<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>

Hier ist das Verfahren, mit dem ich erfolgreich eine Schriftart importiert und in Illustrator bearbeitet habe.

1. Verwenden Sie FontBook, um die ttf-Datei (True-Type-Schriftart) auf Ihren Computer zu importieren (Sie können sie später einfach löschen, wenn Sie Ihre Schriftarten nicht verschmutzen möchten).
2. Öffnen Sie Illustrator
3. Wählen Sie "Fenster->Schrift-Glyphen".
4. Unten im Fenster „Glyphen“ können Sie die Schriftart auswählen, die Sie gerade importiert haben.
5. Erstellen Sie ein Textfeld und klicken Sie dann im Glyphenfenster auf eines Ihrer Symbole, damit die Schriftart im Textfeld angezeigt wird.
6. Konvertieren Sie die Schriftart in eine Form, indem Sie sie auswählen und dann „Type->Create Outlines“ wählen.
7. Erweitern Sie die Schriftart auf die richtige Größe und bearbeiten Sie sie.
8. Wählen Sie alle Formen in Ihrer neuen Schriftart aus und kombinieren Sie sie zu einer einzigen Form, indem Sie „Window->Pathfinder“ und dann „Merge“ auswählen.
9. Speichern Sie die Datei als SVG und importieren Sie sie in icomoon.io oder einen anderen Dienst, mit dem Sie Schriftarten erstellen können.

Ich denke, es geht viel einfacher. Öffnen Sie in Illustrator das GLYPHS-Bedienfeld, erstellen Sie auf der Leinwand ein leeres Textfeld, stellen Sie die Schriftart dieses Textfelds auf die Symbolschriftart ein und klicken Sie doppelt auf ein Symbol im GLYPHS-Bedienfeld.