Base de connaissances des polices SVG | Aspose.Font

Introduction à la police SVG

Pour expliquer ce qu’est la police SVG, apprenons d’abord le terme SVG en commun. À partir du produit dit Aspose.SVG, nous comprenons que Scalable Vector Graphics (SVG) est un langage XML permettant de créer des graphiques vectoriels bidimensionnels et des graphiques vectoriels/raster mixtes. Le document SVG est un fichier texte qui décrit les images comme des primitives géométriques : lignes, courbes, formes, texte, etc. Les objets vectoriels sont construits et stockés sous la forme d’un ensemble de commandes, de nombres et de formules, et non dans une grille de pixels comme dans les bitmaps.

La police SVG est un type de police utilisé dans les images SVG et, comme tout autre objet du format, elle peut être mise à l’échelle sans perte de qualité. Vous pouvez intégrer des polices directement dans l’image, ce qui facilite la création de graphiques avec une typographie personnalisée.

Une police SVG est une police définie à l’aide de XML, tout comme une image SVG. C’est un ensemble de formes, de lignes et de courbes qui définissent les caractères de la police. La police peut également être stylisée et manipulée à l’aide de CSS. Vous pouvez donc utiliser les mêmes techniques pour coder du texte dans une image SVG que vous le feriez pour tout autre élément SVG.

Avantages et inconvénients de la police SVG

Le tableau ci-dessous présente les avantages et les inconvénients des polices SVG, vous permettant ainsi de décider de les utiliser ou non dans votre projet.

Pros	Cons
Évolutivité : les polices SVG peuvent être mises à l’échelle à n’importe quelle taille sans perte de qualité, elles sont donc parfaites pour être utilisées dans n’importe quelle conception réactive.	Prise en charge du navigateur : la plupart des navigateurs Web modernes prennent en charge les polices SVG, mais certains navigateurs plus anciens peuvent ne pas le faire.
Taille de fichier plus petite : par rapport aux polices Web, les polices SVG ont une taille de fichier plus petite, ce qui est crucial si vous souhaitez améliorer le temps de chargement.	Prise en charge limitée de l’éditeur : tous les éditeurs de texte et logiciels de conception ne prennent pas en charge les polices SVG.
Meilleure accessibilité : les polices SVG sont considérées comme plus accessibles aux utilisateurs handicapés. Elles peuvent être facilement lues par les lecteurs d’écran et permettent d’inclure des descriptions textuelles alternatives.	Complexité : les polices SVG sont difficiles à utiliser et à modifier car elles nécessitent plus de connaissances techniques.
Typographie avancée : les polices SVG incluent des fonctionnalités typographiques avancées telles que les ligatures, le crénage, les caractères alternatifs, etc.	Facilitabilité : les polices SVG peuvent affecter le référencement d’un site Web car elles ne sont pas consultables par les moteurs de recherche.
Style et animation : stylisez ou animez facilement les polices SVG dans CSS et JavaScript.	Options de police limitées : il existe moins d’options de police disponibles au format SVG par rapport aux polices True Type.
Meilleure prise en charge des symboles non latins : en raison de leur évolutivité, les polices SVG peuvent être utilisées pour dessiner des polices comportant un grand nombre de caractères ou nécessitant des rendus complexes comme des hiéroglyphes, des lettres arabes ou hindi.

SVG ou WOFF ?

Les polices SVG étaient populaires au début du SVG, mais désormais les polices Web les ont remplacées dans la plupart des cas car elles sont plus flexibles et largement prises en charge par tous les navigateurs modernes. Quoi qu’il en soit, vous pouvez toujours trouver des polices SVG dans les anciennes versions d’Internet Explorer, par exemple. Comparons donc ces polices.

Web Open Font Format ou WOFF est un format de diffusion de fichiers de polices sur Internet, conçu pour couvrir les besoins du marché des applications Web. Le format WOFF a été créé pour fournir un moyen plus efficace de fournir des polices Web par rapport à d’autres formats de fichiers, tels que TrueType et OpenType. Le format compresse les données de police pour réduire la taille du fichier afin de télécharger et d’utiliser les pages Web plus rapidement. Il comprend également des métadonnées qui fournissent des informations sur la police, telles que la famille de polices, le style et les informations de copyright.

