
Le [SVG](/tags/svg/) en ligne peut faire des miracles pour le design responsif tout en réduisant le temps de chargement des pages web et en produisant des icônes propres et à la netteté parfaite —&nbsp;mais il n’est pas sans poser quelques problèmes, parmi lesquels l’accessibilité. L’accessibilité n’était pas une priorité lorsque la spécification originale SVG 1.0 a été publiée il y a 15 ans. Cependant, SVG 1.1 a amélioré les choses et SVG 2.0 devrait à l’avenir mettre l’accessibilité au premier plan.

Pour l’instant, rendre les SVG accessibles demande un peu de travail, mais c’est un processus assez simple si vous suivez ces cinq règles&nbsp;:

<h2>1 - Traitez les liens vers une image SVG comme les bitmaps</h2>

Lorsque vous faites un lien vers un document SVG comme image, l’attribut `alt` est requis&nbsp;:

```HTML
  <img src="coca-cola-logo.svg" alt="Coca-Cola">
```

...comme pour n’importe quelle [image matricielle](http://thenewcode.com/64/Bitmap-Images-for-the-Web-Formats-and-Optimisation-Options)
(_bitmap_).

<h2>2 - Pour SVG en ligne, donnez un titre</h2>

Le `<title>` d’un élément SVG sert le même objectif que le `<title>` d’un document HTML&nbsp;: C’est une brève description du document, ou un conseil. On peut le voir comme le `<alt>` d’un SVG inline.

```HTML
  <header>
    <svg>
      <title>Coca-Cola</title>
      <polyline ... />
    </svg>
  </header>
```

`<title>` peut également être utilisé pour les éléments individuels&nbsp;: plus spécifiquement `<circle>`, `<ellipse>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>` et `<use>`, ainsi que les éléments container SVG tels que `<a>`, `<defs>`, `<g>` et `<symbol>`. `<title>` sera généralement le premier enfant de cet élément. Parfois, ce titre sera _visuellement_ descriptif&nbsp;:

```xml
  <title>Yellow Five-Pointed Star</title>
  <polygon fill="#ff0" points="509,19.6 534.7,71.7 592.1,80 550.5,120.5 560.4,177.7 509,150.7 457.6,177.7 467.5,120.5 425.9,80 483.3,71.7 "/>
```

...et parfois il sera _informationnel_ (c’est à dire qu’il décrit la _finalité_ d’un élément, ou son _sens_).

**Note** : on remarquera que les éléments `<text>` de SVG inline sont dans la plupart des cas complètement accessibles, puisqu’ils contiennent du texte —&nbsp;quels que soient les effets graphiques qui leur sont appliqués&nbsp;— ils n’auront donc pas besoin de `<title>` dans ce cas. Toutefois, si vous transformez votre texte en pures formes vectorielles, il vous _faudra_ fournir un `<title>`.

Comme pour les pages HTML, le texte situé à l’intérieur d’un élément SVG est lu par les outils d’accessibilité dans l’_ordre du document_, et non dans l’ordre de leur _position visuelle à l’écran_.

Si un SVG ne contient qu’un seul élément, un simple `<title>` après la balise ouvrante `<svg>` pourra s’avérer suffisant. Si le document contient plusieurs éléments, vous aurez probablement besoin d’un `<title>` pour chacun ou pour chaque groupe&nbsp;:

```xml
<svg>
  <g>
    <title>Red Rectangle</title>
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </g>
</svg>
```

Vous pouvez améliorer cette information en associant `<title>` à `aria-labelledby`. Dans le cas d’un élément simple, cela peut renvoyer à l’élément racine `<svg>`&nbsp;:

```xml
<svg aria-labelledby="title">
  <g>
    <title id="title" lang="en">Red Rectangle</title>
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </g>
</svg>
```

Tout comme `<desc>` et d’autres éléments HTML, `<title>` devrait également avoir [un attribut `lang` indiquant la langue utilisée](http://thenewcode.com/474/Language-Support-In-HTML) (voir plus bas).

**Note** : il est possible de naviguer vers les éléments SVG utilisés dans les balises `<img>` comme s’ils étaient des éléments autonomes, ils peuvent également être indexés par les moteurs de recherche en tant de documents séparés, et de ce fait ils devraient aussi contenir un `<title>` et une `<desc>` appropriés _dans le balisage du document SVG original_.

<h2>3 - Donnez une description lorsque nécessaire</h2>

`<desc>` correspond à une description plus longue de votre élément SVG, spécifiant son intention. On peut le voir un peu comme l’équivalent SVG de `figcaption`.

```xml
<svg>
  <g>
    <title>International sales by country</title>
    <title lang="fr">Les ventes internationales par pays</title>
    <desc>Bar chart showing company sales by country, in millions of dollars (US).</desc>
    <desc lang="fr">Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).</desc>
    <g>
      <text x="20" y="70">US Sales</text>
      <title id="USamount">30 million</title>
      <rect x="0" y="0" width="100" height="50" fill="red" aria-labelledby="USamount" />
    </g>
  <g>
</svg>
```

<text x="20" y="70">French Sales</text><title id="FRamount">50 million</title><rect x="150" y="20" width="100" height="80" fill="red" aria-labelledby="FRamount" /></g></g></svg><svg width="320" height="150"><g><title>International sales by country</title><title lang="fr">Les ventes internationales par pays</title><desc>Bar chart showing company sales by country, in millions of dollars (US).</desc><desc lang="fr">Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).</desc><g><text x="20" y="120">US Sales</text><title id="USamount">30 million</title><rect x="0" y="50" width="100" height="50" fill="green" aria-labelledby="USamount"></rect></g><g><text x="140" y="120">French Sales</text><title id="FRamount">50 million</title><rect x="150" y="20" width="100" height="80" fill="red" aria-labelledby="FRamount"></rect></g></g></svg>

Cet exemple suppose que vous fournirez également les axes graphiques et les informations chiffrées pour les utilisateurs n’ayant _pas_ de problèmes d’accessibilité&nbsp;: quand c’est possible, exposer l’information sous forme de `<text>` rendra service à _tous_ comme dans l'illustration qui précède.

<h2>4 - Vous n’avez rien à faire si le SVG est purement décoratif</h2>

Si l’élément SVG est utilisé à des fins purement décoratives —&nbsp;un dégradé ou un motif de background par exemple&nbsp;— pas besoin de fournir `<title>`, `<desc>` ni `alt`. (Si vous voulez que votre page soit [validée](http://thenewcode.com/454/Climbing-Mount-Sinai-The-Importance-of-Web-Page-Validation) par les outils de validation, vous devrez mettre un `alt` pour les SVG liés, mais vide pour les éléments décoratifs, c’est à dire `alt=""` ou simplement `alt`).

Par défaut, ni `<desc>` ni `<title>` ne sont rendus visuellement dans le navigateur (bien qu’on puisse leur appliquer un style pour qu’ils le soient)&nbsp;; le texte de `<title>` apparaîtra au survol dans les navigateurs compatibles.  
(<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : vous pouvez faire l’essai avec le diagramme ci-dessus_).

<h2>5 - Ne comptez pas sur votre WYSIWYG pour le faire à votre place<h2>

Malheureusement, Adobe Illustrator ne supporte que très peu l’accessibilité SVG. Il exporte les noms de calques comme des valeurs d’ `id` plutôt que comme une information `<title>`. Inkscape fait mieux en vous permettant d’ajouter et d’éditer `<title>` et `<desc>` pour chaque élément, avec l’inconvénient d’ajouter du code redondant à votre markup. Vous en viendrez sans doute à la conclusion qu’il est préférable d’ajouter un peu de code à la main pour ajouter une pleine accessibilité à un document SVG réalisé avec les outils vectoriels.

<span class="ressourcesComplementaires">**Ressources complémentaires en anglais**</span>

- [Tips for creating accessible SVG](http://www.sitepoint.com/tips-accessible-svg/), par Léonie Watson

<span class="ressourcesComplementaires">**Ressources complémentaires en français**</span>

- [SVG, liens et lecteurs d’écran](http://blog.atalan.fr/svg-liens-et-lecteurs-decran/), sur le blog d’Atalan


5 règles pour rendre SVG accessible

Il existe plusieurs façons d'animer une image svg, depuis la balise `animate` jusqu'aux bibliothèques comme [Snap.svg](http://snapsvg.io) ou [SVG.js](http://www.svgjs.com). Nous allons essayer autre chose ici, en utilisant SVG à l'intérieur de notre HTML et en animant les parties de l'image avec CSS.

Je me suis amusé avec ça dernièrement, [Wufoo](http://www.wufoo.com/landing/1/?utm_source=csstricks&utm_medium=ppc&cmpid=brand&utm_network=d) souhaitant rafraîchir le graphisme de ses pubs sur [CSS-Tricks](http://css-tricks.com). Voici une idée de ce que nous allons réaliser&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_dvjhn" src="//codepen.io/chriscoyier/embed/dvjhn?height=400&amp;theme-id=light&amp;slug-hash=dvjhn&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/dvjhn/">
  Wufoo SVG Ad</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## 1. Concevoir la pub

Ça va ressembler à une [leçon de dessin sommaire](http://cdn.css-tricks.com/wp-content/uploads/2014/04/How_to_Draw_Owl.jpg), mais notre objectif étant l'animation, nous allons passer sur le reste vite fait. Je souhaitais une pub super simple à partir de leur logo classique, de leurs couleurs etc., auquels j'ajouterais une touche personnelle.

1. Faire sauter les lettres dans la page. Wufoo est un mot marrant, les lettres peuvent s'amuser un peu.
2. Dans le bon vieux temps, on faisait des T-Shirts avec un dinosaure devant, et derrière il y avait "Fast. Smart. Formidable", des caractéristiques que Wufoo partage avec les dinosaures, sans parler du jeu de mots sur FORMidable… (NdT: Wufoo est un outil permettant d'élaborer des formulaires, _form_ en anglais). Faisons apparaître et disparaître ce slogan.
3. Pour aller au bout de notre idée, faisons apparaître la tête d'un dinosaure qui surgit, intrigué, des profondeurs, et disparaît à la vitesse de l'éclair, laissant le mot "fast" s'afficher.

J'ai mis tout ça sur Illustrator&nbsp;:

<figure role="group"><img src="/images/ansvg1-compressor.jpeg" alt="des images conçues sur illustrator"/></figure>

Remarquez que le logo et le texte du slogan sont des formes vectorielles, leur rendu en `<path>` (chemins) SVG sera très simple.

Le texte "Fast." est laissé en tant que texte dans Illustrator. Quand je le sauvegarderai, il sera conservé sous la forme d'élément `<text>`.

## 2. Sauvegarder en format SVG

Illustrator peut le sauvegarder directement en <span itemprop="about">format SVG</span>&nbsp;:

<figure role="group"><img src="/images/ansvg2-compressor.png" alt="comment sauvegarder sur illustrator"/></figure>

Vous pouvez ouvrir ce fichier SVG dans votre éditeur de texte et voir le <span itemprop="about">code SVG</span>&nbsp;:

<figure role="group"><img src="/images/ansvg3-compressor.png" alt="le contenu complexe du fichier svg"/></figure>

## 3. Nettoyer le SVG, lui ajouter des classes

Pour le nettoyage, vous pouvez utiliser [SVGO](https://github.com/svg/svgo) qui optimisera le fichier, retirera le DOCTYPE et toutes les choses inutiles. Mais ce qui est plus important ici, c'est de donner des classes aux différentes formes, afin que nous puissions les sélectionner dans notre CSS.

    //CSS

    <svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">

      
      <rect class="wufoo-background" fill="#D03E27" width="400" height="400" />

      
      <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
      <path class="wufoo-letter" fill="#F4F4F4" d="..." />
         

      
      <g class="trex">
         <path ... />
         <path ... />
      </g>

    </svg>

## 4. Insérer le SVG

Vous pouvez copier-coller ce SVG dans votre HTML, à l'endroit où vous voulez que la pub apparaisse. Si vous ne voulez pas que ça embrouille votre template, vous pouvez aussi faire quelque chose comme&nbsp;:

    //HTML

    <aside class="sidebar">

       <div class="module module-ad">

           <?php include("ads/wufoo.svg"); ?>

       </div>

       ...

## 5. Animer !

Nos formes sont maintenant dans le [DOM](/articles/le-dom-cest-quoi-exactement), nous pouvons les cibler et leur appliquer un style comme à n'importe quel autre élément HTML. Allons-y.

Pour commencer, disons que cette animation doit avoir une durée totale de 10&nbsp;secondes.

#### Fade in/out des mots

Le premier événement est l'apparition des mots Fast. Smart. Formidable. Chaque mot sera affiché pendant une seconde. Nous allons donc réaliser une animation dans laquelle chaque mot apparaît pour une durée égale à 10% du temps total&nbsp;:

    //CSS

    @keyframes hideshow {
      0% { opacity: 1; }
      10% { opacity: 1; }
      15% { opacity: 0; }
      100% { opacity: 0; }
    }

Puis ciblons le premier mot et fixons la durée de l'animation à 10 secondes (10% de cette durée = 1 seconde)&nbsp;:

    //CSS

    .text-1 {
      animation: hideshow 10s ease infinite;
    }

Les deux mots suivants seront d'abord cachés (`opacity: 0;`) puis utiliseront exactement la même animation mais avec un délai, pour les faire partir successivement&nbsp;:

    //CSS

    .text-2 {
      opacity: 0;
      animation: hideshow 10s 1.5s ease infinite;
    }
    .text-3 {
      opacity: 0;
      animation: hideshow 10s 3s ease infinite;
    }

La demie seconde supplémentaire entre chaque mot permet un fade out en douceur avant l'apparition du mot suivant.

#### Lettres bondissantes

Passons maintenant aux lettres de WUFOO et à leur petite danse&nbsp;:

<figure role="group"><img src="/images/ansvg4-compressor.gif" alt="les lettres de wufoo s'animent"/></figure>

L'astuce ici est de donner une durée de 5 secondes à notre animation, mais de la faire fonctionner dans un sens puis dans l'autre. De cette façon, elle correspond bien à notre durée totale de 10 secondes, elle se produit au milieu comme nous le souhaitons, et nous n'avons besoin de paramétrer qu'un seul sens.

Chaque lettre a un petit délai, décalé par rapport aux autres&nbsp;:

    //SCSS

    .wufoo-letter {
      animation: kaboom 5s ease alternate infinite;
      &:nth-child(2) {
        animation-delay: 0.1s;
      }
      &:nth-child(3) {
        animation-delay: 0.2s;
      }
      &:nth-child(4) {
        animation-delay: 0.3s;
      }
      &:nth-child(5) {
        animation-delay: 0.4s;
      }
    }
    @keyframes kaboom {
      90% {
        transform: scale(1.0);
      }
      100% {
        transform: scale(1.1);
      }
    }

Pour abréger, j'ai écrit ce code en SCSS et sans y mettre les préfixes constructeurs.

Je trouve que la propriété `animation-delay` devrait pouvoir supporter de façon native une valeur aléatoire, ce serait sympa de voir un délai différent à chaque apparition.

#### Le dinosaure, enfin

Dès que les mots ont disparu, le dinosaure lève la tête. L'animal est construit avec de nombreux `path`, mais nous pouvons le cibler globalement grâce à l'attribut groupe `<g>` qui enveloppe tous ces chemins.

Pour animer une position, [il est préférable d'utiliser translate](http://css-tricks.com/tale-of-animation-performance/) et c'est ce que nous allons faire&nbsp;:

    //CSS

    @keyframes popup {
      0% {
        transform: translateY(150px);
      }
      34% {
        transform: translateY(20px);
      }
      37% {
        transform: translateY(150px);
      }
      100% {
        transform: translateY(150px);
      }
    }

Nous voulons que cette animation "dure" 3 secondes, en fait elle dure 10 secondes mais vous n'en verrez que 3 secondes, car lorsque `translateY(150px)` se déclenche, le dinosaure est enfoui si profond que vous ne voyez rien. Aux alentours de 37% de cette animation (vers 3 secondes) vous le verrez apparaître lentement puis disparaître rapidement vers le bas.

Pour appliquer cette animation, nous devons nous assurer que&nbsp;:

- Le dinosaure est invisible au départ.
- L'animation comporte un délai, de façon à ce que la danse des lettres soit achevée.

        //CSS

        .trex {
          transform: translateY(150px);
          animation: popup 10s 6.5s ease infinite;
        }

Le dinosaure se cache à la dernière seconde lorsque le mot "Fast." revient à l'écran (parce que toutes les animations sont définies comme `infinite` ce qui les relance dès qu'elles sont terminées).

## 6. Une pub responsive et cliquable

Un avantage considérable de SVG est que la qualité de l'image est toujours impeccable quelle que soit la taille. Pour obtenir une image flexible qui conserve son ratio (même équilibre global des proportions), nous pouvons utiliser la bonne vieille technique de la boîte avec padding.

    //HTML

    <div class="wufoo-ad-wrap">
      <svg class="wufoo-ad">
         ...
      </svg>
    </div>

    //CSS

    .wufoo-ad-wrap {
      height: 0;
      padding-top: 100%;
      position: relative;
    }
    .wufoo-ad {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

L'idée ici est que le "wrap" sera toujours un carré parfait, aux dimensions calculées à partir de sa largeur. Nous positionnons ensuite le SVG de façon absolue à l'intérieur de ce carré parfait, qui se redimensionnera avec bonheur.

Puisqu'il s'agit d'une pub, qui doit évidemment être cliquable, on pourrait utiliser `<a href="">` à la place de `<div>` pour le contenant wrap, dans ce cas n'oubliez pas d'ajouter `display: block`.

La [démo finale](http://codepen.io/chriscoyier/pen/dvjhn/) est ici.

Animer un SVG avec CSS


[Dans un précédent article](/articles/backgrounds-svg-les-rayures/), j’ai présenté l’utilisation de [SVG](/tags/svg/) dans des backgrounds “carrelés”. Ces simples lignes et rayures peuvent devenir des formes complexes, et on peut les mélanger à des images bitmap via CSS Blend Modes pour créer des backgrounds “pop art”. Ces techniques permettent de créer des effets visuels plus riches avec un code plus simple et plus de flexibilité que [mon essai précédent](http://thenewcode.com/307/Pop-Art-Web-Page-Backgrounds-Via-CSS3-Gradients-Merged-With-Images) qui faisait appel aux dégradés CSS.

## Motif en échiquier

Pour créer un échiquier avec SVG, il suffit d’utiliser deux [éléments carrés](/les-bases-de-svg-rectangles-et-carres/) disposés diagonalement&nbsp;:

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>
```

Ce qui produit :

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>

<br/>
Appliqué par-dessus une image bitmap&nbsp;:

```css
section#grid {
  background-image: url(checkerboard.svg), url(grace-kelly.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}
```

Cela nous donne ce bel effet :

  <div class="sd-kelly"></div>

L’image bitmap est dimensionnée pour couvrir la surface de l’élément. Le motif en échiquier se répète tous les 100px à la fois horizontalement et verticalement. Mais plutôt que de recouvrir l’image, il se mélange avec elle dans le mode `overlay` ( _NdT : en fait ici dans le mode `multiply` qui est plus doux_.)

## Motif à pois

La même idée peut être utilisée pour recouvrir une image d’un motif à pois, à l’aide de cinq [cercles SVG](/articles/les-bases-de-svg-cercles-et-ellipses/)&nbsp;: un au centre exact de la [viewbox](/articles/comprendre-svg-viewbox/) et les quatre autres ayant leur centre à chaque coin.

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<style type="text/css">
  circle { fill: #f99; }
</style>
<circle cx="0" cy="0" r="100"/>
<circle cx="300" cy="0" r="100"/>
<circle cx="0" cy="300" r="100" />
<circle cx="300" cy="300" r="100"/>
<circle cx="150" cy="150" r="100"/></svg>
```

Ce qui crée ce pattern :

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><style type="text/css">circle{fill:#f99}</style><circle cx="0" cy="0" r="80"></circle><circle cx="300" cy="0" r="80"></circle><circle cx="0" cy="300" r="80"></circle><circle cx="300" cy="300" r="80"></circle><circle cx="150" cy="150" r="80"></circle></svg>

On sauvegarde ce code comme `circle-grid.svg` et on applique le SVG sur l’image bitmap dans le background de l’élément&nbsp;:

```CSS
section#circles {
  background-image: url(kelly-brook-as-gilda.jpg), url(circle-grid.svg);
  background-size: cover, 100px 100px;
  background-blend-mode: multiply;
  }
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PqQmxM" src="//codepen.io/dudleystorey/embed/PqQmxM?height=450&amp;theme-id=light&amp;slug-hash=PqQmxM&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/PqQmxM/">
  Pop Art Backgrounds with SVG & Blend Modes</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>
  
## Conclusion
  
J’espère que cela vous a donné une idée de la façon dont vous pouvez mettre en œuvre vos propres idées. Il y a bien d’autres possibilités de designs de ce genre, nous les verrons dans de futurs articles.


Backgrounds Pop-Art avec SVG et Blend Modes


Un récent [dossier de travail réalisé par un de mes étudiants](http://tyler-mackenzie.ca/) utilisait une image de background “en écailles”, très intéressante, encodée en base64. J’ai [décodé la texture](https://www.base64decode.org/) puis j’ai apporté quelques améliorations au SVG. Pour compléter, j’ai créé un background hexagonal simple que je partage ici.

<h2>Motif en écailles</h2>

Pour les écailles, le balisage est assez simple&nbsp;:

```
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="scales" width="30" height="30"
    patternUnits="userSpaceOnUse"  patternTransform="scale(2)">
            <g id="curves">
                <path id="inner" d="M0 0c0,30, 30,30 30,0" />
                <path id="outer" d="M0 0c0,30, 30,30 30,0" />
            </g>
            <use x="15" y="15" xlink:href="#curves" />
            <use x="-15" y="15" xlink:href="#curves" />
            <use x="0" y="0" xlink:href="#curves" />
            <use x="15" y="-15" xlink:href="#curves" />
            <use x="-15" y="-15" xlink:href="#curves" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#scales)" />
</svg>
```

Le SVG utilise la technique standard du `<pattern>` que j’ai déjà illustrée dans de précédents articles (par exemple&nbsp;: [motifs japonais](/articles/motifs-svg-japonais), [diagonales et motifs SVG en background](/articles/diagonales-et-motifs-svg-en-background)) . Moins habituel, le motif utilisé dans le pattern est [un élément “groupe”](/articles/les-bases-de-svg-groupes/).

L’arrière-plan SVG est associé aux styles suivants&nbsp;:

```
svg {
  background: #0F7173;
}
#scales {
  fill: #0F7173;
}
#inner {
    stroke: #0c4c4d;
    stroke-width: 3.1;
}
#outer {
  stroke: #098f92;
  stroke-width: 0.9;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xZyKVp" src="//codepen.io/dudleystorey/embed/xZyKVp?height=300&amp;theme-id=light&amp;slug-hash=xZyKVp&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/xZyKVp">écailles SVG</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez que l’élément SVG et les écailles utilisent la même couleur pour leur `background` et `fill`. Cette technique est répétée dans l’exemple de motifs hexagonaux qui va suivre.

> Le pattern pourait être amélioré en définissant le `stroke` des chemins (_path_) en rgba plutôt qu’en valeurs hexadécimales. On pourrait ainsi les corriger automatiquement si les couleurs de background et de fill des écailles étaient modifiées.

<h2>Motifs hexagonaux</h2>

Le code comprend un balisage minimal pour créer un background hexagonal lié&nbsp;:

```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">
     <defs>
        <pattern id="hexagons" width="50" height="43.4"
        patternUnits="userSpaceOnUse"
        patternTransform="scale(5) translate(2) rotate(45)">
            <polygon
            points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2"
            id="hex" />
            <use xlink:href="#hex" x="25" />
            <use xlink:href="#hex" x="-25" />
            <use xlink:href="#hex" x="12.5" y="-21.7" />
            <use xlink:href="#hex" x="-12.5" y="-21.7" />
        </pattern>
     </defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />
</svg>
```

Le pattern utilise le CSS suivant&nbsp;:

```
svg {
  background: rgb(125,155,132);
}
polygon {
  fill: rgb(125,155,132);
  stroke-width: 2;
  stroke: #000;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YwdYxq" src="//codepen.io/dudleystorey/embed/YwdYxq?height=300&amp;theme-id=light&amp;slug-hash=YwdYxq&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/YwdYxq">background SVG hexagones</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>

Là encore, le SVG utilise la même technique consistant à s’appuyer sur les mêmes `background` et `fill` pour l’élément SVG et ses polygones pour “remplir” l’espace vide. Dans cet exemple, j’ai utilisé une série de transformations du pattern pour le placé légèrement “en dehors” de la page.

> Le `translate` est particulièrement important car un hexagone ayant un bord placé contre une bordure du viewport semblera avoir un côté plus long que l’autre.

Les traits (_stroke_) SVG s’étendent de manière égale de chaque côté d’une ligne interne représentant le chemin, par conséquent une augmentation de la valeur `stroke-width` (“épaisseur du trait”) aura pour conséquence de réduire la taille des hexagones.

<h3>Exemples CodePen</h3>

Les exemples CodePen qui précèdent utilisent le code SVG directement dans le HTML pour plus de clarté. En production, le CSS serait intégré au SVG et l’ensemble serait transformé en code base64 qui serait utilisé comme valeur de la propriété `background-image`.


Backgrounds SVG : hexagones et écailles


Indépendantes de la résolution, légères, faciles à éditer, les images vectorielles ont de nombreux avantages sur les [dégradés css](/articles/les-degrades-css/)&nbsp;:

1. La syntaxe SVG pour les rayures est plus simple et moins verbeuse que celle des dégradés CSS.
2. Les backgrounds SVG sont mieux supportés par les navigateurs (SVG est compatible avec IE9 mais les dégradés CSS ne sont supportés qu’à partir de IE10).
3. On peut réaliser des backgrounds bien plus complexes avec SVG qu’avec CSS.

Mais pour être efficaces, les illustrations vectorielles doivent suivre quelques règles&nbsp;:

<h2>Règles générales</h2>

- Tout comme les [backgrounds répétés en bitmap](http://thenewcode.com/991/Cross-Fading-Background-Images), vous avez seulement besoin d’une “tuile” ou d’un “carreau” pour réaliser un carrelage. Un seul `<pattern>` suffit pour construire l’ensemble.
- Votre fichier SVG doit être aussi petit, “léger” et éditable que possible&nbsp;: cela impliquera un peu de travail manuel.
- En général, il est bon de garder au moins une composante couleur de votre background dans votre CSS, pour une meilleure flexibilité.

Nous allons commencer par quelques exemples. Remarquez bien que je me suis concentré sur les backgrounds répétés, les backgrounds simples en SVG sont traités à peu près de la même façon que leurs équivalents en bitmap.

<h2>Rayures simples en SVG</h2>

Un effet de “rayures” simple n’est rien d’autre qu’une surface remplie à côté d’une surface vide, le tout répété à l’infini. Dans le cas de SVG, la manière la plus simple de réaliser cette surface pleine est d’utiliser [un élément rectangle](/articles/les-bases-de-svg-rectangles-et-carres/). Sauvegardez le code suivant dans un fichier `stripe.svg`&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"> <rect width="0.5" height="1" /> </svg>

Remarquez que `viewBox` **ou** les attributs équivalents `width` et `height` peuvent être utilisés pour dimensionner l’élément `<svg>` lorsqu’on crée des images de background.

Ce fichier SVG peut être appliqué au background d’une page web via&nbsp;:

    //CSS
    body { background-image: url(stripe.svg); }

Par défaut, le SVG s’étendra pour couvrir la surface entière de l’élément. Il en résultera une division de la page, moitié noire (le remplissage par défaut du rectangle SVG) et moitié blanche (la couleur de background par défaut de la page web, puisque toute surface non explicitement colorée en SVG est automatiquement transparente).

Pour que ce motif SVG se répète plus d’une fois, nous pouvons modifier la `background-size` dans notre déclaration CSS&nbsp;: une largeur x suivie d’une hauteur y.

     //CSS
    body {
      background-image: url(stripe.svg);
      background-size: 20px 20px;
    }

Ce qui donne :

<figure role="group"><img src="/images/bw-vertical-stripes.png" alt="rayures verticales noires et blanches"/></figure>

Un aspect sympa et pratique de cette concision de notre illustration SVG c’est qu’elle est très simple à modifier. par exemple, pour la transformer de verticale en horizontale, il suffit de modifier `background-size`&nbsp;:

Rayures horizontales : `body { background-size: 1px 10px; }`  
Rayures verticales : `body { background-size: 10px 1px; }`

Pour plus de versatilité, vous pouvez colorer les rayures grâce à `rgba` ou [HSL](/articles/utiliser-hsl-pour-vos-couleurs/) et renvoyer la question du `background-color` de la page à CSS&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />
    </svg>

Le CSS :

    body {
      background-image: url(stripe.svg);
      background-size: 20px 20px;
      background-color: #669;
    }

Ce fichier SVG est suffisamment petit pour être inséré en ligne dans le CSS lui-même, ce qui évite une requête HTTP&nbsp;:

    body {
      background-image: url(’data:image/svg+xml;utf8,<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" /></svg>’);
      background-size: 20px 20px;
    }

Faites bien attention aux guillemets ! Ce SVG utilise des doubles guillemets en interne, ce qui signifie que nous devons utiliser des guillemets simples à l’extérieur pour éviter que notre navigateur s’embrouille.

Vous pouvez également encoder le fichier SVG en base64 et utiliser ce code dans le CSS&nbsp;:

    body { background-image: url(’data:image/svg+xml;base64,
    PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53
    My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5Z
    TWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw
    9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+PC9zdmc+’); }

C’est évidemment une option, mais elle présente trois désavantages&nbsp;:

- La version Data URI occupe plus d’espace que la version SVG en ligne.
- Le fait de convertir l’image en base64 la rend non éditable. Pour faire un changement, il vous faudra retrouver le fichier SVG original, le modifier, le convertir en base64 et l’ajouter à votre CSS.
- le désencodage de base64 est plus lent sur les plateformes mobiles.

Toutefois, l’utilisation de base64 vous donne un peu plus de compatibilité navigateurs. Au final, c’est à vous de décider.

<h2>Séparer les lignes</h2>
Il est facile de rendre les lignes plus fines ou plus épaisses dans notre exemple, via `background-size`, mais une chose que cela ne changera pas c’est le *ratio* entre l’épaisseur des lignes et l’espace alentour. Pour changer cela, nous retournons à notre SVG et nous rendons notre rectangle plus large ou plus étroit&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <rect width=".25" height="1" />
    </svg>

Ce qui produit :

<figure role="group"><img src="/images/yv-vertical-stripes.png" alt="rayures fines jaunes sur fond violet"/></figure>

<h2>Réaliser des motifs plus complexes</h2>

Une fois les bases intégrées, il est aisé de réaliser des variations plus complexes de rayures horizontales et verticales en SVG. Par exemple, un motif guingan (Vichy) serait réalisé via un rectangle de ⅓ de large recouvrant un élément de ⅓ de hauteur.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <g fill="rgba(0,0,0,0.3)">
        <rect width="100" height="33" />
        <rect width="33" height="100" x="67" />
      </g>
    </svg>

Les mêmes concepts peuvent être utilisés pour créer des plaids et des tartans, mais les plus complexes d’entre eux devraient plutôt utiliser la syntaxe `<pattern>` de SVG que nous pouvons retrouver dans l’article [Diagonales et motifs SVG en background](/articles/diagonales-et-motifs-svg-en-background/).


Backgrounds SVG : les rayures


Le web est plus fort lorsqu’il est divers&nbsp;: plus il est accessible, meilleur est ce qu’il nous offre. L’attribut `alt` est un exemple déjà ancien de ce que nous pouvons faire pour améliorer l’accessibilité, mais pour bien écrire un texte alternatif pour vos images il est utile de connaître quelques règles.

## L'attribut alt

Qu'est-ce que l'attribut `alt` ? c'est la **représentation alternative d’une image sous forme de texte**. Si une image ne se charge pas ou si elle est bloquée, la valeur de l’attribut `alt` s’affichera à la place. Les utilisateurs d’outils pour l'accessibilité pourront entendre le texte lu à haute voix ou lire sa transcription en braille. Optimiser `alt` est également utile pour le SEO, car il fait partie des informations permettant aux moteurs de recherche de déterminer le contenu d’une image et d’associer votre site aux termes de recherche.

L’attribut `alt` (souvent appelé par erreur la “balise alt”) est obligatoire pour tous les éléments `<img>` de votre site. La plupart du temps, la façon la plus simple de rédiger un texte alternatif est **d’écrire ce que vous diriez si vous faisiez le description de l’image à quelqu’un**. Par exemple une photographie de canal à Amsterdam pourrait être décrite ainsi&nbsp;:

```
<img src="singel.jpg" alt="Crépuscule à Jordaan, Amsterdam, Hollande">
```

Ou encore (et mieux) :

```
<img src="singel.jpg" alt="Une rangée de maisons aux fenêtres illuminées le long d’un canal à Amsterdam">
```

D’une manière générale, plus le texte est descriptif, meilleur il est.

### Exceptions à alt : les logos

**Si le contenu principal d’une image est un texte, les règles changent**. Les images bitmap présentant un texte intégré, comme celle-ci&nbsp;:

<figure role="group"><img src="/images/festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577"/></figure>

…devrait avoir **une valeur d’attribut `alt` reflétant directement le texte de l’image**.

```
<img src="festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577">
```

La raison en est simple : la plupart des lecteurs d’écran ne savent pas bien reconnaître et traduire le texte d’une image, celui-ci est donc impénétrable à la fois pour les moteurs de recherche et pour les personnes malvoyantes. En plaçant le texte dans `alt`, vous faites la traduction pour eux.

_NB&nbsp;: vous verrez souvent ce genre de balisage pauvre, Ne faites pas cela&nbsp;_:

```
<img src="logo.gif" alt="Logo">
```

C’est aussi une excellente raison d’utiliser le [SVG](/tags/svg/) en ligne pour les logos. Correctement construit, un logo SVG sera un vrai texte, lisible par tous. Il est important de noter que si le texte est dispersé en plusieurs chemins SVG, sa valeur sémantique est perdue. Une solution alternative (et peut-être meilleure) est de conserver la partie graphique du logo en SVG et d’écrire le reste dans le balisage auquel on appliquera un style. Bien sûr les deux options doivent être examinées en tenant compte du temps que prendra le chargement d’une police de caractères embarquée.

### alt vide

Il y a deux cas dans lesquels on peut laisser vide l’attribut `alt`&nbsp;:

- l’image est purement décorative, c’est à dire qu’elle n’a pas de valeur informative;
- l’image est décrite de manière appropriée par un élément sémantique qui la suit immédiatement, généralement une légende `<figcaption>`.

Si vous voulez que votre page reste valide, `alt` doit malgré tout être présent dans `<img>`, et pour indiquer qu’il est vide on lui donne la valeur `""` (guillemets ouvrant et fermant sans espace entre les deux).

```
<img src="flourish.png" alt="">
```

Une autre solution en HTML5 est de laisser l’attribut `alt` sans valeur&nbsp;:

```
<img src="flourish.png" alt>
```

Dans certaines occasions rares, la valeur de `alt` peut être très proche du [texte en légende (`<figcaption>`)](http://thenewcode.com/413/Captioning-images-in-HTML5), dans ce cas le texte alternatif est redondant et peut être laissé vide.

```
<figure>
	<img src="rio-di-san-barnaba.jpg" alt>
	<figcaption>Photograph down the canal of the Rio di San Barnaba, Venice</figcaption>
</figure>
```

Les différences peuvent être subtiles : `alt` **décrit** une image, alors que `<figcaption>` **intitule** le contenu de l’élément `<figure>`. Dans la plupart des cas, les deux seront différents et devraient donc être conservés&nbsp;:

```
<figure>
	<img src="doge-portrait.jpg" alt="Peinture à l'huile représentant un homme âgé portant un couvre-chef et un manteau brodé">
	<figcaption>Portrait du Doge Leonardo Loredan par Giovanni Bellini</figcaption>
</figure>
```

<figure role="group"><img src="/images/Giovanni_Bellini-_portrait_of_Doge_Leonardo_Loredan.jpeg" alt="Peinture à l'huile représentant le doge Loredan dans des vêtements formels sur un fond bleu clair.  Il porte un couvre-chef typique des doges de Venise. La dignité du caractère est suggérée par la fixité, le détachement solennel par le contact non-visuel avec le spectateur."/><figcaption>Portrait du Doge Leonardo Loredan par Giovanni Bellini</figcaption></figure>

### Ne confondez pas alt et title

On trouve parfois des balisages qui appliquent la même valeur à `alt` et à `title`. En général, c’est une mauvaise idée. Le texte de title, qui apparaît en pop-up, est rarement vu par les utilisateurs car il faut quelques secondes avant qu’il ne surgisse, et il ne sera pas lu par les outils d’accessibilité sauf si l’élément est en focus.

### Positionnement de alt

Les lecteurs d’écran lisent le texte de `alt` en ligne avec le reste du contenu, par conséquent il est souhaitable d’écrire le texte descriptif dans un flux contextuel, en particulier si l’image est flottée.

### Ne négligez pas les autres media

`alt` est presque exclusivement associé aux images, mais cela ne signifie pas que le texte descriptif des autres formats de media doive être négligé&nbsp;: les vidéos et les audios devraient par exemple utiliser [les sous-titres WebVTT](http://thenewcode.com/580/Make-Online-Video-Accessible-And-Searchable-With-WebVTT).

<i>Photo par <a href="https://www.flickr.com/people/bcnbits">MorBCN</a>, sous licence Creative Commons</i>.


Bien utiliser l'attribut alt


J’ai écrit dernièrement un article sur [Comprendre SVG viewport et viewBox](/articles/comprendre-svg-viewbox-et-viewport/) et je me suis dit que celui-ci ferait une suite idéale pour approfondir le sujet.

Comprendre l’espace de travail SVG est parfois compliqué. La qualité de notre SVG dépend fortement du système de coordonnées que nous aurons défini.

<h2>Résumé de viewport et viewBox</h2>

La largeur `width` et la hauteur `height` de notre SVG établissent la surface visible (le viewport). Si nous définissons une `viewBox`, nous pouvons spécifier la façon dont notre élément graphique peut s’étendre pour remplir un container (habituellement le viewport). Lorsque les valeurs de chacun des deux sont identiques, l’image est visible dans son entièreté et se redimensionne lorsque la taille du viewport est modifiée. C’est magnifique.

Si la `viewBox` SVG et le viewport n’ont pas le même ratio largeur et hauteur, `preserveAspectRatio` indique si l’on doit ou non forcer un redimensionnement uniforme.

Dans les exemples qui suivent, nous allons passer des poires aux cerises et nous verrons l’effet que les diverses valeurs de `preserveAspectRatio` auront sur le rendu visuel. Dans ce premier exemple, les cerises sont définies de façon à se redimensionner uniformément grâce à des valeurs de viewport et de `viewBox` identiques.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_avxQPo" src="//codepen.io/pierrechoffe/embed/avxQPo?height=400&amp;theme-id=light&amp;slug-hash=avxQPo&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/avxQPo/">
  viewport et viewBox</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h2>Valeurs de preserveAspectRatio</h2>

`preserveAspectRatio` accepte deux paramètres, `<align>` et `<meetOrSlice>`. Le premier paramètre comporte deux parties et régit l’alignement de la `viewBox` à l’intérieur du viewport. Le second paramètre est optionnel et indique la façon dont le ratio d’aspect doit être préservé.

`preserveAspectRatio=“xMaxYMax meet”`

Ces valeurs vont aligner le coin inférieur droit de la `viewBox` avec le coin inférieur droit du viewport. La valeur `meet` préserve le ratio d’aspect en redimensionnant la `viewBox` de façon à ce qu’elle s’adapte autant que possible au viewport.

Il existe trois options `<meetOrSlice>`&nbsp;: `meet` (par défaut), `slice` et `none`. La première option `meet` assure une complète visibilité du graphique (autant que possible), alors que `slice` essaie de remplir le viewport avec la `viewBox` et découpe (_slice off_) tout ce qui dépasse. La troisième option `none` a pour résultat la perte du ratio d’aspect et donc une image potentiellement déformée.

Vous pourrez trouver une liste complète des combinaisons de valeurs et leur description [sur W3C](http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute).

<h3>Ratio d’aspect et cerises</h3>

La valeur la plus simple est `none`, elle établit qu’aucun redimensionnement uniforme ne doit être appliqué. Si nous augmentons les valeurs en pixel du viewport, les cerises vont s’étirer de manière non uniforme et seront déformées (et pas très appétissantes...)

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_qOwQgd" src="//codepen.io/pierrechoffe/embed/qOwQgd?height=300&amp;theme-id=light&amp;slug-hash=qOwQgd&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/qOwQgd/">
  Ratio d’aspect</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Valeurs Min, Max et Mid modifiées</h3>

Jetons un coup d’oeil à ce que donnent les différentes combinaisons.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_jbRQdp" src="//codepen.io/pierrechoffe/embed/jbRQdp?height=300&amp;theme-id=light&amp;slug-hash=jbRQdp&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/jbRQdp/">
  preserveAspectRatio à xMinYMax</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le `preserveAspectRatio` est fixé à `xMinYMax` ce qui aligne le coin inférieur gauche de la `viewBox` au coin inférieur gauche du viewport, qui est maintenant visualisé par son contour. `meet` assure que l’image est redimensionnée de façon à entrer dans le viewport autant que possible.

Si on change `xMin` en `xMax` ou en `xMid`, les cerises seront positionnées à droite ou au centre du viewport.

Voici ce qui se passe si nous changeons `meet` en `slice`&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_dYLQrX" src="//codepen.io/pierrechoffe/embed/dYLQrX?height=300&amp;theme-id=light&amp;slug-hash=dYLQrX&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/dYLQrX/">
  meet en slice</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

Les cerises ne sont plus forcées de rester à l’intérieur du viewport, et l’excédent graphique est éliminé : tout le contenu de la `viewBox` qui n’entre pas dans le viewport est supprimé.

Les valeurs d’alignement ne sont pas obligées d’être liées.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_XmQyGL" src="//codepen.io/pierrechoffe/embed/XmQyGL?height=300&amp;theme-id=light&amp;slug-hash=XmQyGL&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/XmQyGL/">
  preserveAspectRatio à xMinYMid slice</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

L’exemple ci-dessus a un `preserveAspectRatio` égal à `xMinYMid slice`. Nous voyons maintenant les cerises alignées sur le milieu de l’axe des y du viewport.

👉🏾 Le livre de Joni, “Pocket Guide to Writing SVG” est open source, vous pouvez le [télécharger gratuitement ici](http://svgpocketguide.com/) ou le lire en ligne en suivant le même lien.

<h3><small>Ressources complémentaires en anglais</small></h3>

- [SVG Viewport and viewBox](http://tutorials.jenkov.com/svg/svg-viewport-view-box.html), par Jakob Jenkov

<h3><small>Ressources complémentaires en français</small></h3>

- [Système de coordonnées, transformations et unités](http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro-8.html), par Tecfa


Comprendre SVG preserveAspectRatio


Quand nous utilisons l’élément `<svg>`, nous créons un fragment constitué de détails multiples, imbriqué dans notre document. Ce fragment a son propre viewport et son propre système de coordonnées, ce qui peut semble compliqué et intimidant lorsqu’on débute avec SVG.

Si vous voulez que votre travail s’affiche correctement, il est utile de comprendre l’espace dans lequel se situe votre SVG, mais cela devient réellement crucial dès lors que vous vous lancez dans un SVG un peu plus complexe, comme [les dégradés](/articles/les-degrades-svg/) et les motifs, où les détails sont fortement liés à un système de coordonnées.

Le sujet est riche, mais je donnerai ici les bases, en indiquant l’objectif et le comportement de SVG viewport et viewBox. J’espère que cette introduction vous donnera des fondations solides pour avancer dans vos créations SVG.

👉🏾 _NdT&nbsp;: Vous pouvez également consulter l'article de Dudley Storey traduit dans la Cascade "[Comprendre SVG viewBox](/articles/comprendre-svg-viewbox/)"_.

<h2>Le viewport</h2>

Le viewport est la partie visible d’un SVG. Un SVG est par nature extensible, il peut être aussi haut et large que nous le voulons, et nous pouvons également déterminer qu’une partie seulement soit visible.

**Le viewport est défini grâce aux attributs `height` et `width` à l’intérieur de l’élément `<svg>`.**

Si nous choisissons de ne pas définir de viewport, les dimensions du viewport seront déterminées par tout autre indicateur présent dans le SVG, par exemple la largeur de l’élément SVG contenant. Cependant, si vous laissez cet information non définie, le risque est que votre SVG soit coupé à l’affichage.

De mon point de vue, plus on donne de détails à l’intérieur de SVG, et mieux notre image se comportera sur tous les navigateurs.

<h2>preserveAspectRatio</h2>

Si le viewport et la `viewBox` n’ont pas le même ration de hauteur et de largeur, l’attribut `preserveAspectRatio` indique au navigateur comment afficher l’image (_NdT&nbsp;: Voir [l'article sur preserveAspectRatio](/articles/comprendre-svg-preserveaspectratio/) qui fait suite à celui-ci_).

Les valeurs de cet attribut sont nombreuses, [Mozilla Developer Network les liste clairement](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio).

Si nous ne spécifions pas de valeur, le réglage par défaut impose une mise à l’échelle uniforme et la viewBox entière est visible dans le viewport.

<h2>Poire exemple</h2>

Prenons une image de poire. Dans ce premier exemple, le viewport et la `viewBox` sont définis avec des valeurs correspondantes, une `width` de 155px et une `height` de 190px. La `viewBox` est définie de façon à couvrir entièrement l’image de la poire et cette image est définie de façon à entrer dans les limites de son container.

Dans l’exemple ci-dessous, vous pourrez constater en jouant avec Codepen que l’élément `<svg>` est défini ainsi&nbsp;:

```
//HTML
...
<svg width="115" height="190" viewBox="0 0 115 190">
...
```

Les `width`et `height` définissent le viewport.

<h3>1 - Dimensions concordantes</h3>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_RWOeLO" src="//codepen.io/pierrechoffe/embed/RWOeLO?height=320&amp;theme-id=light&amp;slug-hash=RWOeLO&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/RWOeLO/">
  Dimensions concordantes</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>2 - viewBox réduite</h3>

Si nous réduisons de 50px la hauteur et la largeur de la `viewBox` de notre image, nous réduisons la dimension de la portion de notre poire que nous souhaitons afficher, mais du coup ce qui reste visible est redimensionné de façon à remplir le container.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_RWOexO" src="//codepen.io/pierrechoffe/embed/RWOexO?height=300&amp;theme-id=light&amp;slug-hash=RWOexO&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/RWOexO/">
  viewBox réduite</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>3 - viewport agrandi</h3>

Ajoutons maintenant 200px aux `width` et `height` de notre viewport. L’image se redimensionne pour correspondre à ces dimensions. La `viewBox` couvre l’image entière, la poire est entièrement visible. Le viewport contient toute l’image et définit les limites que doit remplir notre poire.

Voici ce que donne notre viewport agrandi&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_LpvgQg" src="//codepen.io/pierrechoffe/embed/LpvgQg?height=520&amp;theme-id=light&amp;slug-hash=LpvgQg&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="520" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/LpvgQg/">
  viewport agrandi</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>4 - Changer les valeurs `min`</h3>

À l’intérieur de la `viewBox`, les valeurs `min` définissent l’origine de la `viewBox` dans l’élément parent. En d’autres termes, à quel point, dans la `viewBox`, nous voulons que commence la correspondance avec le viewport. Dans les exemples qui précèdent, les valeurs `min` sont définies comme `0, 0` (c’est à dire en haut à gauche). Modifions-les en `50, 30`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_XmQxEV" src="//codepen.io/pierrechoffe/embed/XmQxEV?height=300&amp;theme-id=light&amp;slug-hash=XmQxEV&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/XmQxEV/">
  Changer les valeurs `min`</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

La `viewBox` (ce qui sera visible) commence maintenant à 50px sur l’axe des x et à 30px sur celui des y. En changeant ces valeurs, nous avons simplement changé la partie de la poire sur laquelle nous voulons nous concentrer.

<h2>Conclusion</h2>

Comprendre et mettre en oeuvre un bon système de coordonnées pour SVG est vraiment utile pour créer et afficher vos réalisations graphiques.

Nous avons passé en revue quelques modifications basiques de SVG viewport et `viewBox` qui je l’espère ont montré toute la puissance et l’utilité d’une bonne définition de l’espace de travail SVG.

👉🏾 Le livre de Joni, “Pocket Guide to Writing SVG” est open source, vous pouvez le [télécharger gratuitement ici](https://svgpocketguide.com/) ou le lire en ligne en suivant le même lien.

<h3><small>Ressources complémentaires en anglais</small></h3>

- [SVG Viewport and viewBox](http://tutorials.jenkov.com/svg/svg-viewport-view-box.html), par Jakob Jenkov

<h3><small>Ressources complémentaires en français</small></h3>

- [Système de coordonnées, transformations et unités](http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro-8.html), par Tecfa
- [SVG viewport et viewBox (pour les débutants complets)](https://webdesign.tutsplus.com/fr/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844), par Kezz Bracey


Comprendre SVG viewBox et viewport


L'attribut `viewBox` est l'un des premiers qu'on rencontre quand on débute avec [SVG](/tags/svg/), et potentiellement une grande source de confusion. Bien que largement couvert par d'autres auteurs —&nbsp;[la série d'articles de Sara Soueidan](https://sarasoueidan.com/blog/svg-coordinate-systems/) pouvant être considérée comme une des sources canoniques sur le sujet&nbsp;— il manquait d'un "guide de départ" donnant les quelques détails nécessaires pour pouvoir se lancer dans les applications basiques du dessin vectoriel. C'est l'objectif de cet article.
<span aria-hidden="true" data-icon="&#9758;"></span>&nbsp;_NdT&nbsp;: En complément, on pourra également consulter dans La Cascade les articles de Joni Trythall [comprendre viewBox et viewPort](/comprendre-svg-viewbox-et-viewport/) ainsi que [comprendre SVG preserveAspectRatio](/comprendre-svg-preserveaspectratio/)_.

<h2>Un canevas infini</h2>

L'espace de dessin de SVG est infini : on peut dessiner à partir de n'importe quel point de coordonnées dans un document SVG. Toutefois, pour des raisons d'_affichage_, le document a généralement une dimension, comme un cadre ou un canevas. C'est ici qu'entre en jeu la viewBox.

On la trouve le plus souvent appliquée ainsi :

```
<svg viewBox="0 0 200 100">
```

> 👉🏾 Remarque : j'ai laissé de côté l'[espace de nom](https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course) pour la simplicité et la clarté des exemples. De plus, le background des exemples SVG sera apparent (en bleu clair) pour mieux montrer leur dimension réelle.

La viewBox utilise 4 valeurs pour localiser deux coordonnées dans l'espace&nbsp;: les coins supérieur gauche et inférieur droit du SVG. Dans le code ci-dessus le coin supérieur gauche est défini comme `0 0` (valeur de x, puis valeur de y), et le coin inférieur droit comme 200 unités vers la droite et 100 unités vers le bas.

Deux points à noter ici :

- Les valeurs utilisées _ne comportent pas d'unité de mesure_. Il est préférable de ne pas les considérer en pixels, centimètres ou autres, mais simplement comme des unités génériques.
- Même s'il est très courant que le coin supérieur gauche d'un document SVG commence à `0 0`, ce n'est pas obligatoire.

Dans la plupart des applications de dessin vectoriel, la viewBox correspond au canevas ou à l'_artboard_ préparé avant que vous ne commenciez à dessiner. Toutefois, de nombreuses applications, dont [Adobe Illustrator](http://www.adobe.com/fr/products/illustrator.html) et [Sketch](https://www.sketch.com/), vont réduire la viewBox à la surface visible autour des éléments que vous aurez dessiné lorsqu'ils les exporteront en SVG. C'est une des raisons pour lesquelles il est important de bien comprendre la viewBox&nbsp;: vous pouvez ajuster le canevas du SVG directement dans le code, sans avoir à vous battre avec le comportement de votre application.

Un [élément SVG circle](/articles/les-bases-de-svg-cercles-et-ellipses/) dessiné sans attributs `cx` ou `cy` supposera que son centre est à `0 0` dans l'espace de coordonnées. Voyons ce que ça donne lorsque nous utilisons les valeurs viewBox que nous avons utilisées&nbsp;:

```
<svg viewBox="0 0 200 100">
    <circle r="50">
</svg>
```

Ce qui produit :

<svg viewBox="0 0 200 100" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle r="50"></circle></svg>

Comme vous pouvez le constater, la viewBox ne détermine pas la taille de l'élément SVG rendu sur la page. Pour cela, il y a les attributs `width` et `height` et/ou n'importe quel CSS appliqué à SVG. Par contre, la viewBox détermine le _ratio d'aspect_ de l'espace et la taille relative des éléments qui l'occupent.

> 👉🏾 Remarquez également la capitale à l'intérieur de `viewBox` : SVG, qui est un langage de [la famille XML](https://fr.wikipedia.org/wiki/Extensible_Markup_Language), est sensible à la casse, donc l'attribut doit être écrit ainsi, avec un B majuscule, pour être reconnu.

Si la viewBox est réduite, la taille apparente du cercle s'agrandit, relativement au document SVG, même si le rayon du cercle reste inchangé&nbsp;:

```
<svg viewBox="0 0 100 50">
    <circle r="50">
</svg>
```

<svg viewBox="0 0 100 50" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle r="50"></circle></svg>

On pourrait voir cela comme un "zoom avant" dans le document. La viewBox nous permet une "mise à l'échelle" à l'intérieur d'un SVG.

Les éléments dessinés à l'extérieur de l'espace de la viewBox sont coupés. Ajoutons un autre élément `<circle>`, cette fois-ci avec des valeurs `cx` et `cy` ainsi qu'une <span itemprop="about" content="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill">couleur de remplissage</span> (_fill_).

```
<svg viewBox="0 0 100 50">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>
```

Du fait que l'élément se trouve en dehors des dimensions de la viewBox, on ne peut pas le voir. Le document SVG l'a automatiquement découpé. Changeons cela en modifiant les valeurs de la viewBox&nbsp;:

```
<svg viewBox="0 0 200 120">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>
```

Ce qui nous donne :

<svg viewBox="0 0 200 120" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle cx="150" cy="120" r="20" fill="red" /></svg>

Il est important de noter que les éléments SVG découpés en dehors de la viewBox sont toujours présents. Il peuvent être animés et revenir dans la surface visible. Mais par défaut ils ne sont pas visibles.

Il est également possible de faire apparaître des éléments cachés par les dimensions restrictives de la viewBox en appliquant `overflow: visible` au document SVG via CSS. Cependant, cela n'étendra pas le background SVG (s'il y en a un) de manière à s'adapter à l'élément :

<figure role="group"><svg viewBox="0 0 200 120" style="width:80%;margin:0 auto;display:block;background-color:lightblue;overflow:visible"><circle cx="150" cy="120" r="20" fill="red" /></svg><figcaption>L'élément caché réapparaît</figcaption></figure>

<h2>Sauvetage</h2>

On peut également donner des valeurs négatives aux coordonnées du coin supérieur gauche de la viewBox. Dans certains scénarios, comme ceux évoqués en début d'article lorsque les éléments SVG sont exportés un peu trop serrés, cela peut s'avérer nécessaire.

Admettons que nous ayons ceci :

```
<svg viewBox="0 0 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>
```

...qui crée :

<svg viewBox="0 0 500 100" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle cx="50" cy="0" r="50" fill="red" /></svg>

Seule la partie inférieure du cercle est visible. Si nous diminuons la composante `y` du coin supérieur gauche de la viewBox, nous pouvons corriger le problème&nbsp;:

```
<svg viewBox="0 -40 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>
```

Le résultat :

<svg viewBox="0 -40 500 100" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle cx="50" cy="0" r="50" fill="red" /></svg>

> 👉🏾 L'ajout d'un padding à notre élément SVG aura le même effet, mais il n'exposera pas davantage un élément caché par la limite de la viewBox.

Il est important de noter que modifier les valeurs de la viewBox ne changera pas le _point d'origine_ du SVG globalement. Autrement dit, un cercle dessiné avec son centre à `0 0` sera complètement visible si le coin supérieur gauche est suffisamment déplacé vers l'extérieur. Le point d'origine, lui, n'est pas modifié.

<h3>Conclusion</h3>

Il y a bien d'autres choses à dire sur viewBox, mais cet article et les liens suggérés ci-dessous devraient vous suffire pour vous lancer dans SVG en toute confiance. Bon courage&nbsp;!

👉🏾 NdT : vous pouvez également consulter ici l'article de Joni Trythall [Comprendre SVG viewBox et viewport](/articles/comprendre-svg-viewbox-et-viewport)


Comprendre SVG viewBox

Un cas intéressant d’utilisation de CSS Blend Mode est l’amélioration du design des diagrammes et des graphes.

## Diagrammes de Venn améliorés

Prenez par exemple le diagramme de Venn classique illustrant [la règle "Fast, Cheap, Good"](https://en.wikipedia.org/wiki/Project_management_triangle)&nbsp;: Le markup [SVG](/tags/svg/)</span></span> du diagramme de base pourrait être&nbsp;:

```xml
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <title>Project Triangle</title>
      <desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc>
      <style type="text/css">
        svg {
          background: #1c1c38;
          }
        circle {
          opacity: 0.76;
          }
        text {
          font-family: Avenir Black, Avenir, sans-serif;
          font-weight: 700;
          font-size: 36px;
          }
      </style>
      <circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" /> <circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" /> <circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap">      <text x="100" y="165" id="fast">FAST</text>
      <text x="310" y="165" id="good">GOOD</text>
      <text x="190" y="340" id="cheap">CHEAP</text>
  </svg>
```

Le résultat :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>Project Triangle</title><desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc><style type="text/css">svg { background: #1c1c38; }circle { opacity: 0.76; }text { font-family: Avenir Black, Avenir, sans-serif;font-weight: 700; font-size: 36px;}</style><circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" /><circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" /><circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap" /><text x="100" y="165" id="fast">FAST</text><text x="310" y="165" id="good">GOOD</text><text x="190" y="340" id="cheap">CHEAP</text></svg>

Remarquez que nous aurions pu laisser l’opacité en ligne pour chacun des cercles, puisque c’est également un attribut de présentation SVG. Je les ai intégrés comme des styles pour économiser de l’espace et éviter des répétitions inutiles. J’ai utilisé `aria-labelledby` pour l’accessibilité afin d’associer chaque cercle avec le texte approprié.

C’est un bon début, mais nous pouvons améliorer l’apparence du diagramme en ajoutant `mix-blend-mode` aux éléments `circle`&nbsp;:

```css
circle {
  opacity: 0.76;
  mix-blend-mode: color-dodge;
}
```

Ce qui nous donne&nbsp;:



<figure role="group"><img src="/images/venn.svg" alt="le diagramme fast, good, cheap" alt="diagramme amélioré"/></figure>

👉🏾 _Nota Bene_ : pour parvenir au résultat espéré, les éléments auxquels on applique `mix-blend-mode` _ne doivent pas être_ sur un fond blanc ou noir purs. C’est une bonne règle pour tester vos blend modes en général.\n\nTout comme `opacity`, nous aurions pu appliquer la version SVG native de `blend-mode`, les filtres `<feBlend>`. Comme beaucoup d’aspects récents de CSS, les blend modes ont leurs racines dans la syntaxe SVG. J’ai utilisé la version CSS dans la mesure où il s’agit d’une _amélioration_ de la présentation, et non une obligation, et la syntaxe CSS est plus simple à écrire et à utiliser.

## Graphiques à barres améliorés

<div class="bargraph">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200">
<line x1="69.7" y1="187.9" x2="422.7" y2="187.9"></line>
<line x1="69.7" y1="187.9" x2="69.7" y2="183.4"></line>
<line x1="422.7" y1="187.9" x2="422.7" y2="183.4"></line>
<line x1="69.7" y1="187.9" x2="69.7" y2="10.2"></line>
<line x1="69.7" y1="187.9" x2="78.6" y2="187.9"></line>
<line x1="69.7" y1="152.3" x2="78.6" y2="152.3"></line>
<line x1="69.7" y1="116.8" x2="78.6" y2="116.8"></line>
<line x1="69.7" y1="81.3" x2="78.6" y2="81.3"></line>
<line x1="69.7" y1="45.7" x2="78.6" y2="45.7"></line>
<line x1="69.7" y1="10.2" x2="78.6" y2="10.2"></line>
<rect x="342.7" y="51.1" width="42.4" height="136.8"></rect>
<rect x="295.7" y="47.5" width="42.4" height="140.4"></rect>
<rect x="248.6" y="63.5" width="42.4" height="124.4"></rect>
<rect x="201.5" y="57.8" width="42.4" height="130.1"></rect>
<rect x="154.5" y="45.7" width="42.4" height="142.1"></rect>
<rect x="107.4" y="42.7" width="42.4" height="145.2"></rect>
</svg>
</div><br/><br/>

Comme dans mon article sur les [textes avec effets blend modes](http://thenewcode.com/1032/Easy-Cross-Browser-Text-Masks-with-Blend-Modes), nous pouvons utiliser les blend modes pour donner un background aux barres verticales d’un diagramme en barres. Pour cet exemple, j’ai laissé de côté les aspects liés à l’accessibilité ainsi que les légendes, pour plus de clarté. L’effet principal ici est obtenu par le fait que le SVG qui contient le diagramme en barres est lui-même inclus dans une div qui a une image de background&nbsp;:

```css
div {
  background-image: url(new-york-city-skyline.jpg);
  background-size: cover;
  font-size: 0;
}
svg {
  background: #fff;
  mix-blend-mode: lighten;
}
rect {
  fill: #202020;
  width: 42.4px;
}
```

Nous pourrions donner un aspect plus propre à l’effet en redimensionnant l’image de background. Telles quelles, les axes des abscisses et des ordonnées prennent également l’effet. Une autre manière de faire serait d’entourer les rectangles représentant les barres avec des [éléments clip-path](http://thenewcode.com/1007/Combining-CSS-clip-path-and-Shapes-for-New-Layout-Possibilities), ce qui fonctionnerait assez comme notre effet blend-mode.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eNQbjz" src="//codepen.io/dudleystorey/embed/eNQbjz?height=450&amp;theme-id=light&amp;slug-hash=eNQbjz&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/eNQbjz/">
  Better SVG Diagrams & Graphs with Blend Modes</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>

_(Photo par [Josh Liba](https://www.flickr.com/photos/jliba/8067975235), sous licence [CC-BY-NC-ND 2.0](https://creativecommons.org/licenses/by-nc-nd/2.0/))_

Créer de superbes diagrammes avec SVG et Blend Modes


Quand on se lance dans un design de background avec motifs en diagonale, on utilise habituellement nos connaissances en trigonométrie (pour des motifs (_patterns_) qui se répètent à l’intérieur d’un carré et se suivent sans rupture) ou bien des dégradés linéaires CSS. Ces deux méthodes ont leurs limites et leurs complications, que résout le pattern SVG.

<h2>Tuiles SVG</h2>

Un motif SVG est exactement ce que son nom indique : une surface qui comporte des informations de tracé, lesquelles sont ensuite reprises sur une surface plus large —&nbsp;un peu comme un carrelage à partir d’un carreau.

Dans la plupart des cas, il est plus facile de dessiner le motif _d’abord_, c’est à dire de créer de SVG de l’intérieur. Le template de base est le suivant&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
          <line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
        </pattern>
      </defs>
    </svg>

Plusieurs choses sont à noter ici :

1. Le SVG ne comporte pas de `viewBox` mais utilise `width` et `height` à la place, les deux attributs ayant pour valeur 100%.
2. Le `<pattern>` a ses _propres_ `width` et `height`. Le `patternUnits="userSpaceOnUse"` signifie que ces limites sont utilisées _à l’intérieur du motif_ lui-même&nbsp;: elles deviennent les limites du monde occupé par le motif.
3. Le `<pattern>` est défini à l’intérieur d’un élément `<defs>` et il faut se rappeler que les `<defs>` ne sont pas affichés tant qu’ils ne sont pas référencés. C’est pourquoi il peut être préférable de dessiner votre motif SVG dans un autre document, comme un dessin vectoriel normal, idéalement à l’intérieur d’une [viewBox](/articles/comprendre-svg-viewbox/) de mêmes dimensions que le pattern (50&nbsp;&times;&nbsp;50 dans notre cas), ce qui vous permet de visualiser les composants du motif —&nbsp;et de les modifier le cas échéant&nbsp;— avant de les placer à l’intérieur du contexte du `<pattern>` lui-même.
4. Dans notre exemple, le motif est constitué d’une ligne verticale qui occupe exactement la moitié de la surface du motif.

Nous n’avons pas tout à fait terminé. Pour voir le résultat, notre motif doit être utilisé pour remplir un élément SVG. Un rectangle est ce qui paraît le plus logique&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
          <line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#pinstripe)" />
    </svg>

Le `<rect>` occupe tout l’espace du SVG. Peu importe qu’il soit déclaré avant ou après l’élément `<defs>`&nbsp;: le `fill` trouvera l’`id` du motif de toute façon&nbsp;:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50"><line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" /></pattern></defs><rect width="100%" height="100%" fill="url(#pinstripe)" /></svg>

Sauvegardé sous le nom `pinstripe.svg`, le résultat est appliqué comme image de background à une page HTML, de la même façon qu’habituellement&nbsp;:

    body { background-color: darkblue; background-image: url(’pinstripe.svg’); }

Le motif se reproduit sur toute la page. Arrivé ici, vous pourriez vous dire “eh, mais on peut faire la même chose avec moins de markup” et en effet c’est que nous avons vu dans l’article sur [Backgrounds SVG : les rayures](/articles/backgrounds-svg-les-rayures/). Mais c’est ici que ça devient intéressant. Du fait que `<pattern>` est un petit monde en soi, nous pouvons faire ce que nous voulons avec lui et voir ces changements appliqués dans le contexte plus large de la page. Revenons à `pinstripes.svg` et modifions la balise `<pattern>`&nbsp;:

    <pattern id="pinstripe" patternTransform="rotate(45)" patternUnits="userSpaceOnUse" width="50" height="50">

Sauvegardons le fichier, on rafraîchit la page HTML et on voit maintenant que notre motif de background est à 45°, sans que nous ayons besoin de rien faire d’autre.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="pinstripe2" patternTransform="rotate(45)" patternUnits="userSpaceOnUse" width="50" height="50"><line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" /></pattern></defs><rect width="100%" height="100%" fill="url(#pinstripe2)" /></svg>

La rotation peut prendre n’importe quelle valeur avec le même résultat&nbsp;:

    <pattern id="pinstripe" patternTransform="rotate(33)" patternUnits="userSpaceOnUse" width="50" height="50">

Là encore, le tuilage est parfait. Vous voulez des lignes plus fines&nbsp;? Il suffit de diminuer le `stroke-width` sur l’élément `line`. Moins de lignes sur la page&nbsp;? Ajoutez une déclaration `background-size` à votre CSS.

Voyez aussi [patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/patternTransform) dans MDN.

<h2>Conclusion</h2>

Lorsque nous comprenons les bases des motifs SVG, c’est un monde de créativité qui s’ouvre&nbsp;: dans vos backgrounds, vous pouvez superposer des motifs multiples, créer des tuilages parfait à partir de formes vectorielles. J’en montrerai quelques-uns dans les prochains articles.

_Tous mes remerciements à [Amelia Bellamy-Royds](https://twitter.com/AmeliasBrain) qui a attiré mon attention sur cette technique et dont j’ai eu plaisir à lire et critiquer les livres récemment. C’est dans ses ouvrages que j’ai trouvé l’inspiration pour cet article_.


Diagonales et motifs SVG en background

Guide des animations SVG (SMIL)


L’[animation d’un SVG au moyen de CSS](/articles/animer-un-svg-avec-css/) est facile, cependant CSS ne peut pas animer toutes les propriétés SVG animables. Par exemple, les propriétés qui définissent la forme présente d’un élément ne peuvent être modifiées ou animées en CSS. Il est toutefois possible de le faire grâce à SMIL. Sara Soueidan en parle dans son remarquable [Guide des animations SVG (SMIL)](/articles/guide-des-animations-svg/) ici-même, mais je voudrais éclairer ce point plus précisément ici.

**Le plus important à retenir&nbsp;: les formes doivent avoir le même nombre de points**  
Autrement, l’animation ne marchera pas. La forme ne disparaîtra pas, rien de grave ne se produira, mais rien ne s’animera.

Il n’est pas toujours évident de savoir combien de points constituent une forme en regardant l’attribut `d` (dans le cas d’un `path`) ou `point` (dans le cas d’un polygone), le mieux est parfois de commencer avec une forme simple dans un programme d’édition vectorielle.

### 1. Commencer avec la forme la plus complexe

Dans cette démo, je vais partir d’une étoile, qui sera ma forme la plus compliquée, pour la morpher en _check_ de case à cocher (une “hirondelle”).

<figure><img src="/images/star.png" alt=""/></figure>

Gardez une copie de ce SVG, puis utilisez une autre version pour construire la forme suivante.

### 2. Construire la forme suivante avec les mêmes points

Déplacez les points pour obtenir la forme désirée.

<figure><img src="/images/star-illustrator-gif-compressor.gif" alt="dans illustrator, on déplace les points pour former une hirondelle"/></figure>

<figure><img src="/images/check-illustrator-gif.png" alt=""/></figure>

### 3. Utiliser la forme de départ dans le SVG lui-même

    //SVG
    <svg viewBox="0 0 194.6 185.1">

      <polygon fill="#FFD41D" points=" ... les points de la forme 1 ... ">

      </polygon>

    </svg>

### 4. Ajouter un élément d’animation vers la forme suivante

    //SVG
    <svg viewBox="0 0 194.6 185.1">

      <polygon fill="#FFD41D" points=" ... les points de la forme 1 ... ">

        <animate attributeName="points" dur="500ms" to=" ... les points de la forme 2 ... " />

      </polygon>

    </svg>

Cette animation sera lancée immédiatement, il nous faut corriger cela.

### 5. Déclencher l’animation quand on le veut

SMIL permet de traiter les interactions telles que clics et hovers, tant que tout se passe à l’intérieur de SVG. Par exemple, vous pourriez lancer l’animation lorsqu’elle est cliquée&nbsp;:

    //SVG
    <polygon id="shape" points=" ... les points de la forme 1 ... ">

      <animate begin="shape.click" attributeName="points" dur="500ms" to=" ... les points de la forme 2 ... />

    </polygon>

Pas mal, mais un peu limité car il ne permet de traiter que les clics sur ce SVG précisément. Mais quid si cet élément fait partie d’un bouton et qu’on veut lancer l’animation lorsque c’est le bouton qui est cliqué&nbsp;?

Tout d’abord, donnons un ID à notre animation, afin de permettre à JavaScript de la retrouver, puis empêchons tout déclenchement intempestif&nbsp;:

    //SVG
    <animate id="animation-to-check" begin="indefinite" ... />

Nous avons maintenant référencé cette animation et nous pouvons la déclencher comme nous l’entendons&nbsp;:

    //JavaScript
    animationToCheck = document.getElementById("animation-to-check");

    // Lancez ceci sur un clic, ou de la façon que vous voulez
    // (voir démo ci-dessous)
    animationToCheck.beginElement();

### Démo

Cette démo contient en fait quatre animations&nbsp;: une pour morpher l’étoile en hirondelle, une pour modifier la couleur de la forme, et les mêmes dans l’animation inverse. Lorsqu’on clique sur le bouton, on vérifie d’abord l’état présent du bouton, puis on déclenche les animations appropriées.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_DpFfE" src="//codepen.io/chriscoyier/embed/DpFfE?height=200&amp;theme-id=light&amp;slug-hash=DpFfE&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="200" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/DpFfE/">
  Shape Morph Button</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>


Le morphing en SVG


Même si la plupart des designers utilisent un logiciel de création graphique du type Adobe Illustrator ou Sketch pour créer des formes en <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><link itemprop="url" href="http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics"/><span itemprop="name">[SVG](/tags/svg/)</span></span>, le fait de connaître la syntaxe de base de SVG permet de créer plus facilement et plus précisément des éléments tels que lignes, cercles et rectangles —&nbsp;et parfois, encoder ces éléments à la main est plus rapide et plus efficace qu’un éditeur visuel.

<h2>Cercles</h2>

Regardons par exemple le tracé basique d’un cercle. Pour faire simple, je laisserai pour un prochain article les complications des unités et de leurs variations.

Vous pourriez écrire ce code à l’intérieur d’une balise `<body>` sur une page HTML, ou bien comme un document séparé, enregistré avec l’extension .svg —&nbsp;dans les deux cas le résultat serait visible dans un navigateur.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="red" />
    </svg>

…et le résultat est le suivant :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><circle cx="100" cy="100" r="80" fill="tomato" /></svg>

Quelques points à noter à ce stade :

1. L’élément `circle` doit être “auto-fermant”
2. Le cercle est positionné à partir de son centre (cx pour “centre, axe des x”, cy pour “centre, axe des y”)
3. La position du centre du cercle est mesurée à partir du coin supérieur gauche de l’élément SVG
4. Le rayon (r) du cercle est, par défaut, mesuré dans la même unité que le reste
5. Si l’un de ces attributs n’est pas mentionné, il est supposé être égal à 0 (et noir pour les attributs de présentation impliquant la couleur)
6. le remplissage (_fill_) du cercle peut être spécifié via [le système de couleur CSS](/tags/couleur/) que vous préférez.

Comme les rectangles et les autres éléments SVG, un cercle SVG est constitué de deux “parties”, un remplissage interne et un tracé (_stroke_) externe.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="red" stroke-width="15" stroke="black" />
    </svg>

Le code du cercle est un peu long et compliqué&nbsp;: nettoyons-le avec un sélecteur de classe&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <circle cx="100" cy="100" r="80" class="redcirc" />
    </svg>

…et utilisons ce CSS :

    //CSS
    svg {
      width: 200; height: 200;
    }
    .redcirc {
      fill: red;
      stroke: black;
      stroke-width: 15;
    }

Le résultat est le même que dans la version précédente&nbsp;:

<div class="ds-svg-circles"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" class="redcirc" /></svg></div>

Notes :

- Cela ne signifie pas que vous ayez tout d’un coup la possibilité d’appliquer `fill` aux éléments HTML. `fill`, `stroke` et `stroke-width` ne s’appliquent qu’aux éléments SVG. La plupart des attributs de présentation SVG ont un équivalent en propriété CSS, mais pas tous.
- Si vous écrivez votre SVG dans le contexte d’une page HTML, la classe `.redcirc` peut se trouver dans la partie `<head>` de votre document ou dans une feuille de style externe.
- La largeur du trait (_stroke-width_) est répartie de façon égale des deux côtés du contour de l’élément.

Une fois que nous avons ceci, il est très facile de commencer à créer des tracés plus complexes. Je pense que vous voyez déjà où nous allons en venir&nbsp;:

    <svg viewBox="0 0 500 500">
      <title>Captain America’s Shield</title>
      <circle cx="250" cy="250" r="250" fill="red" />
      <circle cx="250" cy="250" r="200" fill="white" />
      <circle cx="250" cy="250" r="150" fill="red" />
      <circle cx="250" cy="250" r="50" fill="blue" />
      <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
    </svg>

Remarquez que les éléments SVG s’empilent [comme les éléments HTML](http://demosthenes.info/blog/136/Stacking-order-and-z-index).

Cependant, nous pouvons être plus malins ! D’une manière générale, moins il y a d’éléments dans un document SVG et mieux on se porte, donc nous pouvons simuler des sections du bouclier en utilisant `stroke` et seulement deux cercles&nbsp;:

    <svg viewBox="0 0 500 500">
      <title>Captain America’s Shield</title>
      <circle cx="250" cy="250" r="220" fill="white" />
      <circle cx="250" cy="250" r="125" fill="blue" />
      <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
    </svg>

combinés avec ce CSS :

    //CSS
    circle {
      stroke-width: 50;
      stroke: red;
    }

<div class="ds-svg-shield"><div class="ds-svg-container"><svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"><title>Captain America’s Shield</title><circle cx="250" cy="250" r="220" fill="white" /><circle cx="250" cy="250" r="125" fill="blue" /><polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209 " /></svg></div></div>

Le résultat est le même que l’original. [La version complète](http://codepen.io/dudleystorey/pen/ZGOKLJ) (ci-dessus) utilise également une variation intéressante de [flexbox](/tags/flexbox/) et de `box-shadow` pour positionner et ombrer le bouclier.

<h2>Ellipses</h2>

La syntaxe de l’ellipse est proche de celle du cercle&nbsp;:

    <svg viewBox="0 0 120 120">
      <ellipse cx="60" cy="60" rx="60" ry="30"/>
    </svg>

Ici, nous avons deux rayons représentant [le demi-grand-axe (_semi-major_) et le demi-petit-axe (_semi-minor_)](http://en.wikipedia.org/wiki/Semi-major_axis) de l’ellipse.

Un trait utile des cercles et des ellipses (et des formes SVG en général) écrites en ligne dans une page est que, contrairement aux éléments HTML, leur “zone active” correspond exactement à leur forme. Donc si nous insérons un lien dans notre ellipse&nbsp;:

    <svg viewBox="0 0 120 120">
      <a xlink:href="http://www.cnn.com">
        <ellipse cx="60" cy="60" rx="50" ry="25" />
      </a>
    </svg>

et que nous combinons ceci avec ce CSS&nbsp;:

    //CSS
    ellipse:hover { fill: red; }

nous obtenons exactement ceci : remarquez la réponse précise en fonction de la position de la souris.

<div class="sd-ellipse"><svg viewBox="0 0 120 120"><a xlink:href="http://www.cnn.com"><ellipse cx="60" cy="60" rx="50" ry="25" /></a></svg></div>

Il est possible de reproduire cette forme en HTML via `border-radius` sur un élément, mais le défi devient insurmontable dès lors que les formes de boutons sont plus compliquées —&nbsp;et c’est l’une des raisons qui font de SVG un excellent format pour les éléments d’interface utilisateur.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/ZGOKLJ">Le bouclier de Captain America</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>


Les bases de SVG : Cercles et ellipses


Les groupes —&nbsp;la balise `<g>` en SVG&nbsp;— ressemblent un peu aux éléments `<div>` de nos pages web en ce sens qu’ils permettent de contenir et de contrôler des éléments ayant une relation les uns avec les autres.

Toutefois, il existe des différences entre `<g>` et `<div>` qu’il est important de bien comprendre.

- De même que les éléments `<div>`, les éléments `<g>` **permettent à leurs éléments descendants d’hériter de leurs styles**&nbsp;:

```
<svg viewBox="0 0 400 160">
    <g fill="#33E" stroke="#000" stroke-width="10px">
        <circle  cx="88" cy="80" r="62"/>
        <rect x="246" y="17" width="123" height="123"/>
    </g>
</svg>
```

Ce qui nous donne :

<svg viewBox="0 0 400 160"><g fill="#33E" stroke="#000" stroke-width="10px"><circle  cx="88" cy="80" r="62"/><rect x="246" y="17" width="123" height="123"/></g></svg>

- De même, **les transformations appliquées à des groupes sont héritées** par les éléments situés à l’intérieur du groupe.
- Cependant, contrairement aux éléments `<div>`, **les groupes SVG ne peuvent pas être positionnés**. Ils peuvent être déplacés vers une nouvelle position, _via_ `transform`, mais du fait qu’ils n’ont pas d’attributs x ou y, ils ne peuvent être _positionnés_ dans le document SVG. On peut contourner le problème en imbriquant les éléments `<svg>` à l’intérieur de groupes, puisque les éléments `<svg>` ont des attributs x et y. Je reviendrai là-dessus dans un article à venir.
- Tout comme les éléments `<div>`, les éléments `<g>` peuvent avoir un attribut `id` (et également des classes, même si c’est moins courant), pour les styles ou les scripts&nbsp;:

```
<svg viewBox="0 0 400 163">
<style type="text/css">
    #svg-container {
        fill: hsl(45,80%,80%);
        stroke: rgba(0,0,0,0.3);
        stroke-width: 10px;
    }
</style>
    <g id="svg-container">
        <circle  cx="88" cy="80" r="62"/>
        <rect x="246" y="17" width="123" height="123"/>
    </g>
</svg>
```

Ce qui crée :

<svg viewBox="0 0 400 163"><style type="text/css">#svg-container { fill: hsl(45,80%,80%);stroke: rgba(0,0,0,0.3);stroke-width: 10px;}</style><g id="svg-container"><circle  cx="88" cy="80" r="62"/><rect x="246" y="17" width="123" height="123"/></g></svg>

Tout comme en CSS, les règles de présentation appliquées directement aux éléments écraseront les règles héritées de leurs éléments parents si les deux entrent en conflit.

- Enfin, contrairement aux éléments `<div>`, les éléments `<g>` peuvent avoir leurs propres éléments `<title>` (_titre_) et `<desc>` (_description_) imbriqués pour ajouter des informations supplémentaires et améliorer l’accessibilité.

Attention : [Adobe Illustrator](http://thenewcode.com/821/Adobe-Illustrator-Workflow-For-SVG-Production) et d’autres éditeurs graphiques surchargent de code leurs exports SVG en utilisant de nombreux éléments `<g>` souvent inutiles (et en général liés à des calques multiples). Pour éviter cela, il est conseillé de fusionner les calques _avant_ de sauvegarder le fichier en format SVG. Une autre solution est d’utiliser un outil comme [SVGoMG](https://jakearchibald.github.io/svgomg/) de [Jake Archibald](https://twitter.com/jaffathecake) qui pourra supprimer les éléments groupes redondants lors du processus de minification.

<small>Photo par [Dina Belenko](https://500px.com/arken) reproduite avec sa permission.</small>


Les bases de SVG : Groupes


Si vous souhaitez dessiner des lignes ou une forme ouverte, plutôt qu’un [polygone](/articles/les-bases-de-svg-polygones/) ou un [cercle](/articles/les-bases-de-svg-cercles-et-ellipses/), [SVG](/tags/svg/) vous offre deux options&nbsp;: les lignes et les polylignes.

<h2>Les lignes</h2>

La syntaxe SVG pour les lignes peut paraître intimidante de prime abord, mais c’est parce qu’elle est précise&nbsp;: une ligne peut être décrite simplement en deux points, chacun spécifié par ses coordonnées `x` et `y`.

À la différence des formes que nous avons vues jusqu’ici, **les lignes sont entièrement invisibles par défaut**, et le resteront tant qu’on n’aura pas spécifié au moins une couleur de trait (_stroke_). Une fois colorées, elles auront l’épaisseur d’un cheveu tant qu’on n’aura pas spécifié une épaisseur via `stroke-width`.

    <svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="0" x2="300" y2="200" stroke-width="20" stroke="black" />
    </svg>

<div style="margin:0 auto;"><svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="200" stroke-width="25" stroke="black" /></svg></div>

Le lecteur à l’oeil exercé aura remarqué que l’extrémité du trait est coupé par les coins de la `viewBox`. Pour s’assurer que le trait apparaisse dans son intégrité, il faut lui donner des coordonnées qui dépassent la viewBox —&nbsp;ou bien utiliser `stroke-linecap: square` (dont nous allons parler plus bas) afin d’étendre l’extrémité des lignes.

Le résultat avec `stroke-linecap: square` :

<div style="margin:0 auto;"><svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="200" stroke-width="25" stroke="black" stroke-linecap="square" /></svg></div>

<h2>Les polylignes</h2>

Les polylignes sont simplement des lignes SVG qui se rejoignent en des points multiples&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4">
      <polyline stroke="#000" stroke-width="6" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/>
    </svg>

Ce qui donne :

<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4"><polyline stroke="#000" stroke-width="6" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/></svg></div>

Remarquez que contrairement à ce qui se passe avec les outils graphiques, le fait de placer le dernier point d’une polyligne au même endroit que le point de départ n’aura pas pour résultat de “fermer” la forme. Cependant, vous pouvez appliquer un remplissage couleur (_fill_) à la forme&nbsp;:

<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4"><polyline stroke="#000" stroke-width="12" fill="tomato" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/></svg></div>

Je vous en dirai plus sur les `fill` dans un article à venir, mais pour l’instant, il suffira de dire que même si nous pouvons appliquer un remplissage couleur à une polyligne, et en général il marchera comme souhaité, il ne donnera qu’une _apparence_ de polygone fermé, mais ce ne sera pas la même chose.

<h2>Caps & corners</h2>

Lorsqu’une ligne SVG change de direction, on n’est pas obligé de rendre l’angle qui en résulte sous la forme d’un angle “dur”&nbsp;: il existe deux autres options, grâce à la propriété `stroke-linejoin`. Celle-ci prend deux valeurs, `round` (arrondi) et `bevel` (biseauté), qui font exactement ce qu’on attend d’elles (vous aurez peut-être besoin d’augmenter l’épaisseur du trait pour bien voir l’effet). Une troisième valeur, `miter`, est la valeur par défaut.

Ci-dessous, nos polylignes avec une valeur de `stroke-linejoin="bevel"`&nbsp;:

<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4"><polyline stroke="#000" stroke-width="12" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 " stroke-linejoin="bevel"/></svg></div>

De la même manière, les fins de lignes peuvent se terminer par des sortes de capuchons, via la propriété `stroke-linecap`, qui prend trois valeurs, `round` (arrondi en demi cercle), `square` (la ligne prend un capuchon carré, comme le bout d’un lacet de chaussure), ou `butt` par défaut. Ci-dessous les trois options, où l’on voit que le capuchon allonge légèrement la ligne, comme on le voyait déjà dans le deuxième exemple de cet article&nbsp;:

<div style="margin:0 auto;width:50%;"><svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><line x1="50" y1="50" x2="280" y2="50" stroke-width="25" stroke="black" stroke-linecap="round" /><line x1="50" y1="100" x2="280" y2="100" stroke-width="25" stroke="black" stroke-linecap="square" /><line x1="50" y1="150" x2="280" y2="150" stroke-width="25" stroke="black" stroke-linecap="butt" /></svg></div>

S’agissant de propriétés liées à l’apparence, `stroke-linejoin` et `stroke-linecap` peuvent être appliquées soit comme attributs, soit comme propriétés CSS.

Un dernier point : Les traits (_stroke_) et les remplissages couleur (_fill_) peuvent être appliqués à d’autres objets que les lignes, polylignes et polygones&nbsp;; par exemple, ils peuvent être utilisés pour [tracer un texte](http://thenewcode.com/439/Introduction-to-SVG-Text).


Les bases de SVG : Lignes simples et multiples


Si vous voulez créer une forme SVG plus complexe qu’un [cercle](/articles/les-bases-de-svg-cercles-et-ellipses/) ou un [rectangle](/articles/les-bases-de-svg-rectangles-et-carres/), vous pouvez essayer le polygone.

En [SVG](/tags/svg/), un polygone est une forme fermée constituée de lignes droites&nbsp;; SVG ne propose pas (encore) d’éléments pour les polygones réguliers (comme _étoile_ ou _hexagone_ par exemple), mais il vous permet de créer n’importe quelle forme en indiquant les points qui la définissent. Des formes constituées de trois ou quatre pointes sont faciles à coder manuellement, mais vous aurez sans doute besoin d’un logiciel de création graphique comme [Adobe Illustrator](http://demosthenes.info/blog/823/SVG-Export-Settings-For-Adobe-Illustrator), Inkscape, Sketch ou Photoshop pour réaliser des designs plus complexes, que vous pourrez [exporter au format SVG](http://webdesign.tutsplus.com/fr/tutorials/understanding-sketchs-export-options--cms-22207). Cependant, il est vraiment utile de comprendre les bases des polygones SVG car cela vous permettra de “bidouiller” et de modifier les formes directement dans le code sans avoir à repasser par l’éditeur graphique.

<h2>Le plus simple des polygones SVG : le triangle</h2>

Commençons par la plus simple des formes, en utilisant trois points pour créer un triangle rectangle&nbsp;:

    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <polygon points="0 0, 100 100, 0 100"/>
    </svg>

Ce qui nous donne :

<figure role="group" class="ds-small-svg"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="0 0, 100 100, 0 100"/></svg></figure>

Quelques petites choses à noter :

- comme [précédemment](/articles/les-bases-de-svg-rectangles-et-carres/), les axes x et y ont leur origine dans le coin supérieur gauche de [la viewBox](/articles/comprendre-svg-viewbox/)&nbsp;: X est l’axe horizontal, la valeur de x augmente lorsque le point se déplace vers la droite, et Y est l’axe vertical, la valeur de y augmente lorsque le point se déplace vers le bas.
- les points constituant le polygone sont définis comme des paires de coordonnées x et y.
- ces coordonnées sont séparées par une virgule.
- il n’y a pas de direction requise dans l’ordre des points&nbsp;: vous pouvez commencer par n’importe quel point et continuer dans la direction que vous voulez. Dans l’exemple qui précède, le point “sommet” du polygone est défini le premier, suivi des deux autres dans le sens des aiguilles d’une montre —&nbsp;on aurait tout aussi bien pu commencer par le point inférieur gauche et continuer ensuite dans le sens inverse des aiguilles d’une montre.
- il est inutile de répéter le premier point à la fin, SVG sait comment fermer le polygone tout seul comme un grand.
- on peut appliquer `stroke`, `fill` et `stroke-width` aux polygones, comme nous l’avions fait pour les cercles, ellipses, rectangles et carrés.

Et si nous voulions créer un triangle équilatéral&nbsp;? il suffit pour cela de repositionner un seul point&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <polygon points="50 15, 100 100, 0 100"/>
    </svg>

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50 15, 100 100, 0 100"/></svg></figure>

<h2>Le problème du remplissage croisé</h2>

Avec trois points reliés par des lignes droites, il est impossible d’avoir des intersections. Mais à partir de quatre points, c’est parfaitement possible&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <polygon points="0 20, 100 20, 100 0, 0 100 "/>
    </svg>

SVG (comme la plupart des logiciels de création graphique) ne voit pas d’inconvénient à retourner ce résultat —&nbsp;qui n’est peut-être pas celui que vous attendiez&nbsp;:

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="0 20, 100 20, 100 0, 0 100 "/></svg></figure>

Selon ce que vous voulez obtenir, il vous faudra peut-être repositionner le troisième point ou en ajouter un cinquième de manière à régler le problème.

<h2>Une petite bibliothèque de polygones réguliers</h2>

Même s’il est probable que vous créerez vos éléments SVG à l’aide d’un outil graphique, il est utile de voir la manière dont est construit le code des polygones réguliers. Vous pouvez bien évidemment copier ce code et l’utiliser dans vos créations, chaque polygone tient à l’intérieur d’une viewBox de 100&nbsp;&times;&nbsp;100.

### Pentagone

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/></svg></figure>

    <polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/>

### Étoile

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/></svg></figure>

    <polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/>

## Hexagone

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/></svg></figure>

    <polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/>

## Octogone

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="hsl(216,80%,50%)"/></svg></figure>

    <polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="hsl(216,80%,50%)"/>

Et voilà ! Maintenant que nous avons passé en revue les formes de base, nous allons revenir aux lignes dans notre prochain article, en nous intéressant plus précisément aux lignes SVG, aux lignes multiples et aux chemins.


Les bases de SVG : Polygones


Après [les cercles](/articles/les-bases-de-svg-cercles-et-ellipses/), les rectangles sont sans doute l’élément le plus facile à réaliser en [SVG](/tags/svg/) puisqu’il suffit d’ajouter un attribut pour y parvenir. La syntaxe de base consiste en une position x, une position y, une largeur et une hauteur&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
      <rect x="20" y="20" width="40" height="40"/>
    </svg>

Quelques petites choses à noter tout de suite&nbsp;:

- contrairement aux cercles, les rectangles sont dessinés à partir de leur coin supérieur gauche (déterminé par les coordonnées x et y).
- comme la plupart des autres éléments, les rectangles sont noirs par défaut si aucun remplissage (_fill_) n’est indiqué.
- l’élément rectangle est “auto-fermant”
- comme tous les autres éléments, les rectangles qui apparaissent _après_ dans le code seront positionnés au dessus des éléments qui les précèdent s’il y a chevauchement.
- malgré l’impression trompeuse que pourrait donner le titre de cet article, il n’existe pas d’élément “carré” distinct du rectangle en SVG. Les carrés sont simplement des rectangles de côtés égaux.

<figure role="group" class="ds-big-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 602 522"><title>Composition in Color A, 1917, by Piet Mondrian</title><g id="Reds" fill="#E12432"><rect x="488.5" y="408" width="58.8" height="59.3"/><rect x="364.2" y="218" width="89.8" height="81.3"/><rect x="584" y="147.3" width="18" height="65.7"/><rect x="191.7" y="87.8" width="59.3" height="62.5"/><rect x="82" y="172.3" width="57.3" height="65"/><rect x="278.3" y="306.6" width="63" height="55.1"/></g><g id="Blues" fill="#026BA6"><rect x="288.3" y="42" width="43.7" height="81.7"/><rect x="404.3" y="127" width="68.3" height="71"/><rect x="531" y="248.3" width="53" height="56"/><rect x="464.3" y="378.7" width="48.3" height="49.7"/><rect x="355" y="395.3" width="58.7" height="52.7"/><rect x="382.7" y="487.3" width="55.3" height="34.7"/><rect x="256" y="435.7" width="52.7" height="49.3"/><rect x="193" y="282.7" width="61.3" height="61.3"/></g><g id="Oranges" fill="#C74C26" ><rect x="162.7" y="203.3" width="55.7" height="59.7"/><rect x="101.3" y="133.3" width="57.3" height="66.3"/><rect x="310.7" y="119.7" width="61" height="61.3"/><rect x="461.7" y="31.3" width="50.7" height="47.7"/><rect x="451" y="100" width="52.3" height="50.3"/><rect x="469.3" y="269.2" width="74.4" height="74.8"/><rect x="594.7" y="333.7" width="7.4" height="50.7"/><rect x="341.3" y="446.7" width="50.7" height="53"/><rect x="341.3" y="306.6" width="52.2" height="55.1"/><rect x="227.3" y="361.7" width="98.7" height="53.7"/><rect x="39.3" y="295.3" width="57.3" height="59.2"/></g><g id="Blacks"><rect x="82" y="93" width="11" height="21"/><rect x="200.7" y="7.7" width="24" height="10.7"/><rect x="274.7" y="82.7" width="24" height="10.3"/><rect x="294" y="133.3" width="11" height="34"/><rect x="294" y="181" width="25.3" height="11.3"/><rect x="255.3" y="192.3" width="11" height="29.3"/><rect x="371.7" y="13" width="21.7" height="10"/><rect x="349.3" y="106" width="20.7" height="10.3"/><rect x="370" y="201" width="21.3" height="10.3"/><rect x="460" y="190.7" width="22" height="9"/><rect x="507.3" y="96" width="10" height="20.3"/><rect x="568.7" y="153.3" width="10" height="23"/><rect x="521.3" y="263.3" width="19.3" height="11.7"/><rect x="387" y="281.3" width="34.7" height="11"/><rect x="358.3" y="275" width="11.7" height="45"/><rect x="274.3" y="299.3" width="23.7" height="10.3"/><rect x="326" y="361.7" width="21.7" height="12.3"/><rect x="454" y="314.3" width="24.3" height="11.3"/><rect x="509.6" y="338.7" width="10.1" height="16"/><rect x="381.3" y="449.3" width="24.3" height="10"/><rect x="331.7" y="485" width="9.7" height="26"/><rect x="287" y="428.3" width="25" height="10.3"/><rect x="220.7" y="349" width="23.7" height="11"/><rect x="124.3" y="323.7" width="23.3" height="12"/><rect x="130" y="190.7" width="16" height="9"/><rect x="87.3" y="354.5" width="18.7" height="10.5"/><rect x="96.7" y="452.7" width="21" height="9.3"/><rect x="187.3" y="446" width="11.3" height="27.7"/><rect x="17.7" y="230.3" width="11.3" height="27.3"/></g></svg><figcaption><a href="https://www.pinterest.fr/pin/91268329932353503/">Composition en couleur A, 1917</a>, de Piet Mondrian, reconstituée en SVG</figcaption></figure>

<h2>Bordures & Coins</h2>

Comme pour toutes les autres formes en SVG, on peut donner une bordure aux éléments `<rect>`, celle-ci étant un trait (_stroke_) dans le langage SVG&nbsp;:

    <rect x="20" y="20" width="40" height="40" stroke="red" stroke-width="5" />

Ce qui nous donne&nbsp;:

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect x="20" y="20" width="40" height="40" stroke="tomato" stroke-width="5" /></svg></figure>

En CSS, on peut utiliser `border-radius` pour arrondir les angles visibles des éléments. Pour les rectangles SVG, on utilise les attributs `rx` et `ry`&nbsp;:

    <rect x="20" y="20" width="40" height="40" stroke="red" stroke-width ="5" rx="5" ry="5" />

Le résultat :

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect x="20" y="20" width="40" height="40" stroke="tomato" stroke-width ="5" rx="5" ry="5" /></svg></figure>

Cependant, contrairement à `border-radius`, `rx` et `ry` affectent simultanément et de manière égale tous les coins de l’élément —&nbsp;pas moyen de n’arrondir qu’un seul angle à la fois. On peut donner des valeurs différentes aux attributs `rx` et `ry` pour créer des effets spéciaux, par exemple pour donner une forme de de tonneau&nbsp;:

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect x="20" y="20" width="40" height="40" stroke="tomato" stroke-width ="5" rx="5" ry="15" /></svg></figure>

…mais la plupart du temps on donnera la même valeur aux deux attributs, et dans ce cas il existe un raccourci, il suffit d’indiquer uniquement `rx`&nbsp;:

    <rect x="20" y="20" width="40" height="40" rx="5" />

Note : `rx` et `ry` sont considérés comme des attributs _réguliers_, et non comme des attributs _de présentation_, par conséquent on ne peut pas les utiliser actuellement en CSS, pas plus d’ailleurs qu’on ne peut utiliser `border-radius` sur les éléments SVG (mais on peut l’utiliser sur l’élément SVG lui-même, comme on peut le voir sur le Mondrian ci-dessus).

<h2>Le plus grand rectangle : styler le viewport</h2>

Dans la plupart des éditeurs, le background d’un SVG apparaît blanc. En fait ce n’est pas le cas&nbsp;: il est transparent, son canal alpha est masqué, ce qui signifie que son rendu sera parfait lorsqu’on le placera comme image ou élément en ligne sur n’importe quel background de page HTML.

La première solution qui vient à l’esprit lorsqu’on a besoin d’un “canevas” de couleur différente dans un SVG est de dessiner un énorme rectangle qui couvre tout le viewport SVG. Mais en général c’est plutôt une mauvaise idée&nbsp;: non seulement cela ajoute un élément supplémentaire à la page, mais en plus cela complique le rendu de la page. À la place, il suffit d’appliquer un style à l’élément SVG lui-même, comme sur notre reproduction de Mondrian.

    svg { background: #fcedd6; }

Il est même possible de placer un `border-radius` sur l’élément SVG, comme je l’ai fait dans [l’exemple de bouclier de Captain America](http://codepen.io/dudleystorey/pen/ZGOKLJ), créé pour l’article sur les cercles. C’est pratique si, par exemple, vous voulez donner une impression d’ombre portée sur le SVG entier.

Retrouvez [le code du tableau de Mondrian sur CodePen](http://codepen.io/dudleystorey/pen/MwbYaL)&nbsp;!

_La recréation de l'oeuvre de [Piet Mondrian](http://fr.wikipedia.org/wiki/Piet_Mondrian) est en partie inspirée du travail de [Jenn Schiffer](http://jennmoney.biz/), qui a écrit une excellente série d'articles sur [la recréation d'oeuvres d'art au moyen des technologies du web](http://vart.institute/)_.


Les bases de SVG : Rectangles et Carrés


Pourquoi utiliser les dégradés SVG plutôt que les dégradés CSS, c'est une longue discussion, mais dans cet article nous nous allons simplement nous concentrer sur l'utilisation pratique des dégradés SVG, si vous choisissez cette solution. (👉🏾 _NdT&nbsp;: si vous voulez plus d'information sur les dégradés CSS, vous pouvez consulter [cet article](/articles/les-degrades-css/).)_.

Les dégradés [SVG](/tags/svg/) permettent de remplir quasiment sans effort une forme complexe, et par rapport aux dégradés CSS ils présentent l'avantage d'être présents dans le DOM. Cette approche est pratique en particulier quand un dégradé est une partie permanente de votre design. Nos styles CSS peuvent évoluer au fil du temps, mais le coeur de notre création artistique restera souvent inchangé, et du coup il est préférable que cette création réside dans le SVG lui-même, dans le DOM.

De plus, si vous décidez plus tard d'animer votre dégradé, vous pouvez ajouter cette animation directement dans l'élément SVG.

## Les bases

SVG propose deux types de dégradés, linéaire et radial. Les détails [sont définis](https://developer.mozilla.org/fr/docs/Web/SVG/Element/defs) à l'intérieur d'un élément `<defs>`. L'élément `<defs>` contient des instructions qui peuvent être réutilisées tout au long du document, mais qui ne donneront pas lieu à affichage tant qu'il n'est pas appelé. Le fait de définir les éléments du dégradé à l'intérieur d'un élément `<defs>` nous permet de mieux comprendre le contenu du SVG et offre une meilleure accessibilité.

SVG utilise la notion générale de _paint server_ (&ldquo;serveur de peinture&rdquo;) qui est une méthode permettant au remplissage (_fill_) et au traçé (_stroke_) d'un objet d'être défini par une ressource disponible ailleurs. Les dégradés sont une des nombreuses options _paint_ que l'on peut appeler pour remplir le background et les bordures de formes et de textes.

Pour illustrer cette notion, voici à quoi ressemblera la structure d'un dégradé linéaire simple&nbsp;:

    <svg>
        <defs>
            <linearGradient id="gradientName">
                <stop offset="<%>" stop-color="<color>" />
                <stop offset="<%>" stop-color="<color>" />
            </linearGradient>
        </defs>
    </svg>

Une fois que vous avez donné un ID à votre dégradé (dans notre exemple&nbsp;: `gradientName`&nbsp;), il peut être appelé à travers les attributs _fill_ et/ou _stroke_ dans le SVG qui l'utilisera, par exemple en écrivant `fill= "url(#gradientName)"`.

## Les Dégradés linéaires

Les dégradés linéaires passent d'une couleur à une autre de façon régulière le long d'une ligne. Le dégradé est défini par un axe et éventuellement par un angle.

Chaque _stop_ défini sur cette ligne représentera la couleur à l'intérieur de l'élément `<linearGradient>`. À chaque _stop_ la couleur est à 100% de saturation et l'espace entre deux stops est le lieu où s'effectue la transition d'une couleur à la suivante. Il est possible d'utiliser des couleurs supplémentaires, comme nous le verrons tout à l'heure.

Regardons à quoi ressemble le code SVG pour un dégradé linéaire simple, comportant deux stops couleur, puis nous passerons en revue les options d'attributs disponibles.

<figure><img itemprop="image" src="/images/simplegradient.webp" alt="un dégradé simple, de bleu à rouge" /></figure>

    <svg>
        <defs>
            <linearGradient id="Gradient-1"
                 x1="0" y1="0" x2="100%" y2="0">
                <stop offset="0%" stop-color="lightblue" />
                <stop offset="100%" stop-color="#ef5b2b" />
            </linearGradient>
        </defs>
        <rect x="450" y="10" width="200" height="100" fill= "url(#Gradient-1)" stroke="#333333" stroke-width="4px" />
    </svg>

### Attributs des dégradés linéaires

Comme nous l'avons vu, les détails du dégradé sont définis à l'intérieur d'un élément `<linearGradient>`. À l'intérieur de celui-ci, nous pouvons utiliser tout un tas d'attributs pour le personnaliser.

#### ID

Les dégradés doivent avoir un ID unique de façon à pouvoir être appliqués à nos formes ou textes SVG.

#### x1, y1, x2, y2

Les valeurs d'attributs x1, y1, x2 et y2 représentent les points de départ et d'arrivée qui définissent les stops (les changements de couleurs). Ces pourcentages s'appliquent sur l'axe choisi. S'ils ne sont pas spécifiés, toutes les valeurs seront égales à 0 par défaut, sauf x2 qui prendra la valeur 100% par défaut.

Ce sont aussi ces valeurs qui définiront si notre axe est horizontal ou vertical, ou quelque part entre les deux. Par exemple une valeur y de 100% et une valeur x de 0 produiront un axe horizontal, et l'inverse donnera un axe vertical. Si les deux ont une valeur de 100% (ou n'importe quelle valeur différente de 0), l'axe sera oblique.

#### gradientUnits

L'attribut gradientUnits définit le système de coordonnées pour les valeurs x1, x2, y1 et y2. Les deux options possibles sont "userSpaceOnUse" ou "objectBoundingBox". `userSpaceOnUse` définit le système de coordonnées en unités absolues, alors que `objectBoundingBox` établit ce système à l'intérieur des limites de la forme SVG elle-même. Par défaut, la valeur de l'attribut est `objectBoundingBox`.

#### spreadMethod

La valeur de l'attribut `spreadMethod` spécifie la façon dont le dégradé va se répandre à travers la forme, s'il commence ou se termine à l'intérieur des limites du SVG. En gros, si le dégradé est défini d'une façon telle qu'il ne remplit pas toute la forme, qu'advient-il de l'espace vide&nbsp;? Il y a trois options ici&nbsp;: `pad`, `repeat` ou `reflect`.

Une valeur de `pad` indique que la première et la dernière couleur du dégradé doivent couvrir le reste de la forme (voir l'exemple ci-dessous). Une valeur `repeat` indique que le dégradé doit répéter le motif depuis le début jusqu'à couvrir toute la surface. L'utilisation de `reflect` aura pour résultat de faire se refléter de manière continue le motif de dégradé, du début à la fin et de la fin au début, jusqu'à couvrir toute la forme (voir l'exemple ci-dessous).

Sans autre indication, la valeur par défaut est `pad`.

<figure><img src="/images/svggradient2-compressor.png" alt="les trois effets spreadmethod"/></figure>

L'image ci-dessus montre comment les différentes valeurs de `spreadMethod` impactent visuellement _le même dégradé_. Il est important de se rappeler que ces valeurs d'attribut n'auraient aucun effet sur un dégradé remplissant déjà l'intégralité de la forme.

Les points de départ et d'arrivée du dégradé ci-dessus sont (voir le code complet plus bas)&nbsp;:

    x1="20%" y1="30%" x2="40%" y2="80%"

#### gradientTransform

L'attribut `gradientTransform` est optionnel, il nous permet de transformer plus encore le dégradé avant de l'appliquer, comme avec CSS Transforms.

#### xlink:href

Avec cet attribut, vous pouvez appeler l'ID d'un autre dégradé, duquel le dégradé en cours devrait "hériter". Dans les images ci-dessus, il y a trois rectangles. Ces rectangles appellent tous les mêmes stops couleurs mais ils appellent également des valeurs `spreadMethod` qui résident dans un ID spécial à l'intérieur d'élément `<linearGradient>` additionnels.

Voici le code pour ces éléments&nbsp;:

    <defs>
        <linearGradient id="Gradient-1"
        x1="20%" y1="30%" x2="40%" y2="80%">
            <stop offset="0%" stop-color= "#1cb98f" />
            <stop offset="50%" stop-color= "#f99450" />
            <stop offset="100%" stop-color= "#876fc3" />
        </linearGradient>

        <linearGradient id="pad"
                        xlink:href="#Gradient-1"
                        spreadMethod="pad" />

        <linearGradient id="repeat"
                        xlink:href="#Gradient-1"
                        spreadMethod="repeat" />

        <linearGradient id="reflect"
                        xlink:href="#Gradient-1"
                        spreadMethod="reflect" />
    </defs>

Chaque rectangle appelle un ID spécifique décrivant une `spreadMethod` différente à chaque fois, mais ils héritent tous des stops couleur définis dans "#Gradient-1".

Voici comment ces dégradés sont appelés à l'intérieur de trois rectangles&nbsp;:

    <rect x="10" y="10"
          width="200" height="100"
          fill= "url(#pad)"
          stroke="#333333"
          stroke-width="4px" />

    <rect x="230" y="10"
          width="200" height="100"
          fill= "url(#repeat)"
          stroke="#333333"
          stroke-width="4px" />

    <rect x="450" y="10"
          width="200" height="100"
          fill= "url(#reflect)"
          stroke="#333333"
          stroke-width="4px" />

👉🏿 NdT : [SVG 2](https://www.w3.org/TR/SVG2/) a supprimé le besoin de l'espace de nom `xlink`, donc au lieu de xlink:href vous devriez utiliser `href`. Si vous devez prendre en charge des versions antérieures du navigateur, l'attribut xlink:href déprécié peut être utilisé comme solution de repli en plus de l'attribut href, e.g. <use href="some-id" xlink:href="some-id" x="5" y="5" />.

### Les stops

Maintenant que nous comprenons les bases des attributs de `<linearGradient>`, nous pouvons passer aux attributs de `<stop>` que nous avons aperçus dans l'exemple de code précédent.

Comme on l'a vu, les stops couleur sont définis à l'intérieur de l'élément `<linearGradient>`. Quelle couleur voulons-nous voir à un certain endroit&nbsp;? Nous disposons de trois attributs ici&nbsp;: _offset_, _stop-color_ et _stop-opacity_. L'_offset_ indique à quel endroit fixer le stop couleur. Le _stop-color_ définit la couleur. Vous pouvez également inclure une valeur _stop-opacity_ qui appliquerait une opacité sur la couleur située au point stop.

    <defs>
        <linearGradient id="Gradient-2">
            <stop offset="0%"
                  stop-color="purple"
                  stop-opacity=".3" />
            <stop offset="100%"
                  stop-color="blue"
                  stop-opacity=".5" />
        </linearGradient>
    </defs>

Le dégradé est maintenant complété et peut être appelé sur les attributs _fill_ ou _stroke_ dans l'élément SVG, à partir de son ID, par exemple en faisant `fill= "url(#Gradient-2)"`.

### Autres exemples de dégradés linéaires

Voici quelques démos qui mettent en action toutes ces notions.

Pour la démo sur le texte &ldquo;Apple&rdquo; il y a un élément `<text>` à l'intérieur de notre élément `<svg>`. Les définitions de dégradés sont situées dans un élément `<defs>` qui se trouve aussi à l'intérieur de `<svg>` (cliquez sur HTML, CSS et Result pour voir les détails).

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_nCeiJ" src="//codepen.io/SitePoint/embed/nCeiJ?height=500&amp;theme-id=light&amp;slug-hash=nCeiJ&amp;user=SitePoint&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/SitePoint/pen/nCeiJ/">
  SVG Linear Gradient Example</a> by SitePoint <a href="https://codepen.io">CodePen</a></span>
</div>

Pour avoir une autre perspective, regardons ces quelques icônes dans la démo qui suit. Chaque fruit SVG a sa propre définition de `<linearGradient>`. Les remplissages et les traits peuvent être constitués des mêmes dégradés ou de dégradés différents, ou peuvent être une couleur solide...

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_Kmhpd" src="//codepen.io/SitePoint/embed/Kmhpd?height=400&amp;theme-id=light&amp;slug-hash=Kmhpd&amp;user=SitePoint&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/SitePoint/pen/Kmhpd/">
  SVG Linear Gradient Icons</a> by SitePoint <a href="https://codepen.io">CodePen</a></span>
</div>

## Les dégradés radiaux

Les dégradés radiaux sont à la fois très similaires et très différents des dégradés linéaires. Le dégradé, au lieu de se propager sur une ligne suit une expansion concentrique. Les stops commencent au centre du cercle et suivent le mouvement d'expansion.

### Attributs des dégradés radiaux

La plupart des attributs sont les mêmes que ceux que nous avons vus, sauf le système de coordonnées qui est différent.

#### cx, cy, r

Les attributs cx, cy, r définissent le plus grand cercle (c'est à dire le plus externe) pour le dégradé radial. Le dégradé sera dessiné de telle façon que la limite de dégradé de 100% corresponde au périmètre de ce plus grand cercle. Si non spécifiées, les valeurs sont par défaut 50%. cx et cy sont les coordonnées du centre, r représente le rayon, en d'autres termes la longueur du dégradé. Une valeur r égale à 0 donnera une couleur unique jusqu'au dernier stop couleur.

#### fx, fy

Ces attributs représentent les coordonnées du foyer du dégradé, le cercle situé le plus à l'intérieur. Le dégradé sera dessiné de telle manière que la limite de dégradé de 0% corresponde au point (fx,fy).
Si l'attribut fx n'est pas spécifié, la valeur de fx coïncidera avec celle de cx.

La démo ci-dessous montre un dégradé radial à l'intérieur d'un texte SVG. Ce premier exemple a un foyer de `fx= "45%" fy= "45%"`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ECbAa" src="//codepen.io/SitePoint/embed/ECbAa?height=500&amp;theme-id=light&amp;slug-hash=ECbAa&amp;user=SitePoint&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/SitePoint/pen/ECbAa/">
  SVG Radial Gradient example</a> de SitePoint dans <a href="https://codepen.io">CodePen</a></span>
</div>

L'exemple suivant a un foyer de `fx="90%" fy="70%"`&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_yeLnJ" src="//codepen.io/SitePoint/embed/yeLnJ?height=500&amp;theme-id=light&amp;slug-hash=yeLnJ&amp;user=SitePoint&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/SitePoint/pen/yeLnJ/">
  SVG Radial Gradient with different focal point</a> de SitePoint dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le foyer (un bleu-vert) s'est déplacé vers la droite. Pour rééquilibrer la répartition des stops, nous pourrions changer les valeurs de cx et cy.

### Exemple de dégradé radial

Voici à nouveau les icônes repésentant des fruits, cette fois-ci avec des dégradés radiaux.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_KDdlo" src="//codepen.io/SitePoint/embed/KDdlo?height=400&amp;theme-id=light&amp;slug-hash=KDdlo&amp;user=SitePoint&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/SitePoint/pen/KDdlo/">
  Icons with Various SVG Radial Gradients</a> de SitePoint dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Compatibilité navigateurs

La compatibilité navigateurs de SVG est excellente, aussi bien pour les ordinateurs de bureau que pour les appareils mobiles.

Toutefois, Firefox et Safari semblent avoir des problèmes avec `spreadMethod` qui n'est pas réglée par défaut sur la valeur `pad`. Pour éviter cela, il suffit de faire en sorte que votre dégradé remplisse entièrement la forme, sauf évidemment si votre intention est d'avoir un remplissage partiel.

---

<h3>Ressources complémentaires en anglais</h3>

- [Gradients and patterns SVG 1.1](http://www.w3.org/TR/SVG/pservers.html), 2e édition de la spécification.
- [linearGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient), par Mozilla
- [radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient), par Mozilla

<h3>Ressources complémentaires en français</h3>

- [Les dégradés et les motifs SVG 1.0](http://www.yoyodesign.org/doc/w3c/svg1/pservers.html), par yoyodesign, la spécification complète (et assez claire et concise pour une fois)
- [Les dégradés de couleur](http://svground.fr/degrades.php), par SVGround, la bible du SVG


Les dégradés SVG


Juste pour le plaisir (et de manière fortuite pour le [week end des tuiles rétro sur CodePen](http://codepen.io/collection/Dmrpwb/)), j'ai réalisé deux nouveaux backgrounds SVG dérivés des motifs géométriques traditionnels japonais.

<h2>Seigaiha</h2>

La traduction littérale de [seigaiha](https://www.jhinparis.com/tissusjaponaisgeometriques/k2ke5csnq9c1nwyxd48xr7gl24c3a2) est “mer bleue et vagues”. À l'origine, ce motif était utilisé dans les cartes chinoises pour représenter l'océan. Importé au Japon un peu avant le 6e siècle de notre ère, il apparaît sur des figurines funéraires [haniwa](https://fr.wikipedia.org/wiki/Haniwa). Il existe de nombreuses variantes du motif qui sont utilisées partout&nbsp;: impressions géométriques, incrustations, ou dessiné au rateau dans les jardins japonais.

<h3>Le SVG</h3>

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
      <defs>
        <pattern id="waves" patternUnits="userSpaceOnUse" width="230.4" height="221.7" patternTransform="scale(.5)">
        <defs>
          <g id="wave" stroke="#000080" fill="none">
            <circle fill="#FFF" stroke-width="8" r="106.7" />
            <circle stroke-width="9" r="81" />
            <circle stroke-width="8" r="55.3" />
            <circle stroke-width="7" r="32.5" />
            <circle stroke-width="7" r="13.2" />
          </g>
        </defs>
        <use x="229.9" y="0.7" xlink:href="#wave" />
        <use x="114.9" y="55.3" xlink:href="#wave" />
        <use x="-114.9" y="55.3" xlink:href="#wave" />
        <use x="0" y="111.3" xlink:href="#wave" />
        <use x="229.9" y="111.3" xlink:href="#wave" />
        <use x="114.9" y="166.4" xlink:href="#wave" />
        <use x="-114.9" y="166.4" xlink:href="#wave" />
        <use x="0" y="222.2" xlink:href="#wave" />
        <use x="345.1" y="166.4" xlink:href="#wave" />
        <use x="229.9" y="222.2" xlink:href="#wave" />
        <use x="114.9" y="277.2" xlink:href="#wave" />
        <use x="-114.9" y="277.2" xlink:href="#wave" />
        <use x="345.1" y="277.2" xlink:href="#wave" />
        </pattern>
      </defs>
     <rect width="100%" height="100%" fill="url(#waves)" />
    </svg>

<div style="margin-bottom: 2em;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><defs><pattern id="waves" patternUnits="userSpaceOnUse" width="230.4" height="221.7" patternTransform="scale( .5)"><defs><g id="wave" stroke="#000080" fill="none"><circle fill="#FFF" stroke-width="8" r="106.7" /><circle stroke-width="9" r="81" /><circle stroke-width="8" r="55.3" /><circle stroke-width="7" r="32.5" /><circle stroke-width="7" r="13.2" /></g></defs><use x="229.9" y="0.7" xlink:href="#wave" /><use x="114.9" y="55.3" xlink:href="#wave" /><use x="-114.9" y="55.3" xlink:href="#wave" /><use x="0" y="111.3" xlink:href="#wave" /><use x="229.9" y="111.3" xlink:href="#wave" /><use x="114.9" y="166.4" xlink:href="#wave" /><use x="-114.9" y="166.4" xlink:href="#wave" /><use x="0" y="222.2" xlink:href="#wave" /><use x="345.1" y="166.4" xlink:href="#wave" /><use x="229.9" y="222.2" xlink:href="#wave" /><use x="114.9" y="277.2" xlink:href="#wave" /><use x="-114.9" y="277.2" xlink:href="#wave" /><use x="345.1" y="277.2" xlink:href="#wave" /></pattern></defs><rect width="100%" height="100%" fill="url(#waves)" /></svg></div>

Le balisage utilise pour l'essentiel la même idée que mon [design de lignes SVG](/articles/diagonales-et-motifs-svg-en-background/), mais il va un peu plus loin&nbsp;: dans ce cas, j'utilise `defs` à l'intérieur de `defs` pour créer le motif initial. Ce qu'il faut retenir&nbsp;:

1. Le `fill` et le `stroke` par défaut des [cercles](/articles/les-bases-de-svg-cercles-et-ellipses/) ont été déplacés dans un élément groupe pour l'efficacité.
2. Les `cx` et `cy` des cercles n'ont pas besoin d'être définis car le motif lui-même n'est jamais rendu directement&nbsp;; les cercles sont supposés être centrés sur `0,0`.
3. Le plus grand cercle extérieur du motif a un background blanc, qui sert à le remplir et à créer un effet de recouvrement.
4. Le `use` du motif du cercle est disposé en couches allant du dessus vers le dessous à l'intérieur de la surface définie par les `width` et `height` du motif.
5. L'échelle du motif, et donc le nombre de fois qu'il se répète sur la page, est contrôlée par la valeur `scale` de `patternTransform`.

<h2>Asanoha</h2>

Un dessin géométrique régulier tracé à partir d'un motif de feuilles de chanvre qui se recouvrent. Il est utilisé pour les kimono de tous les jours et (traditionnellement) pour les langes des bébés. On le comprend plus aisément si on le voit comme un motif d'étoile à 6 pointes, chacune étant reliée au centre de l'étoile adjacente.

<figure role="group"><img src="/images/asanoha-visualisation-compressor.jpeg" alt=""/><figcaption>Visualisation du motif asanoha comme des étoiles à 6 pointes qui se recouvrent les unes les autres.</figcaption></figure>

<h3>Le SVG</h3>

Le motif de cet exemple consiste en un simple [polygone](/articles/les-bases-de-svg-polygones/) couplé à des [lignes et polylignes](/articles/les-bases-de-svg-lignes-simples-et-multiples/)&nbsp;:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <defs>
      <pattern id="ashano" patternUnits="userSpaceOnUse" width="119" height="103" patternTransform="scale(1)">
      <g stroke="#231F20" fill="none">
        <polygon points="89.3,0 89.3,34.4 119,51.6 89.3,68.7 89.3,103.1 59.5,85.9 29.8,103.1 29.8,68.7 0,51.5 29.8,34.4 29.8,0 59.5,17.2"/>
        <line x1="59.5" y1="17.2" x2="59.5" y2="85.9"/>
        <line x1="29.8" y1="103.1" x2="89.3" y2="0"/>
        <line x1="29.8" y1="0" x2="89.3" y2="103.1"/>
        <line x1="0" y1="51.5" x2="119" y2="51.5"/>
        <line x1="29.8" y1="68.7" x2="89.3" y2="34.4"/>
        <line x1="89.3" y1="68.7" x2="29.8" y2="34.4"/>
        <line x1="29.8" y1="0" x2="89.3" y2="0"/>
        <line x1="89.3" y1="0" x2="119" y2="51.6"/>
        <line x1="119" y1="51.6" x2="89.3" y2="103.1"/>
        <line x1="89.3" y1="103.1" x2="29.8" y2="103.1"/>
        <polyline points="89.3,103.1 119,85.9 119,51.5"/>
        <line x1="89.3" y1="103.1" x2="119" y2="103.1"/>
        <polyline points="119,51.5 119,17.2 89.3,0"/>
        <line x1="89.3" y1="0" x2="119" y2="0"/>
        <line x1="119" y1="51.5" x2="89.3" y2="0"/>
        <polyline points="29.8,0.1 0,17.2 0,51.6"/>
        <line x1="0" y1="0" x2="29.8" y2="0.1"/>
        <line x1="29.8" y1="0.1" x2="0" y2="51.6"/>
        <polyline points="0.1,51.5 0.1,85.9 29.8,103.1"/>
        <line x1="0" y1="103" x2="29.8" y2="103.1"/>
        <line x1="0.1" y1="51.5" x2="29.8" y2="103.1"/>
      </g>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#ashano)" />
    </svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><defs><pattern id="ashano" patternUnits="userSpaceOnUse" width="119" height="103" patternTransform="scale(1)"><g stroke="#231F20" fill="none"><polygon points="89.3,0 89.3,34.4 119,51.6 89.3,68.7 89.3,103.1 59.5,85.9 29.8,103.1 29.8,68.7 0,51.5 29.8,34.4 29.8,0 59.5,17.2"/><line x1="59.5" y1="17.2" x2="59.5" y2="85.9"/><line x1="29.8" y1="103.1" x2="89.3" y2="0"/><line x1="29.8" y1="0" x2="89.3" y2="103.1"/><line x1="0" y1="51.5" x2="119" y2="51.5"/><line x1="29.8" y1="68.7" x2="89.3" y2="34.4"/><line x1="89.3" y1="68.7" x2="29.8" y2="34.4"/><line x1="29.8" y1="0" x2="89.3" y2="0"/><line x1="89.3" y1="0" x2="119" y2="51.6"/><line x1="119" y1="51.6" x2="89.3" y2="103.1"/><line x1="89.3" y1="103.1" x2="29.8" y2="103.1"/><polyline points="89.3,103.1 119,85.9 119,51.5"/><line x1="89.3" y1="103.1" x2="119" y2="103.1"/><polyline points="119,51.5 119,17.2 89.3,0"/><line x1="89.3" y1="0" x2="119" y2="0"/><line x1="119" y1="51.5" x2="89.3" y2="0"/><polyline points="29.8,0.1 0,17.2 0,51.6"/><line x1="0" y1="0" x2="29.8" y2="0.1"/><line x1="29.8" y1="0.1" x2="0" y2="51.6"/><polyline points="0.1,51.5 0.1,85.9 29.8,103.1"/><line x1="0" y1="103" x2="29.8" y2="103.1"/><line x1="0.1" y1="51.5" x2="29.8" y2="103.1"/></g></pattern></defs><rect width="100%" height="100%" fill="url(#ashano)" /></svg>

Dans de prochains articles j'espère passer plus de temps à recréer des motifs japonais et arabes en SVG.


Motifs SVG japonais


Le SVG en ligne peut faire des miracles pour le design responsif tout en réduisant le temps de chargement des pages web et en produisant des icônes propres et à la netteté parfaite —&nbsp;mais il n’est pas sans poser quelques problèmes, parmi lesquels l’accessibilité. L’accessibilité n’était pas une priorité lorsque la spécification originale SVG 1.0 a été publiée il y a 15 ans. Cependant, SVG 1.1 a amélioré les choses et SVG 2.0 devrait à l’avenir mettre l’accessibilité au premier plan.

Pour l’instant, rendre les SVG accessibles demande un peu de travail, mais c’est un processus assez simple si vous suivez ces cinq règles&nbsp;:

<h2>1 - Traitez les liens vers une image SVG comme les bitmaps</h2>

Lorsque vous faites un lien vers un document SVG comme image, l’attribut `alt` est requis&nbsp;:

    //HTML
    <img src="coca-cola-logo.svg" alt="Coca-Cola">

...comme pour n’importe quelle [image matricielle](http://thenewcode.com/64/Bitmap-Images-for-the-Web-Formats-and-Optimisation-Options)</span></span>
(_bitmap_).

<h2>2 - Pour SVG en ligne, donnez un titre</h2>

Le `<title>` d’un élément SVG sert le même objectif que le `<title>` d’un document HTML&nbsp;: C’est une brève description du document, ou un conseil. On peut le voir comme le `<alt>` d’un SVG inline.

    //HTML
    <header>
      <svg>
        <title>Coca-Cola</title>
        <polyline ... />
       </svg>
    </header>

`<title>` peut également être utilisé pour les éléments individuels&nbsp;: plus spécifiquement `<circle>`, `<ellipse>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>` et `<use>`, ainsi que les éléments container SVG tels que `<a>`, `<defs>`, `<g>` et `<symbol>`. `<title>` sera généralement le premier enfant de cet élément. Parfois, ce titre sera _visuellement_ descriptif&nbsp;:

    <title>Yellow Five-Pointed Star</title>
    <polygon fill="#ff0" points="509,19.6 534.7,71.7 592.1,80 550.5,120.5 560.4,177.7 509,150.7 457.6,177.7 467.5,120.5 425.9,80 483.3,71.7 "/>

...et parfois il sera _informationnel_ (c’est à dire qu’il décrit la _finalité_ d’un élément, ou son _sens_).

**Note** : on remarquera que les éléments `<text>` de SVG inline sont dans la plupart des cas complètement accessibles, puisqu’ils contiennent du texte —&nbsp;quels que soient les effets graphiques qui leur sont appliqués&nbsp;— ils n’auront donc pas besoin de `<title>` dans ce cas. Toutefois, si transformez votre texte en pures formes vectorielles, il vous _faudra_ fournir un `<title>`.

Comme pour les pages HTML, le texte situé à l’intérieur d’un élément SVG est lu par les outils d’accessibilité dans l’_ordre du document_, et non dans l’ordre de leur _position visuelle à l’écran_.

Si un SVG ne contient qu’un seul élément, un simple `<title>` après la balise ouvrante `<svg>` pourra s’avérer suffisant. Si le document contient plusieurs éléments, vous aurez probablement besoin d’un `<title>` pour chacun ou pour chaque groupe&nbsp;:

    <svg>
      <g>
        <title>Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
      </g>
    </svg>

Vous pouvez améliorer cette information en associant `<title>` à `aria-labelledby`. Dans le cas d’un élément simple, cela peut renvoyer à l’élément racine `<svg>`&nbsp;:

    <svg aria-labelledby="title">
      <g>
        <title id="title" lang="en">Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
      </g>
    </svg>

Tout comme `<desc>` et d’autres éléments HTML, `<title>` devrait également avoir [un attribut `lang` indiquant la langue utilisée](http://thenewcode.com/474/Language-Support-In-HTML) (voir plus bas).

**Note** : il est possible de naviguer vers les éléments SVG utilisés dans les balises `<img>` comme s’ils étaient des éléments autonomes, ils peuvent également être indexés par les moteurs de recherche en tant de documents séparés, et de ce fait ils devraient aussi contenir un `<title>` et une `<desc>` appropriés _dans le balisage du document SVG original_.

<h2>3 - Donnez une description lorsque nécessaire</h2>

`<desc>` correspond à une description plus longue de votre élément SVG, spécifiant son intention. On peut le voir un peu comme l’équivalent SVG de `figcaption`.

    <svg>
      <g>
        <title>International sales by country</title>
        <title lang="fr">Les ventes internationales par pays</title>
        <desc>Bar chart showing company sales by country, in millions of dollars (US).</desc>
        <desc lang="fr">Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).</desc>
      <g>
        <text x="20" y="70">US Sales</text>
        <title id="USamount">30 million</title>
        <rect x="0" y="0" width="100" height="50" fill="red" aria-labelledby="USamount" />
      </g>
      <g>
        <text x="20" y="70">French Sales</text>
        <title id="FRamount">50 million</title>
        <rect x="150" y="20" width="100" height="80" fill="red" aria-labelledby="FRamount" />
      </g>
      </g>
    </svg>

<svg width="320" height="150"><g><title>International sales by country</title><title lang="fr">Les ventes internationales par pays</title><desc>Bar chart showing company sales by country, in millions of dollars (US).</desc><desc lang="fr">Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).</desc><g><text x="0" y="120">Ventes US</text><title id="USamount">30 million</title><rect x="0" y="50" width="100" height="50" fill="green" aria-labelledby="USamount"></rect></g><g><text x="140" y="120">Ventes France</text><title id="FRamount">50 million</title><rect x="150" y="20" width="100" height="80" fill="red" aria-labelledby="FRamount"></rect></g></g></svg>

Cet exemple suppose que vous fournirez également les axes graphiques et les informations chiffrées pour les utilisateurs n’ayant _pas_ de problèmes d’accessibilité&nbsp;: quand c’est possible, exposer l’information sous forme de `<text>` rendra service à _tous_.

<h2>4 - Vous n’avez rien à faire si le SVG est purement décoratif</h2>

Si l’élément SVG est utilisé à des fins purement décoratives —&nbsp;un dégradé ou un motif de background par exemple&nbsp;— pas besoin de fournir `<title>`, `<desc>` ni `alt`. (Si vous voulez que votre page soit [validée](http://thenewcode.com/454/Climbing-Mount-Sinai-The-Importance-of-Web-Page-Validation) par les outils de validation, vous devrez mettre un `alt` pour les SVG liés, mais vide pour les éléments décoratifs, c’est à dire `alt=""` ou simplement `alt`).

Par défaut, ni `<desc>` ni `<title>` ne sont rendus visuellement dans le navigateur (bien qu’on puisse leur appliquer un style pour qu’ils le soient)&nbsp;; le texte de `<title>` apparaîtra au survol dans les navigateurs compatibles.
(<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : vous pouvez faire l’essai avec le diagramme ci-dessus_).

<h2>5 - Ne comptez pas sur votre WYSIWYG pour le faire à votre place</h2>

Malheureusement, Adobe Illustrator ne supporte que très peu l’accessibilité SVG. Il exporte les noms de calques comme des valeurs d’ `id` plutôt que comme une information `<title>`. Inkscape fait mieux en vous permettant d’ajouter et d’éditer `<title>` et `<desc>` pour chaque élément, avec l’inconvénient d’ajouter du code redondant à votre markup. Vous en viendrez sans doute à la conclusion qu’il est préférable d’ajouter un peu de code à la main pour ajouter une pleine accessibilité à un document SVG réalisé avec les outils vectoriels.



Pour un format d’image infiniment redimensionnable, SVG peut être étonnament difficile à rendre responsif&nbsp;: les images vectorielles ne s’ajustent pas par défaut à la taille du viewport.

## Une image SVG responsive

**En tant qu’image**, votre SVG peut se redimensionner avec le contenu de la page, comme tous les autres&nbsp;:

    <img src="monkey.svg" alt="Monkey face" style="width: 100%; height: auto;">

Ça fonctionne dans la plupart des cas, mais parfois ce n’est pas suffisant, surtout si vous embarquez votre SVG via une balise `<object>` ou en insérant le code directement dans la page. Dans ce cas, la simple modification de `width` et `height` ne suffit pas.

## Un SVG en ligne responsif

Le code SVG embarqué, une fois collé dans le `<body>` d’un document HTML, ressemblera à ceci&nbsp;:

    <body>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
    </svg>
    </body>

Une fois l’élément racine `<svg>` nettoyé, le code est beaucoup plus présentable&nbsp;:

    <svg version="1.1" viewBox="0 0 500 500">
    <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
    </svg>

La suppression des attributs redondants de l’élément `<svg>` rend l’illustration responsive, mais il y a un coût&nbsp;: cela ajoute un espace au-dessus et en-dessous de l’image vectorielle. On pourrait supposer que le coupable est l’attribut `viewport`, qui est toujours présent, mais ce n’est pas le cas, laissons-le tranquille. Il nous reste trois étapes pour intégrer l’élément SVG responsif dans notre page&nbsp;:

Tout d’abord, entourons le code SVG avec une `<div>` et ajoutons un attribut `preserveAspectRatio`, ainsi qu’une classe à l’élément racine `svg`&nbsp;:

    <div class="svg-container">
    <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
    <circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" />
    </svg>
    </div>

Cela déplace l’illustration SVG en haut de son conteneur. Pour terminer la présentation, nous utilisons une variante de la vieille astuce de l’élément-[absolument-positionné](/articles/le-positionnement-css/)-dans-un-conteneur-relatif avec un padding décalé&nbsp;:

    .svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
    }

<figure class="svg-container" role="group">
<svg version="1.1" preserveAspectRatio="xMinYMin meet" viewbox="0 0 800 800" class="svg-content">
<path style="fill:#000000" d="M 507.79551,705.24881 C 446.18368,674.46103 384.50792,593.63642 374.65925,530.77703 C 371.74236,512.15979 373.09945,507.01943 383.48615,497.34273 C 393.86016,487.67788 402.25426,485.90802 437.71886,485.90802 C 487.81111,485.90802 514.93565,495.41753 519.76855,514.67362 C 525.02633,535.62206 518.43042,541.15048 493.35174,536.81543 C 481.22872,534.71987 464.08813,532.63935 455.26154,532.19197 C 446.43489,531.74465 437.28802,528.36955 434.93516,524.69179 C 429.08565,515.54839 404.44144,516.10555 404.44144,525.38118 C 404.44144,538.37464 476.72415,601.45736 511.55767,618.8639 C 530.08128,628.12021 548.46331,635.69358 552.40669,635.69358 C 558.02719,635.69358 559.56829,620.95522 559.53842,567.48766 C 559.51755,529.9744 557.95707,482.93869 556.07066,462.96386 L 552.64089,426.64598 L 528.02387,429.89971 C 486.58288,435.3771 414.42083,448.6066 375.70328,457.82468 C 340.38565,466.2333 338.65125,466.18113 331.57005,456.497 C 320.77983,441.7405 322.47728,429.93092 338.04842,411.42567 C 348.26693,399.28167 356.44254,394.96679 369.23382,394.96679 C 379.7071,394.96679 408.63728,383.59804 442.31369,366.24848 C 472.97265,350.4534 511.89922,331.95593 528.81687,325.14296 C 554.57715,314.76907 559.5764,310.61568 559.5764,299.58854 L 559.5764,286.42132 L 507.41898,289.44632 C 478.73232,291.11007 425.58526,297.72354 389.31427,304.14292 C 318.0656,316.75278 287.32354,315.53589 265.98736,299.26114 L 253.24615,289.54245 L 282.0358,285.82591 C 327.56994,279.94777 422.21309,260.57174 432.81248,254.95782 C 444.69024,248.66682 463.23868,219.08978 463.2657,206.39746 C 463.28117,199.16319 458.72721,197.00915 443.2252,196.91837 C 423.29742,196.80166 389.71449,183.96268 370.15402,168.98279 C 360.70643,161.74758 362.71518,160.51636 396.90145,152.5884 C 417.23063,147.87397 441.68722,142.51477 451.24942,140.67908 L 468.63518,137.34144 L 468.63518,90.691019 C 468.63518,60.670828 466.26745,41.672771 461.99303,37.398463 C 456.70327,32.1086 456.97546,29.729246 463.33041,25.711513 C 476.3221,17.497961 499.69963,19.758681 522.6038,31.44353 C 547.31841,44.051946 547.64404,44.65249 552.93605,87.371432 C 556.52601,116.35161 558.2102,119.62236 570.28052,121.0545 C 595.9276,124.09747 613.16338,134.02131 616.60291,147.72528 C 620.19257,162.02715 608.57894,175.33915 591.98829,175.93986 C 565.52899,176.89787 548.13317,189.57377 535.50676,217.09642 L 522.62226,245.18121 L 612.52637,245.18121 C 697.36517,245.18121 703.45438,245.87135 720.60728,257.43065 C 733.03177,265.80352 738.78423,273.84499 738.78423,282.8407 C 738.78423,295.21652 736.55117,296.2217 701.33781,299.69688 C 641.78398,305.57419 598.7088,319.22175 612.60519,327.81015 C 615.80375,329.78699 618.42086,339.38009 618.42086,349.12817 C 618.42086,365.55389 619.92909,367.09311 639.01419,370.14494 C 661.62335,373.7603 687.96404,391.51379 687.96404,403.13687 C 687.96404,410.45408 671.60534,414.892 634.46924,417.6493 L 615.7461,419.03946 L 613.07135,554.56234 L 610.39659,690.08516 L 592.92631,705.68528 C 570.19285,725.98518 549.076,725.8769 507.79551,705.24881 z M 495.38273,384.26781 C 529.21817,378.4224 557.50352,373.62383 558.23917,373.60431 C 560.41534,373.5466 559.76181,336.12245 557.5846,336.12245 C 549.60687,336.12245 468.23027,365.52909 440.84282,378.30888 C 398.92364,397.86952 409.78299,399.056 495.38273,384.26781 z M 610.39659,293.32658 C 619.31144,289.49573 618.14371,288.66637 603.39398,288.35307 C 592.87632,288.12968 587.03422,290.14808 588.9987,293.32658 C 592.8529,299.56289 595.88392,299.56289 610.39659,293.32658 z M 117.53274,663.65941 C 111.25713,658.57595 103.4335,649.15866 100.14693,642.73212 C 91.898965,626.60407 92.653469,584.65719 101.50514,567.222 C 114.1814,542.2535 126.29045,458.86648 126.27913,396.61986 C 126.27314,363.69356 124.21089,335.48236 121.69636,333.92829 C 119.18183,332.37422 111.35821,337.28462 104.31054,344.84028 C 97.262873,352.39593 76.127534,370.84105 57.343115,385.82943 L 23.189635,413.08101 L 13.209869,400.75651 C -1.7780675,382.2472 0.18258379,351.38652 17.714975,329.84604 C 35.747216,307.69143 127.23923,207.29319 154.67511,179.5536 C 186.19369,147.68611 206.51051,112.31703 206.51051,89.314547 C 206.51051,78.295356 204.10325,67.791883 201.16103,65.973482 C 191.94964,60.280529 195.31574,52.599782 207.02209,52.599782 C 231.66933,52.599782 270.39236,89.088118 270.58538,112.49487 C 270.7688,134.73719 233.27624,194.0176 157.44078,291.39067 C 154.41879,295.27094 157.60675,303.31137 166.23111,313.56084 C 179.31986,329.11593 179.7631,332.13575 179.7631,405.75563 C 179.7631,472.80504 180.71861,481.07555 187.78732,475.20904 C 194.61117,469.54576 195.81155,470.90732 195.81155,484.31076 C 195.81155,506.33122 180.49814,607.2116 173.23801,633.01884 C 162.25329,672.06574 141.79952,683.3163 117.53274,663.65941 z "></path></svg><figcaption>Illustration SVG responsive d’une calligraphie japonaise Shodô, à l’intérieur d'un conteneur</figcaption></figure>

Remarquez que la `width` utilisée dans le CSS suppose que vous voulez que votre image couvre toute la largeur de la page (ou tout au moins de son conteneur parent). Le `padding-bottom` a pour valeur le ratio entre la hauteur et la largeur de l’illustration SVG. En divisant la hauteur du `viewbox` de l’élément par sa largeur, on obtient ici un ratio de 1:1 (voir plus haut&nbsp;: `viewBox="0 0 500 500"`), et par conséquent le padding-bottom doit être fixé à 100%. Si l’image SVG était plus large que haute, par exemple dans un ratio 1:2, le `padding-bottom` serait fixé à 50%.

Enfin, on positionne le SVG à l’intérieur du conteneur avec un petit CSS&nbsp;:

    .svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    }

Avec cette solution, notre illustration SVG peut se redimensionner gracieusement sur la page sans déranger les autres contenus. Le même code fonctionne sur une balise `<object>` utilisée pour embarquer le dessin vectoriel&nbsp;:

    <div class="svg-container">
    <object type="image/svg+xml" data="samurai.svg" width="100%" height="100%" class="svg-content">
    </object>
    </div>

Attention&nbsp;: _tout_ le contenu situé à l’intérieur de sera redimensionné, y compris le texte.


Rendre un SVG responsif

SVG, la syntaxe Path


`use` est l'outil de clonage de [SVG](/tags/svg/) : il offre la possibilité de dupliquer des éléments existants ou prédéfinis, tout en permettant d'appliquer des modifications aux copies clonées. `use` est une façon simple d'alléger votre code SVG en utilisant [les meilleurs principes DRY](https://fr.wikipedia.org/wiki/Ne_vous_r%C3%A9p%C3%A9tez_pas) ("Don't Repeat Yourself").

<h2>Cas d'usage</h2>

Voici quelques `use` cases :) Étant donné un élément SVG avec un `id`:

```
<circle cx="50" cy="50" r="10" fill="red" id="primcirc" />
```

Nous pouvons répliquer cet élément avec `use` :

```
<use xlink:href="#primcirc" />
```

> 👉🏾 Remarque : l'utilisation de `xlink` dans la référence implique que l'[espace de nom](https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course) xlink soit déclaré dans l'élément racine SVG.

La copie hérite de toutes les caractéristiques de l'original et par défaut ne peut en être distinguée, ce qui signifie que seules les modifications ajoutées en feront un élément unique. Toutefois, les modifications ne peuvent concerner ce qui a déjà été déclaré dans l'élément original. L'exemple suivant ne fonctionnera pas car il entre en contradiction avec l'original&nbsp;:

```
<use xlink:href="#primcirc" fill="blue" />
```

La copie apparaîtra rouge, et non bleue, la couleur de remplissage (_fill_) ayant été définie dans l'élément source. Par contre l'ajout d'un _nouvel_ attribut fonctionnera&nbsp;:

```
<use xlink:href="#primcirc" stroke="black" />
```

Cette fois-ci, la copie aura toujours une couleur de remplissage rouge, mais des traits (_stroke_) de contours noirs.

<h2>Utiliser defs</h2>

Pour contourner le problème, l'élément "source" est souvent placé dans un élément `<defs>` comprenant les attributs qui ne seront _pas_ modifiés dans les clones&nbsp;:

```
<defs>
    <circle r="10" id="primcirc" />
</defs>
```

Rien de ce qui apparaît dans un élément `<defs>` ne sera rendu dans le SVG, les éléments ainsi définis ne pouvant apparaître que via une référence. Dans ce cas, nous ajoutons au clone les attributs qui manquaient dans la définition originale&nbsp;:

```
<use xlink:href="#primcirc" cx="50" cy="50" fill="red" />
```

Ceci crée la première instance visible de notre cercle. Il a un rayon de 5, hérité de l'original, mais sa position et sa couleur de remplissage lui sont propres.
Nous pouvons facilement créer une autre copie en ajoutant une nouvelle référence `use`&nbsp;:

```
<use xlink:href="#primcirc" cx="80" cy="80" fill="yellow" />
```

Les deux cercles ont un rayon égal à 5, dérivé (et non modifiable) de la définition originale, mais chacun a sa propre position et couleur de remplissage.
Si la définition originale de l'élément comprenait une position...

```
<defs>
    <circle r="10" cx="50" cy="50" id="primcirc" />
</defs>
```

...alors nous pourrions modifier la position du clone en utilisant une transformation `transform`&nbsp;:

```
<use xlink:href="#primcirc" fill="yellow" transform="translate(50 50)" />
```

> Remarque : les attributs prédéfinis peuvent être modifiés dans les clones référencés à l'aide de techniques similaires. Un changement de `fill` via `opacity` ou `blend-mode` par exemple.

Les changements d'opacité ou autres apportés à la définition originale seront reflétés dans les clones.

Il n'y a pas que les éléments qui peuvent ainsi être clonés et référencés&nbsp;: nous pouvons également [regrouper des éléments](/articles/les-bases-de-svg-groupes/), donner un `id` au groupe et l'utiliser autant de fois que nous le voulons.

```
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<defs>
    <g id="primgroup">
        <circle cx="50" cy="50" r="10" fill="red" />
        <circle cx="70" cy="70" r="10" fill="blue" />
    </g>
</defs>
    <use xlink:href="#primgroup" />
</svg>
```

J'utilise les [éléments circle](/articles/les-bases-de-svg-cercles-et-ellipses/) pour la simplicité de la démonstration, mais les sources peuvent être à peu près ce que vous voulez. Il est également possible de générer des références `use` avec JavaScript, mais ce sera pour un autre article.


svg

Ressources complémentaires sur SVG