SVG
Créer des polices

Introduction

Remarques

une simple police

Un exemple simple d'une police svg. Quelques points à noter ici:

• le système de coordonnées des glyphes est en opposition avec le système de coordonnées habituel en svg. l'axe y pointe vers le haut . Le point 0,0 est dans le coin inférieur droit.
• Tous les chemins d'une police doivent être dessinés dans le sens inverse des aiguilles d'une montre.
• Dans la plupart des outils, seul l'attribut d de l'élément glyph est pris en charge. Les éléments enfants ne fonctionneront pas, bien qu'ils soient techniquement autorisés.

<svg xmlns="http://www.w3.org/2000/svg">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode="a" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
    <glyph unicode="b" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
  </font>
</svg>

Si vous avez des glyphes plus larges ou plus étroits, changez simplement le paramètre horiz-adv-x sur l'élément de glyphe lui-même.

<glyph unicode="a" horiz-adv-x="512" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />

sélection de polices

la propriété unicode est utilisée pour la sélection ultérieure des glyphes. Vous pouvez utiliser des lettres simples ou des points de code Unicode ainsi que des ligatures (combinaison de lettres ou de points de code Unicode)

• unicode="abc"
• unicode="ab"
• unicode="abab"
• unicode="a"
• unicode="b"

Les glyphes sont toujours sélectionnés par première correspondance, de même que toutes les ligatures avant un seul caractère.

les points de code unicode peuvent être écrits en décimal { ou en notation hexadécimale &#x1f .

ascension, descente et ligne de base

La propriété units-per-em est l'une des propriétés de police les plus importantes. Il est utilisé pour donner un sens à toute valeur de toute autre propriété.

la spécification de la police CSS2 a une belle définition du em sqare :

Certaines valeurs, telles que les mesures de largeur, sont exprimées en unités relatives à un carré abstrait dont la hauteur correspond à la distance prévue entre les lignes de type de même taille

la ligne de base par défaut est à 0 dans le carré em. pour le calcul de la hauteur de la ligne et les objectifs d'alignement, les deux propriétés ascendantes et descendantes sont les plus importantes.

L'ascension est la distance maximale entre la ligne de base et le point le plus élevé de votre plus grand glyphe. Usaually c'est 1em, donc la valeur que vous avez donnée pour les unités-per-em.

La descente est la distance maximale entre la ligne de base et le point le plus bas de tout glyphe de votre police.

Voici une police avec des glyphes rendant une ligne au plus bas et au plus haut point, ainsi qu'à la ligne de base.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000"
               descent="500"
               ascent="1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
    <glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
    <glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
  </font>
</svg>

La montée et la descente sont utilisées pour déterminer la hauteur de la ligne. Les unités par em et la ligne de base sont utilisées pour déterminer la position et la taille par rapport aux autres polices utilisées.