Utilisation du SVG avec Media Queries

Dans les documents HTML, nous pouvons afficher, cacher ou réorganiser des parties de la page en fonction des conditions de la fenêtre d’affichage. Si la fenêtre du navigateur a une largeur de 480 pixels, par exemple, nous pouvons faire passer notre navigation d’une liste horizontale à une liste verticale et pliable. Nous pouvons faire quelque chose de similaire en utilisant SVG avec des requêtes média.

Cet article est un extrait du livre de Tiffany, CSS Master, 3e édition. Jetez-y un coup d’œil si vous souhaitez maîtriser d’autres fonctionnalités CSS3 avancées comme Flexbox et Grid !

En plus d’utiliser CSS avec HTML, nous pouvons également utiliser CSS avec SVG, ou Graphiques vectoriels évolutifs. SVG est un format de balisage permettant de décrire des images plates et bidimensionnelles. Comme c’est un langage de balisage, il possède un modèle d’objet de document et peut être utilisé avec CSS.

En utilisant CSS avec SVG, nous pouvons changer l’apparence de SVG en fonction de l’interaction de l’utilisateur. Il est également possible d’utiliser le même document SVG à plusieurs endroits et d’en afficher ou d’en masquer des parties en fonction de la largeur de la fenêtre d’affichage.

Tous les principaux moteurs de navigateur prennent en charge SVG 1.1 depuis des années. La prise en charge des fonctionnalités de SVG 2, en revanche, est toujours en chantier. Au moment où ces lignes ont été écrites, le support des navigateurs restait limité sur certains des sujets abordés ici, et cela a pu changer depuis. Pour suivre le travail dans les navigateurs basés sur Chromium, gardez un œil sur le méta-ticket Implémentation des fonctionnalités SVG2. Pour Firefox, suivez le méta-ticket Prise en charge des fonctionnalités de SVG 2. Pour Safari, c’est le méta-ticket WebKit Implémentation de SVG 2. Naviguer dans les bugtrackers n’a rien d’agréable, mais c’est pour l’instant le meilleur moyen de suivre le support de SVG 2.

Avant d’aller plus loin, cependant, parlons de ce qu’est SVG et pourquoi vous devriez l’utiliser.

Images vectorielles et images matricielles

La plupart des images actuellement utilisées sur le Web sont des images matricielles, également appelées images bitmap. Les images matricielles sont composées de pixels sur une grille fixe, avec un nombre défini de pixels par pouce. Les formats JPEG, WebP, GIF et PNG sont tous des exemples d’images matricielles.

Les images matricielles dépendent de la résolution. Une image PNG de 144 PPI (pixels par pouce) est très belle sur un appareil dont la résolution d’affichage est de 144 PPI. Cependant, lorsqu’elle est affichée sur un écran à plus haute résolution (400 PPI), cette même image peut sembler floue. Les images matricielles ont également des dimensions fixes et leur aspect est optimal dans leur taille d’origine. La mise à l’échelle d’une image de 150 par 150 pixels à 300 par 300 pixels la déforme.

Au lieu d’utiliser des pixels sur une grille, les formats d’image vectorielle décrivent les formes primitives – cercles, rectangles, lignes ou chemins – qui composent une image, ainsi que leur emplacement dans le système de coordonnées du document. Par conséquent, les images vectorielles sont indépendantes de la résolution et conservent leur qualité quelle que soit la résolution ou les dimensions de l’écran.

L’indépendance de résolution est le plus grand avantage de SVG. Nous pouvons augmenter ou diminuer l’échelle des images sans perte de qualité. La même image est superbe sur les appareils à PPI élevé et faible. Cela dit, SVG est mal adapté à la quantité de données de couleur requises pour les photographies. Il convient mieux aux dessins et aux formes. Utilisez-le à la place des images PNG et GIF, et comme substitut plus souple des polices d’icônes.

Un autre avantage de SVG est qu’il a été conçu pour être utilisé avec d’autres langages web. Nous pouvons créer, modifier et manipuler des images SVG avec JavaScript. Ou, comme nous le verrons plus loin, nous pouvons styliser et animer SVG à l’aide de CSS.

Associer les CSS aux documents SVG

