La Cascade

Rechercher

Créer de superbes diagrammes avec SVG et Blend Modes

par Dudley Storey, 30 juillet 2015, svg, design, article original paru le 30 juillet 2015 dans the new code

Une nouvelle association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. De quoi vous faire regretter le bureau, les graphiques et les diagrammes en camembert. Merci Dudley!


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" : Le markup SVG du diagramme de base pourrait être :

  <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 :

Project TriangleThree overlapping circles, labelled "Good", "Fast" and "Cheap"FASTGOODCHEAP

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 :

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

Ce qui nous donne :

le diagramme fast, good, cheap

👉🏾 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



Comme dans mon article sur les textes avec effets 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 :

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, ce qui fonctionnerait assez comme notre effet blend-mode.

(Photo par Josh Liba, sous licence CC-BY-NC-ND 2.0)

Voir la liste des articles de Dudley Storey traduits dans La Cascade.
article original paru le 30 juillet 2015 dans the new code
Traduit avec l'aimable autorisation de the new code et de Dudley Storey.
Copyright the new code © 2015