SVG est un format graphique vectoriel utilisé pour créer et afficher des images sur le Web. Il s’agit d’un format texte qui peut être facilement modifié et manipulé, c’est donc un bon choix lors de la création de logos, d’icônes et d’autres graphiques.

Donc, si vous comparez ces formats en fonction de leur objectif, si vous souhaitez créer des graphiques à utiliser sur le Web, vous devez utiliser SVG. Si vous avez besoin d’une police à utiliser sur un site Web, vous devez utiliser WOFF.

Les deux formats peuvent interagir avec CSS, mais les fichiers WOFF sont intégrés dans les pages Web à l’aide de la règle de police de caractères en CSS. Cela permet aux concepteurs de sites Web d’utiliser des polices personnalisées sur leurs sites Web sans compter sur les utilisateurs pour installer la police sur leurs appareils. Cela offre une meilleure flexibilité et une expérience visuelle cohérente quel que soit le navigateur utilisé par l’utilisateur.

SVG ou TTF ?

Si vous choisissez entre TTF ou SVG, vous devez d’abord clarifier les exigences du projet car elles sont généralement utilisées pour différents cas. Ces polices sont assez similaires car elles vous fournissent toutes deux un texte de haute qualité, évolutif et facilement lisible.

Le format de police True Type est le format de police le plus connu pour la conception Web et imprimée et est pris en charge par la plupart des systèmes d’exploitation et des appareils. TTF est également assez facile à utiliser et à mettre en œuvre. Il s’agit d’un format vectoriel mais qui utilise l’outil d’instructions développé qui permet aux polices d’avoir une qualité similaire à celle des polices bitmap et est considéré comme raster par certaines sources. SVG est un format de police vectorielle. Il stocke la police sous la forme d’un ensemble de chemins, adaptés sans perte à n’importe quelle taille. Il permet à ces polices de vous fournir un fichier de police plus petit, comme cela a déjà été mentionné dans la comparaison SVG vers WOFF. SVG est également une meilleure option que True Type pour servir les personnes handicapées, car ils offrent une meilleure lisibilité.

En bref, TTF est le format le plus largement pris en charge et convient le mieux dans la plupart des cas, mais SVG est une excellente option si vous devez redimensionner le texte, si vous souhaitez rendre le texte accessible ou si vous avez besoin de fonctionnalités de typographie avancées.

Où utiliser les polices SVG ?

Choisissez le format de police SVG si vous vous concentrez sur :

• Conceptions réactives : Les polices évolutives, comme SVG, conviennent à de tels problèmes.
• Accessibilité : Comme mentionné ci-dessus, les polices SVG peuvent offrir une meilleure lisibilité.
• Typographie avancée : Des fonctionnalités telles que les ligatures, le crénage et les caractères alternatifs sont incluses dans les polices SVG.
• Style et animation : Les polices SVG offrent une plus grande flexibilité pour la conception et l’animation.
• Scripts non latins : Vous pouvez utiliser des polices SVG pour représenter des polices comportant un grand nombre de caractères complexes à restituer.
• Conception d’impression : SVG est utile dans certains projets de conception d’impression où la taille d’un fichier est cruciale, mais vous devez utiliser en même temps des images haute résolution et une typographie complexe.
• Travailler avec des graphiques SVG : Comme les polices SVG font généralement partie de l’image graphique SVG et sont représentées en langage XML, vous pouvez manuellement ou à l’aide du logiciel spécial, modifier les glyphes des polices et visualiser immédiatement les résultats (texte afficher les changements) dans l’ensemble de l’image SVG.

Il est important de noter que les polices SVG ne constituent peut-être pas le meilleur choix pour tous les projets. Il est préférable d’ajouter également des polices d’un format différent comme option de secours.

Les polices SVG sont-elles gratuites ?

Il existe de nombreuses bibliothèques de polices open source avec une grande variété de polices SVG gratuites sous licences open source telles que Google Fonts, Open Font Library, etc.

Cependant, toutes les polices SVG ne sont pas gratuites. Certains concepteurs vendent des licences et les conditions de licence peuvent varier. Certaines polices peuvent avoir une version gratuite avec un ensemble limité de fonctionnalités et une version payante avec plus d’options.

Vérifiez la licence et les conditions d’utilisation d’une police avant de l’utiliser dans un projet. En faisant cela, vous serez sûr que son utilisation est gratuite ou que vous disposez des autorisations nécessaires.

Il existe quatre options à garder à l’esprit en matière de licence de police :

1. Permet l’intégration et le chargement temporaire de polices sur d’autres systèmes. Avec une telle licence, vous pouvez modifier les polices, y compris le formatage du nouveau texte, et enregistrer toutes les modifications.
2. Permet d’intégrer la police de manière temporaire, ce qui permet de la charger sur d’autres systèmes. Avec une telle licence, vous pouvez modifier et formater un nouveau texte à l’aide de la police intégrée et enregistrer toutes les modifications.
3. Permet d’intégrer la police de manière permanente, ce qui permet à la police d’être installée et utilisée par des systèmes distants ou d’autres utilisateurs.
4. Permet d’intégrer la police de manière temporaire dans le but de visualiser ou d’imprimer le document sur d’autres systèmes.

Fichier de police SVG

Les polices SVG utilisent la syntaxe XML et peuvent être intégrées directement dans des documents SVG ou référencées en tant que fichiers externes. Sa structure se compose des composants suivants :

• Déclaration XML en début de fichier. Il spécifie la version utilisée de XML et les informations de codage.
• Élément de police. Il contient des informations courantes sur la police comme le nom de la police, la famille, le style, etc.
• Élément glyphe. Il définit les caractères individuels de la police. Chaque glyph possède un identifiant unique, un numéro Unicode et un ensemble de chemins ou de formes qui composent le caractère.
• Élément de police. Il est utilisé pour définir les métadonnées de la police ( metrics) comme sa montée, sa descente, sa position de base et son cadre de délimitation de glyphe.
• Élément de glyphe manquant. Il définit un glyphe par défaut. Ce glyphe sera utilisé si celui nécessaire n’est pas trouvé dans la police.
• Des éléments facultatifs tels que font-face-src, qui définit la source du fichier de police, et font-face-uri, qui fournit un URI pour la police.

Voici un exemple de code de la structure de base d’un fichier de police SVG :

 
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">
      <font id="MyFont" horiz-adv-x="1000">
        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
      </font>
    </svg>

Expliquons l’exemple de code.

Tout d’abord, nous voyons la déclaration XML commune, qui définit le numéro de version et l’encodage XML. L’encodage UTF-8 est l’encodage le plus courant sur le World Wide Web depuis 2008.

L’élément principal (tag) de ce XML est l’élément “svg” qui définit un fragment de document SVG. L’attribut xmlns de l’élément “svg” fait référence à l’espace de noms XML, défini dans la spécification Scalable Vector Graphics (SVG) 1.0.

La description de la police elle-même commence à partir de l’élément <font>. Cet élément comprend 2 attributs :

Un attribut id identifie de manière unique la police et est utilisé lorsqu’il est nécessaire de référencer la police à partir d’un fichier SVG externe. L’attribut horiz-adv-x détermine l’avance horizontale par défaut après le rendu d’un glyphe en orientation horizontale (voir glyph metrics pour plus d’informations). Si cet attribut n’est pas spécifié, la valeur par défaut sera 1000.

L’élément « font-face » dans cet exemple définit des caractéristiques communes de la police telles que :

• Font family - un groupe de polices de conception apparentées et similaires.
• Unités par em - nombre d’unités de coordonnées sur le carré em, taille de la grille de dessin sur laquelle les glyphes sont disposés.
• Ascent, descente - longueur depuis le point d’origine sur la ligne de base jusqu’au point le plus haut/le plus bas du glyphe respectivement.