Utiliser CSS avec SVG ressemble beaucoup à l’utiliser avec HTML. Nous pouvons appliquer le CSS avec l’attribut style d’un élément SVG, regrouper les styles d’un document dans un élément <style>, ou établir un lien vers une feuille de style externe. Les avantages et les inconvénients de chaque méthode sont les mêmes qu’avec HTML : là aussi, l’attribut style reste réservé aux cas les plus simples.

Utiliser l’attribut style

Voici un simple document SVG où le code crée un cercle noir :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
➥enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>

L’image ci-dessous montre le rendu de ce code dans un navigateur.

Donnons à notre cercle un remplissage rose en CSS, avec l’attribut style de l’élément et la propriété fill :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
➥enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" style="fill: #f9f" />
</svg>

Le résultat est illustré ci-dessous.

Voici une différence entre l’utilisation de CSS avec HTML et son utilisation avec SVG : les noms des propriétés. De nombreuses propriétés CSS que nous utilisons avec les documents HTML ne sont pas compatibles avec SVG, et vice versa. Nous reviendrons sur ce point plus tard dans le chapitre.

L’attribut style n’est évidemment pas la meilleure façon d’écrire du CSS. Il limite la réutilisation de ces styles dans plusieurs éléments ou documents. Mieux vaut incorporer le CSS dans le document ou le lier.

Incorporation de CSS dans les documents SVG

Au lieu de l’attribut style, nous pouvons utiliser l’élément <style> :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
<style type="text/css">
circle {
fill: #0c0;
}
</style>
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>

L’incorporation de CSS dans un document SVG nous permet de réutiliser ces styles pour plusieurs éléments dans le même document, mais elle empêche le partage de ces CSS entre plusieurs documents. C’est très bien pour les logos et les icônes. Mais si vous créez quelque chose comme une bibliothèque de styles de graphiques, il est préférable d’utiliser un fichier CSS externe.

À l’aide d’un éditeur de texte standard, vous pouvez également ajouter du CSS aux images SVG créées avec des logiciels tels que Sketch, Inkscape ou Illustrator. Cela n’affectera pas votre capacité à modifier l’image avec l’application de dessin, mais si vous modifiez le fichier à l’aide d’un logiciel d’image, l’application peut réécrire ou supprimer votre CSS.

Créer un lien entre un SVG et un fichier CSS externe

Comme pour le HTML, la liaison à un fichier CSS externe permet de partager les styles entre plusieurs documents SVG. Pour lier un fichier CSS externe, ajoutez <? xml-stylesheet ?> au début de votre fichier SVG :

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="https://www.gekkode.com/style.css" type="text/css"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>

Utiliser l’élément <link>

Vous pouvez également utiliser l’élément HTML <link>. Avec cette méthode, vous devrez inclure l’attribut xmlns, comme indiqué ci-dessous :

<link href="style.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml" />

Remarque : certains navigateurs anciens exigent que l’élément <link> soit entouré de balises <defs> ou <g>.

<link> n’est pas un élément SVG. Il appartient au HTML et au XHTML. Le XHTML est une variante du HTML qui est analysée selon les règles du balisage XML. Selon les règles du XML, nous pouvons emprunter des éléments et leur comportement à d’autres dialectes XML, comme le XHTML. Pour ce faire, toutefois, nous devons indiquer au navigateur l’espace de noms auquel l’élément appartient, à l’aide de l’attribut xmlns.

Utilisation de @import

Nous pouvons également créer un lien vers une feuille de style externe avec @import, entre les balises <style> et </style> :

<style type="text/css">
@import("https://www.gekkode.com/style.css");
</style>

Cette méthode fonctionne comme celle de <link>.

SVG et l’élément <img> : les limites

Lier un fichier SVG à des ressources externes, fichiers CSS compris, ne fonctionne pas avec l’élément <img>. Il s’agit d’une limitation de sécurité de <img>, intégrée aux navigateurs : un SVG chargé dans un <img> ne va rien chercher à l’extérieur.

Si vous souhaitez utiliser des CSS liés avec vos images SVG, vous devez effectuer l’une des deux opérations suivantes :

