SVG Font

Le format de police vectorielle original — un XML lisible par l'homme qui mappe des chemins SVG sur des glyphes de police.

.svg Format de police SVG
TypeVecteur basé sur XML
CompressionAucune (texte brut)
Taille du fichierLa plus grande de tous les formats
Prise en chargeSafari uniquement (obsolète ailleurs)
Idéal pourDébogage, format source
BobcornSource du pipeline

Qu'est-ce qu'une police SVG ?

Les polices SVG ont été définies dans le cadre de la spécification SVG 1.1, publiée par le W3C. Contrairement aux formats de polices binaires traditionnels, les polices SVG intègrent les contours des glyphes sous forme de données de chemin SVG dans un élément <font>. Chaque glyphe est représenté par un élément <glyph> dont l'attribut d contient le chemin vectoriel décrivant la forme.

En substance, les polices SVG sont des dessins SVG conditionnés comme une police. La même syntaxe de chemin que vous utilisez pour dessiner des formes dans un fichier SVG est réutilisée pour définir les lettres et les contours des icônes. Cela les rend uniques en matière d'inspection — vous pouvez ouvrir une police SVG dans n'importe quel éditeur de texte et lire la géométrie réelle de chaque glyphe.

Fonctionnement

Un fichier de police SVG encapsule les chemins de glyphes dans une structure XML standard. Voici un exemple simplifié :

Structure d'une police SVG 
<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

L'élément <font-face> déclare le nom de la famille de polices et le système de coordonnées (units-per-em). Chaque <glyph> mappe un point de code Unicode sur un chemin vectoriel. L'attribut d utilise exactement la même syntaxe de chemin qu'un élément SVG <path> ordinaire.

C'est le format intermédiaire dans le pipeline de Bobcorn. Les icônes SVG individuelles sont d'abord assemblées dans cette structure de police SVG, qui est ensuite convertie en formats binaires : SVG Font → TTF → WOFF / WOFF2 / EOT.

Avantages et inconvénients

    Avantages
  • Lisible par l'homme — ouvrez dans n'importe quel éditeur de texte
  • Débogage facile des chemins de glyphes et des métadonnées
  • Entièrement vectoriel, évolutivité infinie
  • Pas de compilation nécessaire pour voir la source
    Inconvénients
  • Taille de fichier la plus grande de tous les formats de polices
  • Obsolète dans Chrome, Firefox et Edge
  • Aucune compression
  • Pas de prise en charge du crénage
  • Mauvaise qualité de rendu sous Windows

Prise en charge par les navigateurs

La prise en charge des polices SVG a été supprimée de la plupart des navigateurs principaux. Chrome a abandonné la prise en charge des polices SVG dans la version 38 (2014). Firefox ne l'a jamais implémentée. Edge (basé sur Chromium) ne le prend pas en charge non plus. Le seul navigateur restant est Safari et iOS Safari, qui rendent encore les polices SVG.

Pour une utilisation web pratique, la police SVG est essentiellement un format hérité. Vous ne devriez jamais compter sur elle comme format de livraison pour les utilisateurs finaux. Utilisez plutôt WOFF2.

Quand utiliser SVG Font

  • Débogage des problèmes de génération de polices — puisqu'il s'agit d'un XML brut, vous pouvez lire les données de chemin directement et les comparer aux icônes SVG originales pour diagnostiquer les problèmes.
  • Comme format source dans les pipelines de compilation — de nombreux outils de génération de polices (dont Bobcorn) utilisent SVG Font comme représentation intermédiaire avant la conversion en formats binaires.
  • Support iOS hérité < 5 — extrêmement rare aujourd'hui, mais les anciens appareils iOS antérieurs à la prise en charge de WOFF ne pouvaient utiliser que des polices SVG pour les polices web.
Bobcorn
Dans Bobcorn, SVG Font est la première étape du pipeline de génération. Vos icônes SVG sont assemblées dans une police SVG, qui est ensuite convertie en TTF, puis de TTF en WOFF, WOFF2 et EOT. Vous pouvez exporter le fichier de police SVG à des fins de débogage — c'est particulièrement utile lorsqu'un glyphe semble incorrect et que vous devez inspecter les données de chemin brutes.