Découverte du SVG

logo-svg

 

SVG est un format d’images et de formes vectorielles en 2 dimensions basé sur le XML. Les SVGs sont des balises XML qui affichent des formes et graphiques supportant l’interactivité et l’animation, comme d’autres éléments HTML.

SVG a plusieurs avantages :

  • Les SVG sont indépendants de la résolution (car vectoriels) et s’affichent donc parfaitement sur tous les écrans et écrans dits « rétina », sans effet de flou.
  • Le support navigateur est bon (IE9+)
  • Les SVG peuvent être compressés car il s’agit de données texte, et le poids des images est moindre que les images bitmap classiques
  • Les SVG sont manipulables en CSS et JS
  • Ils embarquent des effets graphiques et des animations
  • Utilisables pour les icônes de la même façon qu’une police de caractères

SVG est très utile pour créer des graphiques de statistiques comme on en trouve dans de nombreuses applications, s’affichant parfaitement sur tout type et toute taille d’écran.

<svg xmlns="http://www.w3.org/2000/svg">
	<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
</svg> 
Code qui affiche un carré bleu

Création d’un SVG :

A partir d’un logiciel d’édition vectoriel comme Adobe Illustrator, il est simple d’exporter des formes en SVG. Le code SVG est alors généré dans un fichier .svg, visible dans un navigateur et éditable dans un éditeur de texte.

Méthode d’insertion dans une page web :

<img src="mySVG.svg" alt="" />
En image
.element {background-image: url(mySVG.svg);}
En image de fond
<object type="image/svg+xml" data="mySVG.svg"><!-- fallback --></object>
Avec la balise object
<iframe src="mySVG.svg"><!-- fallback --></iframe>
En iframe
<embed type="image/svg+xml" src="mySVG.svg" />
Avec la balise embed
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" …>
<!-- contenu svg -->
</svg>
Avec la balise SVG (méthode la plus utilisée)

Eléments de base :

<rect x="10" y="10" height="100" width="100"/>

<circle cx="100" cy="100" r="75" fill="blue » stroke-width= »5 » stroke= »green » /> 

<polygon fill = "#FF931E" stroke = "#ED1C24" stroke-width = "5" points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
Rectangle/ carré, cercle/ ellipse, polygone

Exemple de rendu (avec des formes supplémentaires) :
svg-formes

Il s’agit donc simplement de définir des attributs permettant de dessiner et de placer la forme sur la page (hauteur, largeur, rayon, x et y).
Des attributs de présentation sont également présents et permettent d’ajouter du style à la forme (épaisseur et couleur du contour, couleur de fond….).

circle {
fill: red;
stroke : black;
stroke-width: 8px ;
}
Cela peut également être défini en CSS

Animations SVG :

Les SVG possèdent nativement des attributs d’animations :

  • Element <animate> : pour animer un des attributs du SVG (spécifié juste après).

On spécifie la valeur de début de l’attribut, sa valeur de fin, la durée, le nombre de répétitions de l’animation (ici : infini).

<circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
    <animate attributeName="cx" attributeType="XML"
         from="30"  to="470"
         begin="0s" dur="5s"
         fill="remove" repeatCount="indefinite"/>
</circle>

  • Element <animateTransform> : il peut animer l’attribut Transform d’une forme. Cela peut être la rotation, l’échelle, la translation, l’orientation
<rect x="10" y="10" height="110" width="110"
     style="stroke:#ff0000; fill: #0000ff">

    <animateTransform
        attributeName="transform"
        begin="0s"
        dur="20s"
        type="rotate"
        from="0 60 60"
        to="360 60 60"
        repeatCount="indefinite"
    />
</rect>
  • Elément <animateMotion> : permet d’animer la forme suivant un chemin défini. Elle se déplacera en suivant la forme définie.
<rect x="0" y="0" width="30" height="15"
      style="stroke: #ff0000; fill: none;">
      <animateMotion
          path="M10,50 q60,50 100,0 q60,-50 100,0"
          begin="0s" dur="10s" repeatCount="indefinite"
          />
  </rect>

