Utiliser SVG et Illustrator pour créer un texte courbé

Ajouter une ligne droite de texte dans un iBook est assez simple, mais que faire si vous voulez ajouter du style à votre livre avec du texte qui suit une ligne courbe? C'est alors qu'un peu de connaissances en SVG et Adobe Illustrator vont un long chemin. En laissant Illustrator générer le code SVG, vous économiserez vous-même le temps nécessaire pour calculer la courbe et le placement du texte..

Étape 1: Créer la courbe dans Illustrator

Commencez par lancer Adobe Illustrator. Cliquez sur Fichier> Nouveau créer un nouveau fichier. Assurez-vous que la largeur et la hauteur de votre fichier Illustrator sont identiques à celles de votre fenêtre d'affichage dans votre fichier XHTML. Dans cet exemple, nous allons utiliser les dimensions 612px par 792px:

Clique sur le Outil stylo dans la palette d'outils. Cliquez sur la fenêtre du tableau pour créer un point d'ancrage et cliquez à un autre endroit sur l'écran pour créer un deuxième point d'ancrage..

Cliquez et maintenez le Outil stylo pour révéler les outils supplémentaires, et sélectionnez Convertir le point d'ancrage. Cliquez et faites glisser l'un des points d'ancrage pour créer une courbe.

Clique le Outil de type et survolez le début de la ligne sinueuse jusqu'à ce que le curseur affiche une ligne ondulée.

Cliquez sur la planche d'art et le curseur sera positionné sur la ligne sinueuse. Tapez "Découvrez ma ligne incroyablement sinueuse !!" (ou quelque chose d'aussi cool).

Étape 2: Définition des options

Augmentez la taille du texte si nécessaire, puis cliquez sur Fichier> Enregistrer sous. Choisissez «SVG» dans la liste déroulante Format, puis choisissez un nom et un emplacement pour votre fichier avant de cliquer sur «Enregistrer». Certains paramètres SVG Options ne s'appliquent pas à notre cas; Passons en revue les paramètres que nous devons spécifier. Définissez «Profils SVG» sur «SVG 1.1». Dans la boîte «Polices», définissez «Type» sur «SVG» et «Sous-système» sur «Aucune (Utiliser les polices système)». Cliquez sur le bouton «Plus d'options» dans le coin inférieur gauche. Dans la boîte «Options avancées», définissez «Propriétés CSS» sur «Attributs de la présentation». Assurez-vous de ne cocher que les cases "Produire moins éléments »et« Utiliser élément pour Text on Path ”.

Cliquez sur «OK» et fermez Illustrator..

Étape 3: Préparation du fichier XHTML

Lancez votre éditeur de texte et créez un nouveau fichier XHTML. Ajoutez le code suivant au fichier:

     Exemple SVG iBooks

Outre les espaces de noms EPUB et XHTML classiques, vous remarquerez deux nouveaux espaces de noms, l'un pour «svg» et l'autre pour «xlink». Ces deux espaces de noms sont requis pour SVG. La fenêtre d'affichage ici correspond à la taille de notre fichier Illustrator d'origine. Si vous avez sélectionné différentes dimensions pour votre fichier Illustrator, vous souhaiterez modifier le code de la fenêtre d'affichage afin qu'il corresponde aux dimensions Illustrator..

Étape 4: Ajout du code SVG

Ajoutez le code SVG suivant dans le corps étiquette.

À l'aide de l'espace de noms «svg:», nous définissons différentes choses, telles que la version de SVG que nous utilisons et comment gérer les espaces. Le "id" peut être ce que vous voulez.

Données de chemin

Nous allons copier cinq informations à partir du fichier Illustrator SVG et les placer au même emplacement dans le fichier XHTML. Ouvrez le fichier SVG Illustrator dans votre éditeur de texte. Copiez les données du chemin alphanumérique situées entre les guillemets à côté du d =.

Collez les données du chemin dans les guillemets à côté du d = dans votre fichier XHTML. Les données de chemin SVG contiennent la clé de la courbe et fournissent des instructions sur les endroits où se déplacer, comment créer la courbe et où mettre fin à la ligne..

startOffset

De retour dans le fichier SVG, copiez le pourcentage à côté de startOffset = et collez-le à l'intérieur du startOffset = citations dans votre fichier XHTML.

le startOffset détermine à quelle distance du début de la ligne le texte doit commencer.

famille de polices

Revenez au fichier SVG et copiez le nom de la police dans les guillemets à côté de font-family =. Cliquez sur le fichier XHTML et collez la police dans les guillemets à côté de font-family =.

taille de police

Cliquez à nouveau sur le fichier SVG et copiez le numéro entre les guillemets à côté de taille de la police =. Cliquez sur le fichier XHTML et collez la taille dans les guillemets à côté de taille de la police =.

Texte

Une fois de plus, retournez au fichier SVG. Copiez la ligne de texte qui apparaît sur la courbe et collez-la entre l'ouverture et la fermeture. svg: tspan Mots clés.

Étape 5: test

Jetons un coup d'œil rapide dans Safari pour voir à quoi ça ressemble. Ouvrez le fichier XHTML dans Safari pour voir la ligne sinueuse.

Conclusion

Ajouter du texte courbé à votre iBook peut donner vie à votre texte, en ajoutant de l'émotion et du réalisme à votre projet..

Code