• utiliser un élément <style> dans votre document SVG pour y placer votre CSS,
• utiliser un élément <iframe> ou <object> (voir la note ci-dessous).

En général, préférez <iframe> à <object>. Cependant, <object> peut être l’enfant d’un élément <a>, alors que <iframe> ne le peut pas. Utiliser <iframe> ou <object> rend aussi l’arbre du document SVG accessible depuis l’arbre du document parent. Cela signifie que nous pouvons utiliser JavaScript pour interagir avec lui (par exemple, avec document.querySelector('iframe').contentDocument).

SVG en ligne et actifs externes

Lors de l’ajout de SVG au HTML, le navigateur ne chargera pas les actifs externes référencés par le document SVG. Cependant, nous pouvons créer un lien vers le CSS de notre document SVG depuis le <head> de notre document HTML :

<head>
    ⋮
<link href="svg.css" type="text/css" rel="stylesheet" />
</head>

Les éléments SVG placés dans un document HTML font aussi partie de l’arbre du document HTML. Avec du SVG en ligne, vous pouvez très bien réunir les règles de style HTML et SVG dans une seule feuille de style.

Différences entre SVG et HTML

Bien que SVG et HTML soient tous deux des langages de balisage, il existe deux différences significatives entre eux qui affectent la façon dont ils fonctionnent avec CSS :

• SVG n’adhère pas au modèle de boîte CSS.
• SVG n’a pas de schéma de positionnement.

Le SVG n’adhère pas au modèle de boîte CSS

Utilisée avec HTML, la mise en page CSS suit les règles du modèle de boîte CSS. SVG, en revanche, utilise des coordonnées pour la mise en page. Il adhère à ce qui peut être mieux compris comme un « modèle de forme ».

Les formes SVG ne sont pas limitées aux boîtes rectangulaires. Par conséquent, la plupart des propriétés liées au modèle de boîte ne s’appliquent pas aux éléments SVG. Vous ne pouvez pas, par exemple, modifier le padding ou la margin d’un élément SVG. Vous ne pouvez pas non plus utiliser les propriétés box-sizing, box-shadow, outline ou border-*. La grille, les flottants et Flexbox ne fonctionnent pas davantage.

Vous pouvez toutefois utiliser CSS pour définir ou modifier une série de propriétés et de valeurs d’attributs SVG. La liste complète figure dans la spécification SVG 2, même si la prise en charge reste incomplète dans la plupart des moteurs. Certaines propriétés CSS, comme filter, fonctionnent avec SVG comme avec HTML. Nous en aborderons quelques-unes dans ce chapitre, dans le cadre de techniques spécifiques.

SVG n’a pas de schéma de positionnement

Lorsque CSS est utilisé avec HTML, les boîtes des éléments peuvent :

• s’inscrire dans le flux normal,
• être retirées du flux normal avec la propriété float,
• être retirées du flux normal avec la propriété position.

La spécification CSS y fait référence en tant que schémas de positionnement. Les schémas de positionnement n’existent pas dans SVG. La propriété position n’a aucun effet sur les éléments SVG. Pas davantage que les propriétés top, left et bottom, qui dépendent du positionnement des éléments. Vous ne pouvez pas non plus faire flotter des éléments dans un document SVG.

Au lieu de cela, SVG utilise un système de coordonnées pour le placement des éléments. Pour dessiner un <circle>, par exemple, vous définissez les coordonnées de son centre avec les attributs cx et cy, puis la longueur du rayon avec l’attribut r. Sans r, le cercle n’est pas dessiné du tout. Un polygone est constitué d’une série de coordonnées de points et de segments de ligne tracés entre eux. En d’autres termes, vous pouvez définir l’endroit où un élément sera dessiné dans le canevas SVG, mais vous ne pouvez pas le « positionner » au sens CSS du terme.

En relation avec les schémas de positionnement, SVG n’a pas non plus la notion de z-index et des contextes d’empilement.

Remarque : la spécification SVG 2 définit un comportement pour z-index et les contextes d’empilement dans les documents SVG, mais la plupart des navigateurs ne le prennent pas encore en charge.