Il est possible de combiner des animations en définissant le moment de début de la seconde, par la fin de la première.

Animations et transitions CSS :

.slice path {
     stroke-dashoffset: 650;
     transition: fill .3s linear;
 }
 .slice-1 path :hover {
     fill :red;
     animation: draw 2.6s ease forwards;
 }

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

Au survol de la forme, ceci va changer la position du début du tracé de 650 à 0 en 2.6 secondes.

Interactions Javascript :

Il est possible d’agir sur les SVG en Javascript, d’écouter les animations et transitions et d’en déclencher à tout moment. Cela donne des effets sympa comme sur ce site.

var elementSVG= document.getElementsByClassName('forme') ;
// détecte le préfixe nécessaires au navigateur
    function whichAnimationEvent(){
        var t,
        el = document.createElement('fakeelement'),
        animations = {
          'animation'      :'animationend',
          'OAnimation'     :'oAnimationEnd',
          'MozAnimation'   :'animationend',
          'WebkitAnimation':'webkitAnimationEnd'
        };

        for(t in animations){
            if( el.style[t] !== undefined ){
                return animations[t];
            }
        }
    }

    // écoute la fin de l'animation et déclenche alors une transition sur un autre élement
    var animationEvent = whichAnimationEvent();
    elementSVG.addEventListener(animationEvent, function(e) {
        if(e.animationName == 'dash'){
            document.getElementsByTagName('article')[0].className += ' background';
            autreElementSVG.style.transition = 'stroke-dasharray .6s ease-out';
        }
    });
Exemple de code pour faire cela

Masques :

Une forme SVG peut être un masque pour une autre forme. La seconde ne sera visible « qu’à travers » la première.

<svg>
  <defs>
    <mask id="mask2" x="0" y="0" width="100" height="100" >
      <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
    </mask>
  </defs>

  <rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>
</svg>
Le cercle est un masque pour le carré bleu

Rendu:
svg-mask
Il est possible de faire des masques très élaborés et, vous l’aurez compris, de les animer à loisir pour dévoiler d’autres formes.

Filtres :

Il est possible de définir des filtres et de les appliquer aux formes SVG (flou, ombre, halo).

<defs>
      <filter id="blurFilter" y="-5" height="40"
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
      </filter>
  </defs>

  <ellipse cx="155" cy="60" rx="25" ry="15"
           style="stroke: none; fill: #0000ff; filter: url(#blurFilter);" />

Ici nous définissons le filtre, puis nous l’appliquons à notre ellipse en tant qu’attribut de l’ellipse.

Rendu (à droite avec le filtre) :
svg-filtres

En icônes et images de décoration :

SVG est très utile pour les icônes de toute sorte : au lieu de faire l’icône en image, nous la faisons en SVG. L’avantage est qu’elle ne sera jamais pixellisée (ou floue) sur les écrans à haute densité.

Nul besoin donc de créer des versions différentes pour les différents écrans (ce qui est encore nécessaire avec des images de fond classique).
Une méthode plus élaborée consiste même à importer toutes nos icônes SVG dans une application qui les convertit en police de caractère.
Chacune de nos icônes est alors un caractère pour le navigateur.
Nos icônes répondent donc aux règles d’un texte classique pour le CSS, ce qui les rend bien plus faciles à manipuler (taille, couleur, hauteur de ligne…), avec l’avantage d’être toujours bien nettes sur tous les écrans.
Cette application est Icomoon (lien plus bas).

Voici pour cette découverte du SVG, j’espère que cela vous sera utile !

Outils :

http://petercollingridge.appspot.com/svg-editor
https://icomoon.io/app/
https://github.com/svg/svgo

Ressources :

http://tutorials.jenkov.com/svg/index.html
http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

Aller plus loin :

Animations poussées (comme le morphing) :
http://snapsvg.io/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.