Verwenden von SVG & Illustrator zum Erstellen von kurvigem Text

Das Hinzufügen einer geraden Linie in einem iBook ist ziemlich unkompliziert, aber was ist, wenn Sie Ihrem Buch mit Text, der einer gekrümmten Linie folgt, etwas Flair verleihen wollen? Das ist, wenn ein wenig Wissen über SVG und Adobe Illustrator einen großen Weg geht. Wenn Sie den SVG-Code von Illustrator generieren lassen, sparen Sie die Zeit für die Berechnung der Kurve und der Textplatzierung selbst.

Schritt 1: Erstellen Sie die Kurve in Illustrator

Beginnen Sie mit dem Starten von Adobe Illustrator. Klicken Datei> Neu eine neue Datei erstellen. Stellen Sie sicher, dass die Breite und Höhe Ihrer Illustrator-Datei der Breite und Höhe Ihres Ansichtsfensters in Ihrer XHTML-Datei entspricht. In diesem Beispiel verwenden wir die Abmessungen 612px mal 792px:

Klicke auf das Stiftwerkzeug in der Tools-Palette. Klicken Sie auf das Zeichenbrettfenster, um einen Ankerpunkt zu erstellen, und klicken Sie auf eine andere Stelle auf dem Bildschirm, um einen zweiten Ankerpunkt festzulegen.

Klicken und halten Sie die Stiftwerkzeug um die zusätzlichen Werkzeuge anzuzeigen, und wählen Sie Ankerpunkt umrechnen. Klicken Sie auf einen der Ankerpunkte und ziehen Sie ihn, um eine Kurve zu erstellen.

Drücke den Typ Werkzeug und bewegen Sie den Mauszeiger über den Anfang der kurvigen Linie, bis der Cursor eine Wellenlinie zeigt.

Klicken Sie auf die Zeichenfläche, und der Cursor wird auf der kurvigen Linie positioniert. Tippe "Check out my awesome curvy line !!" (oder etwas gleich cooles).

Schritt 2: Einstellen der Optionen

Erhöhen Sie ggf. den Text, und klicken Sie dann auf Datei> Speichern unter. Wählen Sie "SVG" aus der Dropdown-Liste "Format" und wählen Sie einen Namen und einen Ort für Ihre Datei, bevor Sie auf "Speichern" klicken. Einige Einstellungen der SVG-Optionen gelten nicht für unsere Situation. Gehen wir die Einstellungen durch, die wir festlegen müssen. Setzen Sie „SVG-Profile“ auf „SVG 1.1“. Im Feld "Fonts" setzen Sie "Type" auf "SVG" und "Subsetting" auf "None (Systemschriftarten verwenden)". Klicken Sie auf die Schaltfläche "Weitere Optionen" in der unteren linken Ecke. Setzen Sie im Feld "Erweiterte Optionen" für "CSS-Eigenschaften" die Option "Präsentationsattribute". Stellen Sie sicher, dass Sie nur die Kontrollkästchen neben "Weniger ausgeben" aktivieren Elemente “und„ Verwenden Element für Text auf Pfad ".

Klicken Sie auf „OK“ und schließen Sie Illustrator.

Schritt 3: Vorbereiten der XHTML-Datei

Starten Sie Ihren Texteditor und erstellen Sie eine neue XHTML-Datei. Fügen Sie der Datei den folgenden Code hinzu:

     SVG-iBooks-Beispiel

Neben den typischen EPUB- und XHTML-Namespaces werden Sie zwei neue Namespaces bemerken, einen für „svg“ und den anderen für „xlink“. Beide Namespaces sind für SVG erforderlich. Der Darstellungsbereich entspricht der Größe unserer ursprünglichen Illustrator-Datei. Wenn Sie für Ihre Illustrator-Datei andere Abmessungen ausgewählt haben, müssen Sie den Code des Darstellungsbereichs an die Illustrator-Abmessungen anpassen.

Schritt 4: Hinzufügen des SVG-Codes

Fügen Sie den folgenden SVG-Code in das Karosserie Etikett.

Mit dem Namespace „svg:“ definieren wir einige verschiedene Dinge, z. B. die verwendete SVG-Version und den Umgang mit Leerräumen. Die "ID" kann beliebig sein.

Pfaddaten

Wir werden fünf Informationen aus der Illustrator-SVG-Datei kopieren und an derselben Stelle in der XHTML-Datei ablegen. Öffnen Sie die Illustrator SVG-Datei in Ihrem Texteditor. Kopieren Sie die alphanumerischen Pfaddaten in den Anführungszeichen neben dem d =.

Fügen Sie die Pfaddaten in die Anführungszeichen neben dem ein d = in Ihrer XHTML-Datei. Die SVG-Pfaddaten enthalten den Schlüssel für die Kurve und enthalten Anweisungen, wohin die Route verschoben werden soll, wie die Kurve erstellt werden soll und wo die Linie zu beenden ist.

startOffset

Kopieren Sie zurück in die SVG-Datei den Prozentsatz neben startOffset = und fügen Sie es in die startOffset = Anführungszeichen in Ihrer XHTML-Datei.

Das startOffset legt fest, wie weit vom Zeilenanfang der Text beginnen soll.

Schriftfamilie

Navigieren Sie zurück zur SVG-Datei und kopieren Sie den Namen der Schriftart in die Anführungszeichen neben font-family =. Klicken Sie auf die XHTML-Datei und fügen Sie die Schriftart in die Anführungszeichen neben ein font-family =.

Schriftgröße

Klicken Sie erneut auf die SVG-Datei und kopieren Sie die Nummer in den Anführungszeichen neben font-size =. Klicken Sie auf die XHTML-Datei und fügen Sie die Größe in die Anführungszeichen neben ein font-size =.

Text

Navigieren Sie noch einmal zur SVG-Datei. Kopieren Sie die Textzeile, die auf der Kurve angezeigt wird, und fügen Sie sie zwischen dem Öffnen und Schließen ein svg: tspan Stichworte.

Schritt 5: Testen

Werfen wir einen kurzen Blick in Safari, um zu sehen, wie es aussieht. Öffnen Sie die XHTML-Datei in Safari, um die kurvige Linie anzuzeigen.

Fazit

Wenn Sie Ihrem iBook kurvigen Text hinzufügen, können Sie Ihren Text zum Leben erwecken, Emotionen und ein Gefühl von Realismus in Ihr Projekt einbringen.

Code