Utilizzo di SVG e Illustrator per creare testo curvy

Aggiungere una linea retta di testo in un iBook è piuttosto semplice, ma cosa succede se vuoi aggiungere un tocco al tuo libro con un testo che segue una linea curva? Questo è quando un po 'di conoscenza SVG e Adobe Illustrator va molto lontano. Permettendo a Illustrator di generare il codice SVG, risparmierai il tempo di calcolare la curva e il posizionamento del testo da solo.

Passaggio 1: crea la curva in Illustrator

Iniziare lanciando Adobe Illustrator. Clic File> Nuovo per creare un nuovo file. Assicurati che la larghezza e l'altezza del file di Illustrator abbiano la stessa larghezza e altezza della vista nel file XHTML. In questo esempio utilizzeremo le dimensioni 612px per 792px:

Clicca sul Strumento Penna nella tavolozza degli strumenti. Fare clic sulla finestra della scheda tecnica per creare un punto di ancoraggio e fare clic su un'altra posizione sullo schermo per creare un secondo punto di ancoraggio.

Fare clic e tenere premuto il Strumento Penna per rivelare gli strumenti aggiuntivi e selezionare Converti punto di ancoraggio. Fare clic e trascinare uno dei punti di ancoraggio per creare una curva.

Clicca il Digita strumento e passa con il mouse sopra l'inizio della linea sinuosa fino a quando il cursore mostra una linea ondulata.

Fare clic sulla tavola d'arte e il cursore sarà posizionato sulla linea sinuosa. Scrivi "Dai un'occhiata alla mia fantastica linea sinuosa !!" (o qualcosa di altrettanto bello).

Passaggio 2: impostazione delle opzioni

Aumentare la dimensione del testo, se necessario, quindi fare clic File> Salva come. Scegli "SVG" dal menu a discesa Formato e scegli un nome e una posizione per il file prima di fare clic su "Salva". Alcune delle opzioni di Opzioni SVG non si applicano alla nostra situazione; andiamo oltre le impostazioni che dobbiamo specificare. Impostare "Profili SVG" su "SVG 1.1". Nella casella "Caratteri" impostare "Tipo" su "SVG" e "Subsetting" su "Nessuno (usa i font di sistema)". Fai clic sul pulsante "Altre opzioni" nell'angolo in basso a sinistra. Nella casella "Opzioni avanzate" imposta "Proprietà CSS" su "Attributi presentazione". Assicurati di selezionare solo le caselle accanto a "Produzione in meno elementi "e" Uso elemento per il testo sul percorso ".

Fai clic su "OK" e chiudi Illustrator.

Passaggio 3: Preparazione del file XHTML

Avvia il tuo editor di testo e crea un nuovo file XHTML. Aggiungi il seguente codice al file:

     Esempio di iBook SVG

A parte i tipici spazi dei nomi EPUB e XHTML, noterai due nuovi namespace, uno per "svg" e l'altro per "xlink". Entrambi questi spazi dei nomi sono necessari per SVG. Il riquadro di visualizzazione corrisponde alla dimensione del nostro file di Illustrator originale. Se hai selezionato dimensioni diverse per il tuo file di Illustrator, ti consigliamo di cambiare il codice della vista in modo che corrisponda alle dimensioni di Illustrator.

Passaggio 4: aggiunta del codice SVG

Aggiungi il seguente codice SVG all'interno del corpo etichetta.

Usando lo spazio dei nomi "svg:", definiamo alcune cose diverse, come la versione di SVG che stiamo usando e come gestire lo spazio bianco. "Id" può essere qualsiasi cosa tu voglia.

Path Data

Copieremo cinque informazioni dal file SVG di Illustrator e le inseriremo nella stessa posizione all'interno del file XHTML. Apri il file SVG di Illustrator nel tuo editor di testo. Copia i dati del percorso alfanumerico situati all'interno delle virgolette accanto al d =.

Incolla i dati del percorso all'interno delle virgolette accanto al d = nel tuo file XHTML. I dati del percorso SVG contengono la chiave della curva, fornendo le istruzioni su dove spostarsi, come creare la curva e dove terminare la linea.

startOffset

Di nuovo nel file SVG, copia la percentuale accanto a startOffset = e incollarlo all'interno del startOffset = citazioni nel tuo file XHTML.

Il startOffset determina quanto lontano dall'inizio della riga dovrebbe iniziare il testo.

famiglia di font

Torna al file SVG e copia il nome del carattere all'interno delle virgolette accanto font-family =. Fare clic sul file XHTML e incollare il carattere all'interno delle virgolette accanto a font-family =.

dimensione del font

Fare nuovamente clic sul file SVG e copiare il numero all'interno delle virgolette accanto a font-size =. Fare clic sul file XHTML e incollare la dimensione all'interno delle virgolette accanto font-size =.

Testo

Ancora una volta, torna al file SVG. Copia la riga di testo che appare sulla curva e incollala tra l'apertura e la chiusura svg: tspan tag.

Passaggio 5: test

Diamo un'occhiata veloce a Safari per vedere come appare. Apri il file XHTML in Safari per vedere la linea sinuosa.

Conclusione

L'aggiunta di testo curvy al tuo iBook può dare vita al tuo testo, aggiungendo emozioni e un senso di realismo al tuo progetto.

Codice