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é. Elle n'a pas été conçue 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.

Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.
Internet Explorer n'a pas envisagé de les implémenter, 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 WOFF. Cependant, d'autres outils comme le plugin Adobe SVG Viewer, Batik et des modèles de document 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

Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle de la spécification), et expliquons-en les détails.

<font id="Font1" horiz-adv-x="1000">
  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
      units-per-em="1000" cap-height="600" x-height="400"
      ascent="700" descent="300"
      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
    <font-face-src>
      <font-face-name name="Super Sans Bold"/>
    </font-face-src>
  </font-face>
  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
  <!-- more glyphs -->
</font>

Nous commençons avec l'élement <font>. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut horiz-adv-x définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.

L'élément  <font-face> est l'équivalent SVG de la déclaration CSS  @font-face. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est  font-family : Elle pourra alors être référencée via la propriété font-family présente dans les CSS et les SVG. Les attributs font-weight et font-style ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (ascenders).

Its child, the <font-face-src> element, corresponds to CSS' src descriptor in @font-face declarations. You can point to external sources for font declarations by means of its children <font-face-name> and <font-face-uri>. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.

Following <font-face-src> is a <missing-glyph> element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even <filter>, <a> or <script>. For simple glyphs, however, you can simply add a d attribute — this defines a shape for the glyph exactly like how standard SVG paths work.

The actual glyphs are then defined by <glyph> elements. The most important attribute is unicode. It defines the unicode codepoint represented by this glyph. If you also specify the lang attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.

There are two further elements that can be defined inside font: <hkern> and <vkern>. Each carries references to at least two characters (attributes u1 and u2) and an attribute k that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.

<hkern u1="A" u2="V" k="20" />

Referencing a font

When you have put together your font declaration as described above, you can just use a simple font-family attribute to actually apply the font to some SVG text:

<font>
  <font-face font-family="Super Sans" />
  <!-- and so on -->
</font>

<text font-family="Super Sans">My text uses Super Sans</text>

However, you are free to combine several methods for great freedom of how and where to define the font.

Option: Use CSS @font-face

You can use @font-face to reference remote (and not so remote) fonts:

<font id="Super_Sans">
  <!-- and so on -->
</font>

<style type="text/css">
@font-face {
  font-family: "Super Sans";
  src: url(#Super_Sans);
}
</style>

<text font-family="Super Sans">My text uses Super Sans</text>

Option: reference a remote font

The above mentioned font-face-uri element allows you to reference an external font, hence allowing greater re-usability:

<font>
  <font-face font-family="Super Sans">
    <font-face-src>
      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
    </font-face-src>
  </font-face>
</font>
 

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é :


  
    
      
    
  
 

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : jti77, enogael, Cyril-Levallois
 Dernière mise à jour par : jti77,