Chaque glyphe que contient notre exemple de police est représenté par l’élément “glyph”. Des paramètres tels que “unicode” et “glyph-name” indiquent comment accéder au glyphe correspondant - en utilisant respectivement un code de caractère ou le nom du glyphe. Dans les données de police SVG réelles, il suffit de fournir un seul attribut, unicode ou un nom de glyphe pour accéder au glyphe souhaité.

Un attribut d est l’attribut le plus important de l’élément “glyphe”. Il définit le contour d’un glyphe à l’aide de primitives géométriques telles que des lignes et des courbes.

Voyons comment obtenir un chemin graphique pour le glyphe nommé « Triangle » dans notre exemple.

Chaque lettre de ce chemin est une abréviation spéciale, relative à la commande correspondante du contexte graphique. Chaque lettre est suivie de 2 chiffres, ce sont les coordonnées. Toutes les coordonnées de l’exemple sont globales, aucune coordonnée n’est relative au point précédent.

La première lettre de ce chemin est “M”. C’est une commande “MoveTo”. Comme son nom l’indique, cette commande définit un stylo dans les coordonnées spécifiées, dans notre cas - le début du système de coordonnées (0, 0).

Commande suivante - “L” signifie commande “LineTo”. Cette commande trace une ligne depuis le point actuel (0,0) jusqu’à la coordonnée donnée (x,y) qui devient le nouveau point actuel.

Les coordonnées du nouveau point courant sont les paramètres de la commande “L” - dans notre cas, ce sont les coordonnées (100, 0).

Ainsi, la première ligne de notre glyphe est la ligne allant du point (0,0) au point (100, 0).

La commande suivante - “L50,100” - trace une ligne du point actuel (100, 0) au point (50, 100).

Et la dernière commande de notre chemin de glyphe - “z” est nommée “closepath” et est utilisée pour fermer le sous-chemin actuel en traçant une ligne droite du point actuel au point initial du sous-chemin actuel - (0,0).

Ainsi, à partir de l’exemple expliqué, nous avons brièvement appris comment les glyphes sont représentés dans le format SVG, comment accéder à ces glyphes et quelles sont les caractéristiques les plus courantes qu’une police doit avoir pour que les textes rendus avec cette police s’affichent correctement.

Comment créer une police SVG ?

Habituellement, le processus de création d’une police SVG suit l’ordre suivant :

1. Créez des graphiques vectoriels pour chaque glyphe de la police. Pour cela, vous pouvez utiliser des logiciels tels qu’Illustrator, Inkscape ou Glyphs.
2. Exportez chaque glyphe sous forme de fichier SVG, en veillant à utiliser le même nom de police et les mêmes attributs pour chacun d’eux.
3. Créez le fichier de police à l’aide d’un logiciel tel que FontForge ou FontLab. Importez ensuite les fichiers SVG pour chaque personnage.
4. Ajoutez des métadonnées telles que le nom de la police, l’auteur et la licence au fichier créé.
5. Testez le résultat. Installez la police sur votre ordinateur et essayez-la dans différents éditeurs de texte et logiciels de conception. Gardez à l’esprit que tous ces programmes ne prennent pas en charge les polices SVG, alors assurez-vous de disposer des polices appropriées pour créer et modifier des polices SVG.

Conclusion

La police SVG a un niveau de popularité assez élevé et de nombreux cas où elle constitue une meilleure solution que les autres polices. Mais pour décider si ce format est le bon choix pour votre projet, vous feriez mieux de connaître d’abord ses avantages et ses inconvénients.

Si vous souhaitez travailler avec SVG en ligne sans charger de logiciel supplémentaire, vous pouvez utiliser applications multiplateformes et si vous vous concentrez sur le travail avec des polices, accédez à un autre groupe d’ applications pour travailler avec des polices vous y trouverez des convertisseurs pour transformer vos fichiers de polices SVG dans un format, des visionneuses et des fusions plus adaptés.