Icon-font vs SVG
Fight !
Vincent De Oliveira · @iamvdo
yahoo.com (20 décembre 1996), fnac.com (11 mai 2000), amazon.com (9 juin 2000), System 1 Mac (1984)
Beaucoup d'icones
SPRITES FTW
Sprite utilisé par Google Documents
Ecran faible densité vs. écran haute densité
Création d'images adaptées: kiwi.png, kiwi@2x.png, kiwi@2.6x.png, etc...
Icones par Freepik
Ce n'est pas viable
Surtout pour des sprites !
Les icones vectorielles
Icon-font
- Police de caractères
- Rendu possible grâce à
@font-face
@font-face {
font-family: myIcons; src: url(myIcons.woff);
}
.element { font-family: myIcons; }
Concrètement, c'est un hack!
SVG
- Format d'image vectoriel
- C'est du XML
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="yellow" />
<rect width="50" height="50" x="50" y="50" fill="blue" />
</svg>
SVG: Scalable Vector Graphics
Scalable.
Vector.
Graphics!!!
Comparatif
| Icon-font |
SVG |
| C'est un hack |
C'est son rôle |
|
WIN |
KTHXBYE
Bon, allons plus loin…
Utilisation
| Icon-font |
SVG |
- Nombreux set d'icones prêt à l'emploi
|
|
|
|
Création
| Icon-font |
SVG |
- Complexe
- Des outils (icomoon.io), mais nécessite un SVG
- Donc…
|
- N'importe quel outil vectoriel
- On peut apprendre le SVG : c'est du XML
|
|
|
Créer un SVG avec AI, c’est comme créer du HTML avec Dreamweaver
Intégration
| Icon-font |
SVG |
- 1 seule méthode d'inclusion
|
- 7 méthodes d'inclusion
- Inline,
<use>
<object>, <iframe>, <embed><img>, background-image
|
|
|
Fallback
| Icon-font |
SVG |
|
|
|
|
|
|
Zone de test
|
|
|
|
Forme, couleur
| Icon-font |
SVG |
|
- Plusieurs formes indépendantes et réutilisables
|
|
- Plusieurs couleurs et styles avancés
|
|
|
En haut: police d'icones, en bas: SVG
Réutilisabilité des formes
Réutilisabilité des formes
| Icon-font |
SVG |
|
- Facile
- Partie intégrante du SVG
|
|
|
Everything is OK
Half full, half empty
Soon out of storage
Get more storage!
<defs> et <use>
<svg>
<defs>
<circle id="forme" cx="50" cy="50" r="10" />
</defs>
<use xlink:href="#forme" />
<use xlink:href="#forme" style="..." />
</svg>
<symbol>
<svg>
<defs>
<circle id="forme" cx="50" cy="50" r="10" />
</defs>
<symbol id="icon" viewBox="0 0 100 100">
<use xlink:href="#forme" style="..." />
</symbol>
<use xlink:href="#icon" style="..." />
</svg>
Plusieurs <symbol>
==
Sprites SVG
Positionnement
Alignement
Taille
Positionnement, Alignement, Taille
| Icon-font |
SVG |
- Propriétés de texte
font-family, font-size, font-weight, line-height, vertical-align, etc.
- Métrique de la police
- ligne de base, hauteur d’x, aspect ratio, ascendante, descendante, etc.
|
|
|
|
TEXTE != FORME
Personne n'aime modifier le line-height
Interactions, animations
| Icon-font |
SVG |
|
- Intégrées
- Animations SMIL (même si…)
- Animations CSS
- JavaScript
|
|
|
StopWatch'App
Save time. Now.
Cliquez pour recevoir un mail
CSS avancées
| Icon-font |
SVG |
|
- Dégradés CSS
- Masques, filtres, mode de fusion, etc.
- Propriétés custom CSS (variables)
|
|
|
Propriétés custom (variables) supportées par Firefox
<svg>
<style>
.symbol--low { --remaining: 80; }
</style>
<use xlink:href="#symbol" class="symbol--low" />
</svg>
<svg>
<symbol id="symbol" clip-path="url(#clip)">
<style>
.remaining {
fill: hsl(var(--remaining), 100%, 50%);
transform: translateY(calc(var(--remaining) * 1px));
}
</style>
<path class="remaining" d="..." />
</symbol>
</svg>
JavaScript
| Icon-font |
SVG |
|
- Oui
- Inclus dans l'icone
- Accès au SVG DOM
|
|
|
RWD
| Icon-font |
SVG |
|
- Véritablement responsive
- L'image embarque les différentes «versions»
- C'est le parent qui est le viewport
|
|
|
Bénéfices SVG
- (Assez) facile à créer
- Réutilisable
- Multi-effets
- Positionnement simplifié
- Dégradation gracieuse
- Meilleure a11y
- CSS + JS
Inconvénients
- Encore peu de sets prêts à l'emploi
- Workflow complet pas évident
- Compatibilité navigateur non homogène
- Parait plus complexe
Ressources
- Articles / Blog
- Sets de polices d'icones
- Sets mixte (SVG & icon-font)
- Ligatures
- Outils
