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%);