Les éléments SVG sont empilés selon leur ordre dans la source. Ceux qui apparaissent plus loin dans le document passent au-dessus. Si vous souhaitez modifier l’ordre d’empilement des éléments SVG, vous devrez les déplacer dans la source ou utiliser JavaScript pour les réorganiser dans l’arbre DOM.

En pratique, la plupart des propriétés CSS 2.1 ne s’appliquent pas aux documents SVG. Font exception les animations et les transformations, display, overflow, visibility, filter et quelques propriétés liées à la police et au texte. À la place, vous devrez utiliser les propriétés de style spécifiques aux documents SVG. La plupart de ces propriétés peuvent également être exprimées en tant qu’attributs d’éléments SVG.

Stylisation des éléments SVG

Voici un exemple simple de la façon de styliser des éléments SVG à l’aide de CSS. Commençons par notre document SVG, qui est un fichier autonome :

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="https://www.gekkode.com/styles.css" type="text/css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=
➥"http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497
➥ 184" enable-background="new 0 0 497 184" xml:space="preserve">
<polygon id="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,
➥106.9,119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,
➥66.6 "/>
<circle id="circle" cx="245" cy="88.9" r="67.5"/>
</svg>

Ce balisage crée l’image ci-dessous.

Bien que nous ne puissions pas utiliser la plupart des propriétés CSS avec les documents SVG, nous pouvons utiliser CSS pour changer la couleur d’un élément. Faisons en sorte que notre étoile soit jaune :

#star {
fill: hsl( 44, 100%, 50% );
}

Vous verrez souvent fill écrit directement sur les balises SVG, par exemple <circle fill="rgb( 255, 185, 0 )" cx="3" cy="10" r="100"> – mais c’est aussi une propriété qui peut être utilisée avec les CSS.

Nous pouvons également utiliser le CSS pour ajuster le stroke d’un élément, c’est-à-dire le contour d’une forme SVG. Ce contour existe même si aucun stroke n’est défini. Donnons à notre cercle une bordure en pointillés bleu foncé de dix pixels de large, et passons sa propriété fill à cornflowerblue :

circle {
fill: cornflowerblue;
stroke: darkblue;
stroke-width: 10;
stroke-dasharray: 10, 15;
stroke-linecap: round;
}

L’ensemble nous donne le résultat ci-dessous.

Utiliser les attributs SVG comme propriétés CSS

Nous pouvons également utiliser le CSS pour définir les valeurs des coordonnées de certains éléments de forme : <rect>, <circle> et <ellipse>. Normalement, nous utiliserions des attributs SVG pour ces éléments :

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="200" width="300" height="300" fill="#f60" />
</svg>

Cependant, SVG 2 a redéfini certains attributs SVG en tant que propriétés géométriques. Cela signifie que nous pouvons utiliser CSS pour définir leurs valeurs :

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
      rect {
x: 20px;
y: 50px;
width:  300px;
height: 300px;
fill: #f60;
}
    </style>
    <rect />
</svg>

Les propriétés de coordonnées (x et y), les propriétés de coordonnées du centre (cx et cy) et les propriétés de rayon (rx, ry et r) peuvent être définies en CSS. Il en va de même pour width et height. Les unités sont facultatives pour les attributs SVG, les valeurs CSS, en revanche, exigent une unité. Les longueurs et les pourcentages sont tous deux valables pour les propriétés mentionnées ici, mais sachez que les longueurs fonctionnent un peu différemment avec les documents SVG. Rappelez-vous que le S de SVG signifie scalable. La taille calculée d’un élément SVG dépend également de :

• les width et height calculées de l’élément SVG racine,
• la valeur de l’attribut viewBox de l’élément racine,
• toute transformation d’échelle appliquée à l’élément ou à ses ancêtres.

Autrement dit, les coins de notre élément <rect> sont (20, 50), (20, 320), (350, 320) et (20, 350) dans le système de coordonnées SVG. Les dimensions réelles, elles, peuvent être plus grandes ou plus petites, selon les facteurs ci-dessus.

Tous les attributs SVG ne sont pas disponibles via CSS – du moins pas dans tous les navigateurs. Chrome et Edge, par exemple, prennent en charge la fonction CSS path() pour définir les données de tracé, via la propriété d. C’est la même valeur que celle qu’on écrit d’habitude dans l’attribut d de l’élément :

