Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.
Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Il n'a pas été conçu pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.
Internet Explorer n'a pas examiné la mise en œuvre de ceci, la fonctionnalité a été supprimée de Chrome 38 (et Opera 25) et Firefox a reporté sa mise en œuvre indéfiniment pour se concentrer sur le WOFF. Cependant, d'autres outils comme le plugin Adobe SVG Viewer, Batik et des morceaux d'Inkscape supportent l'incorporation des Police d'écriture SVG.
La base pour définir une police SVG est l'élément <font>.
Définir une police
Il y a quelques ingrédients nécessaires pour intégrer une police en SVG. On va regarder un exemple de déclaration (celle de la spécification), et expliquer les détails.
On commence avec l'élément <font> . Il comporte un attribut id, pour lui permettre d'être référencé par une adresse URI (voir ci-dessous). L'attribut horiz-adv-x détermine la largeur qu'un caractère a en moyenne comparé aux définitions de chemin de glyphes uniques. La valeur définie à 1000 est une valeur raisonnable pour travailler avec. Il y a plusieurs attributs d'accompagnement qui aident à définir plus précisément la disposition basique de la glyph-box.
L'élément <font-face> est l'équivalent SVG de la déclaration CSS @font-face. Il définit les propriétés basiques de la police finale tel que le style, l'épaisseur, etc. Dans l'exemple au dessus le premier et le plus important à être définit est font-family, dont la valeur peut être référencée dans les propriétés font-family en CSS et SVG. les attributs font-weight et font-style ont le même but que les descripteurs équivalents en CSS. Tous les attributs suivants sont des instructions de rendu pour le moteur de rendu de police, par exemple, de combien de hauteurs en général les glyphes sont ascendant.
Son enfant, l'élément <font-face-src>, correspond au descripteur src de la déclaration CSS @font-face. Vous pouvez indiquer des sources externes pour les déclarations de police au moyen de ses enfants <font-face-name> et <font-face-uri>. L'exemple ci-dessus indique que si le moteur de rendu a une police locale disponibles nommée "Super Sans Bold", elle doit utiliser à la place.
Après <font-face-src> vient l'élément <missing-glyph>. Il défini ce qui sera affiché si un certain glyphe n'a pas été trouvé dans la police et s'il n'y a pas de mécanismes de repli. Il montre également comment les glyphes sont créés : En ajoutant simplement tout contenu graphique SVG à l'intérieur. Vous pouvez utiliser littéralement tous les autres éléments SVG ici, même <filter>, <a> ou <script>. Pour de simples glyphes, cependant, vous pouvez simplement ajouter un attribut d — qui défini la forme du glyphe exactement comme fonctionnent les chemins standards SVG.
Les glyphes réels sont ensuite définis par les éléments <glyph>. L'attribut le plus important est unicode. il définit le codepoint unicode représenté par ce glyphe. Si vous spécifiez également l'attribut lang à un glyphe, vous pouvez le restreindre exclusivement dans certaines langues (représentées par xml:lang dans la cible). Encore une fois, vous pouvez utiliser arbitrairement le SVG pour définir le glyphe, ce qui permet de grands effets en soutenant les agents utilisateurs.
Il y a deux autres éléments qui peuvent être définis à l'intérieur de la police : <hkern> et <vkern>. Chaque balise renvoie à au moins deux caractères (attributs u1 et u2) avec un attribut k qui détermine de combien la distance entre les caractères doit être diminuée. L'exemple ci-dessous indique les agents utilisateurs pour placer les caractères "A" et "V" plus rapprochés que la distance standard entre des caractères.
Référencer une police
Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut font-family pour réellement appliquer la police à un texte SVG :
My text uses Super Sans
Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.
Option : Utiliser le CSS @font-face
Vous pouvez utiliser @font-face pour les polices externes de référence :
My text uses Super Sans
Option : référencer une police externe
L'élément mentionné font-face-uri vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :