Vous avez remarqué ces nombreuses icônes utilisés dans les thèmes pour rendre attractifs les contenus. Elles sont dans un langage très simple appelé « SVG ».
Prenons par exemple la flèche vers le bas du jeux d’icône open source de Bootstrap:
https://icons.getbootstrap.com/icons/arrow-down-circle/
Son code est relativement simple, il consiste en un chemin (« path ») dont on a rentré la formule mathématique (que l’on a bien sûr pas besoin de chercher à comprendre).
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
</svg>
Ajouter un dégradé
Si on souhaite mettre en couleur cette forme, par exemple pour l’intégrer ensuite dans un PowerPoint, nous devons ajouter la définition (« defs ») dans le code:
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16" >
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#833ab4"/>
<stop offset="50%" stop-color="#fd1d1d"/>
<stop offset="100%" stop-color="#fcb045"/>
</linearGradient>
</defs>
<path fill="url(#gradient)" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z" />
</svg>
Voici ce que le code aurait donné en CSS simple pour une forme:
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
Dégradé Radial: depuis le centre
Si on voulait appliquer ce type de dégradé au centre, on aurait:
<svg width="120" height="120" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient">
<stop offset="10%" stop-color="gold"/>
<stop offset="95%" stop-color="green"/>
</radialGradient>
</defs>
<path fill="url(#gradient)" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z" />
</svg>
Ce qui en CSS normal aurait été formulé:
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);