path {
d: path("M 454.45223,559.21474 -304.96705,163.45948 417.4767,-296.33928 Z");
}

À ce jour, ce sont les seuls navigateurs à le faire. Le travail d’implémentation dans Firefox et dans WebKit n’a pas encore commencé.

Pour les autres éléments de forme, la spécification de SVG 2 est carrément incohérente. À ce jour, vous devez utiliser les attributs des éléments pour définir les propriétés des éléments <line>, <polyline> et <polygon>.

Cela dit, nous ne sommes pas limités à l’utilisation de sélecteurs de type (ou d’élément) pour définir les propriétés. Nous pourrions, par exemple, définir des cercles petits, moyens et grands en utilisant des sélecteurs de classe :

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">

.small {
cx: 20px;
cy: 20px;
r:  20px;
fill:  #0c0;
}

.medium {
cx: 80px;
cy: 80px;
r:  60px;
fill:  #fc0;
}

.large {
cx: 220px;
cy: 220px;
r:  120px;
fill: #00f;
}

</style>

<circle class="small" />
<circle class="medium" />
<circle class="large" />
</svg>

Quel que soit le sélecteur, l’utilisation de la syntaxe CSS pour spécifier les propriétés permet également de les animer facilement. Nous verrons comment le faire dans la section suivante.

Animation et transition des propriétés CSS SVG

L’utilisation de CSS avec SVG devient plus intéressante lorsque nous ajoutons des transitions et des animations au mélange. Le processus est le même que pour l’animation d’éléments HTML avec CSS, mais avec des propriétés spécifiques à SVG. Créons un effet d’étoile scintillante à l’aide du document SVG suivant :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px"
➥ y="0px" viewBox="0 0 497 184" xml:space="preserve">
<defs>
<link href="twinkle.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
<polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2
➥,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5
➥ 55.8,66.6 "/>
<polygon class="star twinkle" points="77,23.7 98.2,66.6 145.5,
➥66.5 111.2,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9
➥ 8.5,67.5 55.8,66.6 "/>
</svg>

Notre document contient deux éléments polygonaux en forme d’étoile, chacun avec un nom de classe de star. Pour créer l’effet de scintillement, nous allons animer le premier élément. Voici notre CSS :

@keyframes twinkle {
from {
fill-opacity: .4;
}
to {
fill-opacity: 0;
transform: scale( 2 );
}
}
.star {
fill: rgb( 255,195,0 );
transform-origin: 50% 50%;
}
.twinkle {
animation: twinkle 1.5s infinite forwards ease-in;
}

Ici, nous avons utilisé la propriété spécifique à SVG fill-opacity. Comme en CSS, si nous pouvons interpoler la valeur d’une propriété de style SVG, nous pouvons l’animer ou lui appliquer une transition. Vous pouvez voir deux points différents de l’animation dans l’image ci-dessous.

Regardons un autre exemple. Cette fois, nous allons créer un effet de dessin en appliquant une transition à la propriété stroke-dasharray. Voici notre document SVG :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" enable-background="new 0 0 200 200">
<circle fill="transparent" stroke-width="16" cx="101.3"
➥ cy="96.8" r="79.6"/>
</svg>

stroke-dasharray accepte une liste de longueurs ou de pourcentages, séparés par des virgules, qui composent un motif en pointillés. Les valeurs impaires donnent la longueur du tiret, les valeurs paires celle de l’espace. Une valeur 5, 10 de stroke-dasharray signifie que le trait fera 5px de long, avec un écart de 10px entre chaque tiret. Une valeur de 5, 5, 10 alterne des tirets de 5px et de 10px, séparés par des espaces de 5px.

On peut utiliser stroke-dasharray pour créer un effet de dessin en commençant par une longueur de tiret nulle et un grand espace, et en terminant par une longueur de tiret importante et un espace de tiret nul. Nous ferons ensuite une transition entre les deux. Voici à quoi ressemble notre CSS :

circle {
transition: stroke-dasharray 1s ease-in;
fill: transparent;
stroke-dasharray: 0, 500;
}
.animate {
stroke-dasharray: 500, 0;
}

