Utiliser SVG

Dans cet article complet et clair, Chris Coyier s'intéresse à la mise en oeuvre concrète de SVG pour votre design. Pas de théorie, cercles, rectangles, non, rien que du concret.

Par

SVG est un format d'image pour les vecteurs graphiques. Littéralement, cela signifie Scalable Vector Graphic. En gros, ce avec quoi vous travaillez sur Adobe Illustrator. Utiliser SVG sur le web est très facile, mais il y a pas mal de choses à savoir.

Mais pourquoi utiliser SVG ?

  • Taille de fichier réduite, bonne compression
  • adaptable à toutes dimensions sans perdre en clarté, sauf peut-être à des tailles extrêmement réduites
  • Rend super bien en affichage retina
  • Bon contrôle du design, interactivité et filtres

Un petit SVG pour commencer

Dessinons quelque chose sur Adobe Illustrator (NdT : ou Inkscape, logiciel gratuit, ou Sketch pour Mac). J'ai fait un kiwi sur un ovale :

kiwi noir sur ovale gris en svg

Remarquez bien que l'espace de travail (artboard) est réduit aux dimensions exactes du dessin. Le canevas est important en SVG, tout comme en PNG ou en JPG.

Vous pouvez sauvegarder le fichier directement en SVG sur Illustrator.

enregistrer svg sur illustrator

Quand vous le sauvegardez, Adobe ouvre une nouvelle boîte de dialogue vous proposant des options SVG. Honnêtement je ne connais pas grand chose là-dessus, il y a une spécification entière pour les profiles SVG. Pour moi, SVG 1.1 fonctionne très bien.

boîte de dialogue sur illustrator

Ce qui est intéressant ici, c'est que vous pouvez soit faire OK et enregistrer le fichier, soit appuyer sur "SVG Code...", ce qui ouvrira TextEdit (sur Mac en tout cas) avec le code SVG à l'intérieur.

code svg

Les deux peuvent être utiles comme on va le voir.

Utiliser SVG comme une <img>

Si je sauvegarde SVG comme fichier, je peux l'utiliser directement dans une balise <img>.

<img src="kixi.svg" alt="Kiwi sur ovale">

Dans Illustrator, notre artboard mesurait 612px par 502px.

dimensions de notre artboart données par illustrator

C'est exactement la taille qu'aura votre image sur la page si vous ne changez rien. Pour modifier sa taille, il suffit de sélectionner img et de changer width et height, là encore comme vous le feriez pour n'importe quelle PNG ou JPG. Voici un exemple sur Codepen, vous pouvez jouer avec toutes les propriétés :

Kiwi vert sur ovale gris

Compatibilité navigateurs
Cette utilisation de SVG est supportée ainsi. En résumé, ça marche partout, sauf avec IE 8 et antérieurs, et Android 2.3 et antérieurs.

Si vous avez l'obligation de donner une solution pour les navigateurs non-compatibles, il y a plusieurs options que j'ai présentées dans des workshops (en anglais).

L'une d'elles consiste à tester la compatibilité avec Modernizr et échanger la src de l'image :

if (!Modernizr.svg) {
    $(".logo img").attr("src", "images/logo.png")
}

David Bushell a proposé une alternative très simple, si le JavaScript ne vous gêne pas dans votre HTML :

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

SVGeezy peut également résoudre votre problème. Nous reviendrons sur ces techniques de remplacement à mesure que nous avancerons dans cet article.

Utiliser SVG comme background-image

Tout aussi facile que img, vous pouvez l'utiliser dans CSS comme background-image .

// dans HTML

<a href="/" class="logo"
    Kiwi Corp
</a>

// dans CSS

.logo {
    display: block;
      text-indent: -9999px;
      width: 100px;
      height: 82px;
      background: url(kiwi.svg);
      background-size: 100px 82px;
}

Remarquez bien que nous avons calé la taille du background sur celle de l'élément logo. Si nous n'avions pas procédé ainsi, nous n'aurions qu'un petit bout (supérieur gauche) de l'élément SVG bien plus grand. Ces dimensions respectent les proportions de l'image originelle. Si vous ne connaissez pas les dimensions de l'image, vous pouvez également utiliser la valeur contain pour la propriété background-size afin d'être sûr que l'image sera bien affichée.

