Icon-font vs SVG

Fight !

Vincent De Oliveira · @iamvdo

Hello, c'est @iamvdo

Des icones ?

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

Retina, HD

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
Création

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

Intégration

Icon-font SVG
  • 1 seule méthode d'inclusion
  • 7 méthodes d'inclusion
    • Inline, <use>
    • <object>, <iframe>, <embed>
    • <img>, background-image

Support
Fallback

Support

Icon-font SVG
  • IE6+
  • Pas Opera Mini
  • IE9+
  • Opera Mini

Fallback

Icon-font SVG
Zone de test
  • Ligatures dans SVG

Forme
Couleur

Forme, couleur

Icon-font SVG
  • Une seule forme
  • Plusieurs formes indépendantes et réutilisables
  • Une seule couleur
  • Plusieurs couleurs et styles avancés

En haut: police d'icones, en bas: SVG

Images grunticon.com

Réutilisabilité des formes

Réutilisabilité des formes

Icon-font SVG
  • Faible et complexe
  • Facile
  • Partie intégrante du SVG
Created by Cees de Vries, from the Noun Project

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.
  • Suit le box model
    • width, height, etc.

Icones fontawesome.com

TEXTE != FORME

Personne n'aime modifier le line-height

Interactions
Animations

Interactions, animations

Icon-font SVG
  • Pas vraiment
  • Intégrées
  • Animations SMIL (même si…)
  • Animations CSS
  • JavaScript

StopWatch'App
Save time. Now.

Cliquez pour recevoir un mail

CSS avancées

CSS avancées

Icon-font SVG
  • Pas vraiment
  • 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

JavaScript

Icon-font SVG
  • Non, pas vraiment
  • Oui
  • Inclus dans l'icone
  • Accès au SVG DOM

Icone SVG entièrement créée via JavaScript

RWD

RWD

Icon-font SVG
  • Non
  • Véritablement responsive
  • L'image embarque les différentes «versions»
  • C'est le parent qui est le viewport

Icones useiconic.com

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

Merci, questions?

Vincent De Oliveira · @iamvdo

slides.iamvdo.me/kiwiparty15

Ressources

@iamvdo
slides.iamvdo.me/kiwiparty15