Au début de la transition, notre trait est invisible parce que la longueur du tiret vaut 0 et l’espace 500. Mais lorsque nous ajoutons la classe animate à notre cercle, nous portons la longueur du tiret à 500 et supprimons l’espace. L’effet est un peu comme dessiner un cercle avec une paire de compas. Pourquoi 500 ? C’est la plus petite valeur qui a permis de créer cet effet particulier.

Un chemin d’avenir animé

Vous vous souvenez de notre exemple de définition d’un chemin via CSS dans la section précédente ? Un jour, nous pourrons peut-être animer les chemins dans tous les navigateurs, à l’aide de CSS :

path {
d: path("M357.5 451L506.889 192.25H208.111L357.5 451Z");
transition: d 1s ease-in-out;
}
.straighten {
d: path("M357.5 8871L406 -10113.75H208.111L357.5 351Z");
}

À ce jour, cependant, seuls les navigateurs basés sur Chromium, tels que Google Chrome et Microsoft Edge, prennent en charge l’animation des définitions de chemin de cette manière. Pour que cela fonctionne dans d’autres navigateurs, utilisez une bibliothèque JavaScript telle que GreenSock et son MorphSVGPlugin. En plus de sa compatibilité avec les navigateurs, GreenSock et le MorphSVGPlugin facilitent le morphing entre deux formes, quel que soit le nombre de points dans chacune d’elles.

Utilisation de SVG avec Media Queries

Avec les documents HTML, nous pouvons afficher, cacher ou réorganiser des parties de la page en fonction des conditions de la fenêtre d’affichage. Si la fenêtre du navigateur a une largeur de 480 pixels, par exemple, nous pouvons faire passer notre navigation d’une liste horizontale à une liste verticale et pliable. Nous pouvons faire quelque chose de similaire avec les requêtes média et les documents SVG. Prenons un logo, tel que celui de la société fictive Hexagon Web Design & Development illustré ci-dessous.

Sans media queries, ce logo SVG s’étirerait ou rétrécirait simplement pour s’adapter à la fenêtre d’affichage ou à son conteneur. Mais avec les requêtes média, nous pouvons faire des choses plus astucieuses.

Distinguons la fenêtre d’affichage du document HTML de celle du document SVG. Lorsque le SVG est en ligne, les deux sont la même : le document SVG se comporte comme n’importe quel autre élément HTML. En revanche, lorsqu’un document SVG est lié – comme avec les éléments <iframe>, <object> ou <img> –, nous avons affaire à la fenêtre d’affichage du document SVG.

Les requêtes média fonctionnent dans les deux cas, mais lorsque le document SVG est lié, sa fenêtre d’affichage est indépendante de son document HTML. Dans ce cas, la taille de la fenêtre du navigateur ne détermine pas la taille de la fenêtre du document SVG. Elle vient à la place des dimensions de l’élément <object>, <iframe> ou <img> qui le porte. Prenons l’exemple du document SVG (abrégé) qui suit :

<svg version="1.1" id="HexagonLogo" xmlns="http://www.w3.org/2000/
➥svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="0 0 555 174" xml:space="preserve">
<defs>
<style type="text/css">
/* CSS goes here */
</style>
</defs>
<g id="hex">
<polygon id="hexagonbg" points="55.2,162 10,86.5 55.2,11
➥ 145.5,11 190.7,86.5 145.5,162  "/>
<path id="letterH" fill="#FFFFFF" d="M58,35.5h33v35.2h18.
➥4V35.5 h33.2v103.4h-33.2v-38.3H91v38.3H58V35.5z M77.5,126.5V87.
➥3h45.6v39.2h4V47.9h-4v35.6H77.5V47.9h-4v78.6H77.5z"/>
</g>

<g id="word-mark">
<g id="hexagon-word">
            ...
</g>
<g id="web-design-and-dev">
            ...
</g>
</g>
</svg>

Note : une démonstration complète de cette technique, source complète du document SVG comprise, est disponible en ligne.

Dans des fenêtres plus petites, montrons seulement le H dans un symbole hexagonal :