Compatibilité navigateurs
Cette utilisation de SVG est supportée ainsi, c'est à peu près la même que pour l'utilisation en tant qu'image, avec les mêmes limitations causées par IE 8 et antérieurs, et Android 2.3 et antérieurs.

Modernizr peut nous venir en aide, plus efficacement encore que pour l'image. Si nous remplaçons background-image en utilisant un format compatible, une seule requête HTTP sera faite au lieu de deux. Modernizr ajoute une classe "no-svg" à l'élément HTML s'il n'est pas compatible, voici notre CSS correspondant :

.main-header {
      background: url(logo.svg) no-repeat top left;
      background-size: contain;
}

.no-svg .main-header {
      background-image: url(logo.png);
}

Une autre technique intelligente, avec une saveur de "progressive enhancement" (NdT: Sur l'amélioration progressive, voir page articles), consiste à l'utiliser en conjonction avec des backgrounds multiples. SVG et les background multiples ont des compatibilités navigateurs très similaires, donc si le navigateur supporte les backgrounds multiples il supportera SVG, la déclaration fonctionnera (et primera sur toute déclaration précédente).

body {
    background: url(solutionderechange.png)
    background-image: url(image.svg), none;
}

Le problème avec <img> et background-image

...c'est que vous n'avez pas les mêmes possibilités de contrôler votre SVG avec CSS qu'avec ce qui suit. Continuez la lecture !

Utiliser SVG "inline"

Vous vous rappelez comment vous pouviez accéder au code SVG depuis Illustrator et l'enregistrer ? (Vous pourriez aussi ouvrir le fichier SVG dans un éditeur de texte et copier le code). Il suffit de copier/coller ce code dans votre HTML et l'image apparaîtra comme si vous aviez mis une image :

<body>

    <!-- copiez/collez votre code SVG ici, l'image apparaît ! -->

</body>

C'est pratique parce que l'image est déjà dans le document et n'implique pas une requête HTTP supplémentaire. En d'autres termes, on a les mêmes avantages qu'en utilisant une Data URI. Les mêmes désavantages également. Un document potentiellement engorgé et l'impossibilité de le mettre en cache.

Si vous utilisez un langage back-end qui peut aller chercher le fichier pour l'insérer, vous pouvez au moins mettre de l'ordre dans dans votre éditorialisation :

// avec PHP

<?php include("kiwi.svg"); ?>

D'abord optimiser

Ce ne sera sans doute pas un grand choc d'apprendre que le SVG que vous livre Adobe Illustrator n'est pas particulièrement optimisé. Il a un DOCTYPE et des notes du générateur et toutes ces sortes de choses. SVG est déjà très petit, mais pourquoi pas le réduire encore ? Peter Collingridge propose un outil SVG Optimiser. Uploadez votre SVG, downloadez la version optimisée. Dans la vidéo de Kyle Foster, il va même jusqu'à retirer les quelques sauts de lignes restant après optimisation.

Si vous êtes vraiment hardcore, il y a un outil Node JS pour le faire vous-même.

Maintenant vous pouvez contrôler avec CSS !

SVG ressemble beaucoup à HTML, parce que ce sont tous les deux des langages XML (des balises avec des trucs à l'intérieur). Dans notre dessin, nous avons en fait deux éléments constitutifs, une <ellipse> et un path (chemin). Entrons dans le code et donnons leur des noms de classes, comme pour n'importe quel élément HTML :

<svg ...>
      <ellipse class="ground" .../>
      <path class="kiwi" .../>
</svg>

Maintenant nous pouvons contrôler ces éléments avec CSS, que ce soit dans la page elle-même ou dans un fichier externe. Attention, les éléments SVG ont un ensemble de propriétés qui leur sont réservées, par exemple à la place de background-color on utilisera fill. Vous pouvez utiliser les choses habituelles, comme :hover.

// dans CSS

.kiwi {
      fill: #94d31b; 
}
.kiwi:hover {
      fill: #ace63c; 
}

Encore plus cool, SVG a tout un tas de filtres sympas. Par exemple pour le floutage :

// dans SVG

<svg ...>
      ...
      <filter id="pictureFilter" >
        <feGaussianBlur stdDeviation="5" />
      </filter> 
</svg>

Vous pouvez ensuite appliquer ceci dans votre CSS :

// dans CSS

.ground:hover {
      filter: url(#pictureFilter);
}

Voici un exemple sur Codepen de ce que ça peut donner :

See the Pen SVG with Filters by Chris Coyier (@chriscoyier) on CodePen.

Plus d'infos (en anglais) sur l'application de filtres à SVG, plus spécifiquement pour Opera et pour Microsoft.

Compatibilité navigateurs
Cette utilisation de SVG est supportée ainsi, là aussi avec les mêmes limitations causées par IE 8 et antérieurs, et Android 2.3 et antérieurs.

Une façon de gérer les solutions de rechange (fallback) pour ce type de SVG serait :

// dans SVG

<svg> ... </svg>
<div class="fallback"></div>

Puis on utilise Modernizr :

// dans CSS

.logo-fallback { 
      display: none;
      /* SVG et PNG doivent avoir les mêmes dimensions */
}
.no-svg .logo-fallback { 
      background-image: url(logo.png); 
}

Utiliser SVG comme un <object>

Si le SVG "inline" n'est pas votre tasse de thé (rappelez-vous qu'il comporte quelques inconvénients), vous pouvez créer un lien vers le fichier SVG tout en gardant la possibilité de le manipuler avec CSS en utilisant <object>.

//dans HTML

<object type="image/svg+xml" data="kiwi.svg" class="logo">
      Kiwi Logo <!-- image de rechange dans le CSS -->
</object>

Pour la solution de rechange, Modernizr nous aide à nouveau :

// dans CSS

.no-svg .logo {
      width: 200px;
      height: 164px;
      background-image: url(kiwi.png);
}

La mise en cache fonctionne bien et la compatibilité navigateurs est meilleure que toute autre solution. Par contre si vous voulez que CSS s'applique, vous ne pourrez pas le faire à partir de feuilles de styles externes, il faudra utiliser <style> à l'intérieur du fichier SVG lui-même.

// dans SVG

<svg ...>
      <style>
        /* style CSS pour SVG ici */
      </style>
      ...
</svg>

Data URI pour SVG

Pour réduire encore votre SVG, vous pouvez le convertir en Data URI. Mobilefish.com a un outil en ligne pour cela. Copiez/collez le contenu de votre fichier SVG, remplissez le formulaire et il affichera le résultat qu'il ne vous restera plus qu'à copier. Rappelez-vous de retirer les sauts de lignes dans le code qui vous est retourné, ça n'est pas indispensable mais vous irez au bout de la réduction. Ça ressemble à du volapük :

encodage en base64

Vous pouvez l'utiliser dans tous les cas cités précédemment (sauf inline <svg>qui n'aurait pas de sens), insérez le volapük là où il y a [data] dans les exemples ci-dessous :

comme <img>

// dans HTML

<img src="data:image/svg+xml;base64,[data]>

comme CSS

// dans CSS

.logo {
      background: url(data:image/svg+xml;base64,[data]);
}

comme <object>

// dans HTML

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>
      fallback
</object>

...et si vous avez un <style> embarqué dans votre SVG avant de le réduire en base64, ça marchera si vous l'utilisez comme <object>.


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles consacrés à SVG dans La Cascade


Ressources complémentaires en français :

Animer un SVG avec CSS, par Chris Coyier
Une ligne animée avec SVG, par Chris Coyier
SVG, style et animation avec CSS, par Sara Soueidan Les dégradés SVG, par Joni Trythall
Animer un dégradé SVG, par Joni Trythall
SVG Ground, tout, absolument tout sur SVG !

Ressources complémentaires en anglais :

A compendium of SVG information, par Chris Coyier : une avalanche d'infos, d'articles, de ressources sur SVG. Vous ne pourrez plus dire que vous ne saviez pas !
Une plateforme sur SVG, dans "showcase" vous trouverez des motifs à télécharger.
Snap.svg une bibliothèque JavaScript par Dmitry Baranovskiy.
Démos SVG sur Codrops.
Démos SVG sur CodePen.
SVG editor, de Peter Collingridge, bon outil pour éditer vos svg, beaucoup d'options d'optimisation pour alléger les fichiers.

Et enfin, 3 vidéos géniales de Kyle Foster,
An Optimized Workflow
SVG Optimization, End-all Be-all Edition
Manipulating SVG with CSS


original paru le dans CSS-Tricks.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.

Traduit avec l'aimable autorisation de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2013.