Introduction au SVG

Format d’image pour les vecteurs graphiques, SVG signifie ScalableVectorGraphic. A partir de Adobe Illustrator, on peut travailler avec les SVG.
Il faut dire que l’utilisation du SVG sur le web est assez aisée. Cependant, il est nécessaire de connaitre un bon nombre de choses.

L’intêret d’utiliser le SVG

4 raisons simples :

  • Très bonne compression avec une taille de fichier réduite
  • Fichier adaptable à toutes les dimensions sans perte de clarté, sauf éventuellement à des tailles très réduites
  • Rendu excellent en affichage Retina
  • Bon contrôle au niveau du design, des filtres et de l’interactivité

Prise en main

Pour commencer, voilà un petit dessin sur Adobe Illustrator :

svg-oiseau

La première chose qu’il faut remarquer est que l’artboard représente les dimensions exactes du dessin.
Il faut savoir que le canevas est important en SVG et sur Illustrator, il est possible de sauvegarder directement le fichier en SVG.

illustrator

Lors de la sauvegarde, le logiciel Adobe Illustrator ouvre une nouvelle boîte de dialogue proposant différentes options de SVG.
Il faut le dire franchement, les profils SVG possèdent une spécification entière. De notre côté, nous avons choisis SVG 1.1 qui est le plus standardiser.

svg-options

Une chose intéressante à propos du SVG, c’est qu’il y a deux options possibles avant la sauvegarde du fichier. La première est la sauvegarde au format en lui-même en cliquant sur OK et la seconde s’agit d’appuyer sur « SVG Code… », ce qui permettra d’avoir accès au code du SVG . En effet, en appuyant sur « SVG Code… », un TextEdit s’ouvrira automatiquement contenant le code du fichier.

svg-code

Il faut savoir que les deux options sont utiles l’un comme l’autre comme on peut le constater :

L’utilisation du SVG comme une IMG

Si l’on effectue la sauvegarde d’un fichier au format SVG, il sera possible de l’utiliser directement dans une balise img.

Dans Adobe Illustrator, par exemple l’espace de travail avait des dimensions de 600px par 500px.
L’image sauvegardée au format SVG aura les mêmes dimensions sur la page si il n’y aucun changement opéré. Pour la modification de la taille, il ne suffira que de sélectionner img puis changer height et width, comme sur n’importe quel format comme JPG ou PNG.

La compatibilité sur les navigateurs

L’utilisation du format SVG est supportée par les différents navigateurs actuels sauf avec Internet Explorer 8 et ses versions antérieures, ainsi que l’OS Android 2.3 et ses versions antérieures.

Pour des résultats avec des navigateurs non compatibles, cela consiste à tester la compatibilité avec la bibliothèque Modernizr et de changer la src de l’image :

L’utilisation de SVG inline

Comme pour l’enregistrement au format SVG, il est possible d’accéder au code de l’image. Il suffira alors de faire un copier/coller du code dans l’HTML pour que l’image puisse apparaître:

Cela s’avère bien pratique étant donné que l’image se situe dans le document sans impliquer une requête http de plus.
Quelques petits inconvénients : document potentiellement engorgé et impossibilité de mettre le document en cache.

Il faut le dire, SVG ressemble énormément au HTML puisque tous les deux représentent des langages XML. Dans le premier dessin réalisé, il existe deux éléments constituants celui-ci : un path (chemin) et une ellipse.Nous allons leurs donner des noms de classes comme pour un élément HTML :

Ainsi, le contrôle de ces éléments est possible avec CSS, que ce soit dans la page proprement dite que dans un fichier externe.

L’utilisation de SVG comme un object

Dans le cas où le SVG inline ne vous est pas adapté, il est à rappeler que celui-ci comporte quelques inconvénients, il est possible de mettre en place un lien vers le fichier SVG tout en gardant la possibilité de manipulation avec CSS.

Répondre