@media (max-width: 320px) {
[id=word-mark] {
display: none;
}
}

Désormais, dès que le conteneur de notre SVG mesure 20em ou moins, seule la partie symbole du logo reste visible.

Pour déclencher cette vue à partir du document HTML, définissez la largeur du conteneur SVG :

<iframe src="hexlogo.svg" style="width: 320px; border:0"></iframe>

Comme vous l’avez peut-être remarqué en regardant l’image ci-dessus, notre image SVG conserve ses dimensions intrinsèques même si une partie a été cachée. Ceci, malheureusement, est une limitation de SVG. Pour y remédier, nous devons modifier le viewBox du document SVG, mais uniquement en dessous d’une certaine taille de fenêtre. C’est un bon cas d’usage pour matchMedia.

Le viewBox, comme son nom l’indique, détermine la zone visible d’un élément SVG. En l’ajustant, nous choisissons quelle partie d’une image SVG remplit la fenêtre d’affichage. Voici un exemple qui utilise matchMedia et une requête média pour mettre à jour l’attribut viewBox :

<script type="text/javascript">
const svg = document.querySelector( 'svg' );

/* Store the original value in a variable */
const originalViewBox = svg.getAttribute( 'viewBox' );

/* Define our media query and media query object */
const mq = matchMedia( '( max-width: 320px )' );

/* Define the handler */
const updateViewBox = () {
if (mq.matches) {
/* Change the viewBox dimensions to show the hexagon */
        svg.setAttribute( 'viewBox', '0 0 200 174' );
} else {
        svg.setAttribute( 'viewBox', originalViewBox );
}
}

svg.addEventListener( 'SVGLoad', updateViewBox );

/* Fire if the media condition changes */
mq.addEventListener( 'change', updateViewBox );
</script>

Désormais, lorsque le conteneur SVG est inférieur ou égal à 320 pixels, la valeur de l’attribut viewBox sera "0 0 200 174". Lorsqu’elle dépasse 320 pixels, viewBox est rétabli à sa valeur initiale.

Comme cette technique repose sur l’attribut onload ou sur l’évènement SVGLoad, mieux vaut intégrer nos CSS et notre JavaScript dans le fichier SVG. Lorsque le CSS est externe, SVGLoad peut se déclencher avant que la feuille de style associée soit chargée.

Utilisation des requêtes média avec background-size

Les documents SVG et les requêtes média ne se limitent pas aux images de premier plan. Nous pouvons également redimensionner la fenêtre d’affichage SVG à l’aide de la propriété CSS background-size.

Nous allons commencer avec ce document SVG :

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥ xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="-20 -20 250 250" xml:space="preserve">
<style type="text/css">
circle {
stroke: #000;
stroke-width: 30;
fill: #009688;
}
@media ( width: 100px ) {
circle {
fill: #673ab7;
}
}
@media ( width: 300px ) {
circle {
fill: #ffc107;
}
}
</style>
</defs>
<circle cx="100" cy="100" r="100" />
<circle cx="100" cy="100" r="50" />
</svg>

C’est un cas simple. Nos éléments <circle> reçoivent un nouveau fill à des largeurs de fenêtre précises. Par défaut, le remplissage est sarcelle, à 100 pixels de large, le fill passe au violet, et à 300 pixels, au jaune.

Pour que cela fonctionne, nous devons utiliser notre image SVG comme image d’arrière-plan et définir le background-size du sélecteur. Ici, nous la prendrons comme arrière-plan de <body> et des éléments <li> :

body, li  {
background: url(circles.svg);
}
body  {
background-color: #9c27b0;
background-size: 300px auto;
}
li {
background-position: left center;
background-repeat: no-repeat;
background-size: 1em auto;
padding-left: 40px;
font-size: 24px;
margin: 1rem 0;
}

Le résultat est illustré ci-dessous.

Conclusion

L’utilisation de SVG avec CSS nous donne plus de possibilités pour des documents flexibles et adaptatifs. Vous devriez maintenant savoir comment :

• utiliser le CSS pour styliser les éléments SVG,
• animer les propriétés SVG,
• employer les requêtes média CSS et l’API matchMedia pour afficher et masquer des parties d’un document SVG.