Le Blog

Le blog laboratoire de F.L.D. Studio
0

Workflow SVG

SVG

SVG : Scalable Vector Graphics (en français « graphique vectoriel adaptable ») est un format d'image supportée à partir de IE9 et tous les autres navigateurs modernes qui permet de s'affranchir du pixel et de proposer des images disponibles dans toutes sortes de résolution sans perte de qualité à l'aide d'une seule définition. A noter, l'image SVG est composé de code source et à ce titre est parfaitement éditable à l'aide d'un éditeur de texte. 

La norme SVG à été établie par le W3C en 2001. SVG 1.1 est arrivé en 2003, SVG 1.2 et seconde édition en 2011. La version 2, SVG 2.0 est actuellement à l'état de 'working draft' donc non encore utilisable.

Un article de  Sara Soueidan  traduit en français : 

Définition d'un workflow de création de sprite SVG en ligne :

Un script pour exporter les svg à partir de Illustrator : https://github.com/iconic/illustrator-svg-exporter

  • OU recupérer un SVG sur une plateforme telle : 

  • Optimiser le code SVG avec :

Il est interessant de noter aussi que un dessin en .png pése plus lourd que son équivalent en .svg (après son optimisation).

Ainsi une image de 13Ko au format .png (512x512) avec un équivalent 'brut'  fournis par Illustrator et qui pése 19Ko, descend à 12Ko après optimisation. L'optimisation est donc une étape très importante.

Ou placer le code

Utiliser le SVG en l'embarquant directement dans une page HTML permet une meilleure accécibilité pour les lecteurs d'écrans  :

  • Jaws 15 et NVDA 2014.1 pour Internet Explorer 11, Firefox 28 et Chrome 30 sous Windows.
  • VoiceOver pour Safari sous iOS/OSX
  • TalkBAck pour Chrome 30 sous Android

Cosneils pour l'accéssibilité : http://www.sitepoint.com/tips-accessible-svg/

Création de la sprite-map

Création d'un sprite SVG en ligne à embarquer dans le document .html

Pour un code plus propre en PHP on peut utiliser ce code

$svg =  file_get_contents('chemin/du/script-avec-le-svg.php'); 

echo $svg;

En utilisant un doctype HTML5 il n'est pas necessaire de fournir un name-space au SVG.

Cette simple déclaration est sufisante :

<svg version="1.1" width="300" height="200">...</svg>
  • Placer le SVG dans un sprite à l'aide de cette structure  à placer après la balise </head> :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;"> 
<symbol id="icon-nom-icone" viewBox="0 0 xxx xxx"> 
<title>titre image</title>
<!--ici la définition du svg-->
<path d="...."/> </path> 
</symbol> 
<symbol id="icon-nom-icone" viewBox="0 0 xxx xxx">
<title>titre image</title>
<path d="...ici la définition du svg..."/> </path> 
</symbol>
</svg>

Explication des balises

  • <svg> est la racine d’un graphisme SVG
  • Les objets doivent avoir un identificateur XML afin de pouvoir être identifiés par un ID , xlink est le simple XLink standard on le définit avec son namespace : xmlns:xlink="http://www.w3.org/1999/xlink" A noter : si on affiche du svg défini in-line on n'a pas besoins de définir de namespace.
  • Par défaut les navigateurs affichent le SVG,(300x150) même vide, c'est pourquoi on doit preciser un display:none ou utiliser une classe préalablement définie (ex: class="dn" et .dn{display:none;) pour masquer le sprite.
  • La balise <tittle> sert à documenter l'image.
  • <symbol> permet de définir un objet graphique réutilisable avec <use>, il  ressemble à <g>, sauf que l’objet lui-même n’est pas dessiné , il  possède les attributs viewBox et preserveAspectRatio en plus
  • viewBox permet d’adapter les dimensions d’un graphisme à celles du conteneur viewport  (x = 0, en haut et y = 0, à gauche et la dimension de l'image.(width et height en pixels par défaut) En rêgle générale on laisse les dimenssion initiale de la conception de l'image. Viewbox permet de greffer un système de coordonnés sur les dimensions réelles d’un viewport, c'est lui qui permet la "mise à l'echelle" de l'image par rapport à son contener.
  • <use> permet de réutiliser les objets définis dans <symbol>

Valeur à remplacer :

  • id : Identificatif dans le sprite du SVG ( exemple facebook )
  • viewBox xxx avec  les valeurs propres du SVG ' exemple : viewBox="0 0 512 512" )
  • title : titre du SVG ( exemple : logo facebook )
  • d = Code de définition du SVG

CSS

  • Styliser en CSS avec une classe, exemple .icon-facebook, et definir une couleur de fond (background-color:#, une couleur de remplissage (fill:#), etc... 

Exemple :

.ico{ 
width:64px; 
height: 64px; 
fill:#fff; 
background-color: #000; 
} 

use.bleu{ 
 fill: blue; 
}
use.bleu:hover{ 
 fill:red; 
}

Utiliser dans le HTML

Avec une pointe d'accésibilité en prime.

<svg class="ico" aria-hidden="true" role="presentation"> 
 <use xlink:href="#facebook" class="bleu">logo facebook</use> 
</svg>

A noter : le sprite est embarqué dans la page il ne peut donc pas être mis en cache. Si on souhaite le faire il faut utiliser un sprite externe (exemple : map-sprite.svg) , dans ce cas l'appel à un élément du sprite est realisé comme ceci :

<svg class="ico">
 <use xlink:href="path/to/map-sprite.svg#facebook"></use>
<svg>

(vue dans : http://calendar.perfplanet.com/2014/tips-for-optimising-svg-delivery-for-the-web/ )

Le meilleur des deux monde est certainement d'utiliser une méthode de chargement de la mapsprite en utilisant AJAX : https://css-tricks.com/ajaxing-svg-sprite/

Exemple sur CodePen

Test d'utilisation d'un sprite SVG et positionnement CSS

See the Pen Sprite SVG by Du Marais (@DjF) on CodePen.


Pour styliser via CSS un dessin SVG possédant déjà ses propres attributs de présentations on utilisera en CSS une classe pour forcer les SVG à afficher les couleurs définies dans les classes :

See the Pen PPzGrb by Du Marais ( @DjF ) on CodePen .

Articles à lires : 

Pour commencer

Le slide de la conférence de Vincent De Oliveira  à la KiwiParty de 2016 : http://iamvdo.me/conf/kiwiparty-2016

Techniques du sprite

Autres : 

http://tutorials.jenkov.com/svg/index.html ( tout, tout, tout + video )

JS pour animer du SVG

Catégories: Développement WEB, svg

Commentaires: Pas de commentaires

Envoyer un commentaire