Web design

SVG et animation pour un site Internet

Retrouvez dans cet article des exemples d’animations réalisées par Snoweb avec des SVG pour un site Internet. Ces animations vont permettre de dynamiser le design du site tout en le gardant optimisé.

Alexis Le Baron

Développeur web chez Snoweb

Publié le 14 juillet 2021 (Mise à jour le 3 novembre 2025)

Sommaire

1. Plusieurs effets d’animation SVG

1.1 L’effet masque

L’attribut <clipPath> d’un SVG permet de faire apparaître des formes dans un groupe <g>.

Exemple :

<clipPath id="my-id">
    <rect width="100" height="100"></rect>
</clipPath>

Que l’on applique à un groupe :

<g clip-path="url(#my-id)">
	...
</g>

Dans l’exemple suivant, le <clipPath> permet de faire apparaître/disparaître des groupes d’éléments :

les faces des cubes
la lumière
les étoiles

Le code de cette animation SVG est disponible sur ce lien.

1.2 L’effet vague

Pour avoir l’effet d’une vague, on utilise un <path> avec un simple <animate> qui va faire varier sa direction :

<path d="...">
    <animate
        attributeName="d"
        dur="5s"
        begin="1s"
        values=" ... ; ... ; ... "
    />
</path>

Ce qui nous donne ceci :

Le code de cette animation SVG est disponible à ce lien.

1.3 L’effet stroke

L’attribut d’un SVG peut être soit en « stroke » (trait), soit en « fill » (remplissage).

Ici, on utilise un <path> avec « stroke » pour avoir un trait, ce qui nous permet de jouer sur son tracé :

<path d="..." stroke-dashoffset="100%">
    <animate
	    attributeName="stroke-dasharray"
	    dur="20s"
	    values="80%;120%;80%"
	    repeatCount="indefinite"
    />
</path>

Exemple :

Le code de cette animation SVG est disponible à ce lien.

1.4 L’effet « cercle »

Pour donner l’impression de remplir une partie d’un SVG, il est possible d’animer le rayon d’un élément <circle> comme ceci :

<circle cx="50" cy="100" r="0">
    <animate
        attributeName="r"
        dur="5s"
        values="0;50;0"
    />
</circle>

Ce qui nous donne :

Le code de cette animation SVG est disponible à l’adresse suivante.

À l’affût de nouvelles tendances web design ?

Inscrivez-vous à Flocon de neige et recevez nos derniers articles publiés.

2. Animation Lottie

Dans cet exemple d’animation Lottie :

Les illustrations ont été réalisées sur Illustrator
Les animations ont été réalisées sur After Effects
L’exportation des animations au format JSON grâce à Bodymovin
La visualisation et la lecture sur cette page web grâce à Wagtail Lottie, un module open source de Wagtail réalisé par Snoweb

Le code de cette animation SVG est disponible à ce lien.

3. Librairie SVG de Snoweb

La librairie SVG créée par Snoweb regroupe plusieurs types de SVG pour des utilisations diverses :

icône
séparateur de bloc
décoration de bloc
et bien d’autres

À noter :

La librairie Snoweb SVG est disponible en trois langues : français, anglais et allemand, et la documentation technique est en anglais.

3.1 Utilisation

Cette librairie a été pensée pour respecter les contraintes d’optimisation d’un site Internet. En effet, elle est différente des librairies d’icônes actuelles. Snoweb SVG ne demande pas de charger l’intégralité des fichiers au chargement de la page web, ce qui, nous le savons, augmente le temps de chargement.

Lors du chargement de la page, Snoweb SVG a seulement besoin de charger un fichier CSS qui regroupe tous les mécanismes des :

couleurs
thèmes light et dark
animations

Aucun code JavaScript n’est utilisé, que ce soit dans la librairie, dans son installation ou dans son utilisation.

<!-- Couleurs et thèmes -->
<link rel="stylesheet" href="https://static.snoweb.io/snowebsvg/dist/css/themes-0.0.87.css">
<!-- Animations -->
<link rel="stylesheet" href="https://static.snoweb.io/snowebsvg/dist/css/core-0.0.87.css">

Pour simplifier l’utilisation de la librairie, Snoweb a pensé à tout.

Premier point : il existe un module Python qui permet d’utiliser la librairie avec Django et Wagtail. En effet, une simple commande permet d’importer toutes les icônes dans la base de données. Cette action permet ensuite de sélectionner en un clic l’icône voulue lors de la création d’une page web.

# Ajoute les SVG dans la base de donnée
python manage.py svg_build

# Affiche un SVG depuis le HTML de Django ou de Wagtail
{% load svg %}
{% svg_inline 'heroicons-lightbulb-basic' 'light' 100 100 %}

Second point : il est possible d’utiliser les SVG de la librairie directement en HTML en copiant le code du SVG disponible sur la librairie.

Voici un exemple simple :

🔴 Attention : lorsque vous faites une recherche dans la librairie, pensez à la faire en anglais car le nom des fichiers est en anglais !

Je souhaite récupérer l’icône Ampoule. Voici la marche à suivre :

1. Je vais sur la librairie et dans la barre de recherche je tape Lightbulb

2. Je choisis parmi les icônes affichées celui que je souhaite récupérer

3 - Je copie le code HTML

<svg class="svg-snoweb svg-theme-light" 
         height="100" preserveaspectratio="xMidYMid meet" 
         viewbox="0 0 100 100" 
         width="100" 
         x="0" 
         xmlns="http://www.w3.org/2000/svg" y="0">
   <path class="svg-stroke-primary" 
              d="M40.3,70.8H59.7M50,12.6v4.1m26.5,6.8-3,3M87.4,50H83.3M16.7,50H12.6M26.5,26.5l-3-3M35.3,64.7a20.8,20.8,0,1,1,29.4,0L62.4,67a14.1,14.1,0,0,0-4.1,9.9v2.2a8.3,8.3,0,0,1-16.6,0V76.9A14.1,14.1,0,0,0,37.6,67Z" 
              fill="none" 
              stroke-linecap="round" 
              stroke-linejoin="round" 
              stroke-width="8">
   </path>
</svg>

Félicitations, vous avez récupéré l’icône « Ampoule » !

3.2 Réglages

Les paramètres de la librairie Snoweb SVG sont riches et vous permettent de tester les icônes avec de nouvelles couleurs, un nouveau fond ou un effet de glassmorphism.

Pour plus de précisions, dans les réglages vous pouvez :

Visualiser la librairie en mode sombre ou en mode clair
Découvrir les icônes avec un effet de glassmorphism
Changer les couleurs des icônes
Changer la couleur de fond avec une couleur unie ou un dégradé

3.3 Collections

Vous le remarquerez sûrement, mais je préfère vous l'indiquer : pour chaque icône, il existe dans la librairie 5 variantes.

basic : il s’agit de l’icône dessinée en contour "stroke".
small : il s’agit de l’icône en remplissage "fill".
rect : cela ajoute un carré en arrière-plan de l’icône. Une animation de remplissage se fait au passage de la souris sur cette icône.
circle : cela ajoute un cercle en arrière-plan de l’icône. Une animation de remplissage se fait au passage de la souris sur cette icône.
line : cela ajoute une ligne en dessous de l’icône. Une animation de remplissage se fait au passage de la souris sur cette icône.

De plus, comme indiqué juste au-dessus, certaines icônes comportent une animation au passage de la souris. Par choix d’optimisation, cette animation est légère et réalisée en CSS.

HEROICONS

Heroicons est une librairie d’icônes open source créée par Tailwind. Elle regroupe les icônes essentielles dont un site internet pourrait avoir besoin. Ces icônes restent cependant très générales. C’est pourquoi Snoweb a dessiné ses propres icônes et les a mises dans la collection Northenlight.

NORTHENLIGHT

Comme indiqué précédemment, Northenlight est une collection d’icônes dessinées par Snoweb. En effet, selon les besoins de ses clients, Snoweb réalise des icônes plus spécifiques selon les secteurs d’activité et qui ne se trouvent pas dans Heroicons.

BRAND

La collection Brand comporte à ce jour les icônes des 22 marques les plus utilisées sur les sites Internet. Il s’agit surtout de réseaux sociaux, comme LinkedIn, Facebook ou encore Twitter.

NUMBERS

Si vous cherchez des icônes-chiffres pour énumérer des éléments, la collection Number est pour vous ! Vous y trouverez les chiffres de 0 à 9.

SEPARATOR_BOTTOM et SEPARATOR_TOP

Les separator_bottom et separator_top permettent de faire des séparations entre les blocs. Par exemple, entre un bloc de couleur blanche et un bloc de couleur bleue, vous pouvez décider d’ajouter un séparateur en forme de vague pour rendre le passage entre les deux blocs plus agréable visuellement.

Découvrez un exemple de séparateur juste en dessous !

Le SVG au service du web

Snoweb-SVG vous permet de rendre votre site Internet plus moderne et plus agréable à parcourir grâce à ses icônes et ses séparateurs de blocs.

Icônes: +1 500
Séparateurs: + 50
Patterns: + 115

DECORATOR

La collection Decorator regroupe des éléments graphiques qui peuvent s’ajouter à des blocs afin de les décorer. Il s’agit de formes simples comme des carrés, des triangles ou des cercles, mais aussi des formes plus travaillées comme des nuages ou des ensembles de points.

HEROPATTERN

Savez-vous ce qu’est un pattern ? Un pattern est un motif réalisé de manière à ce qu’il puisse se reproduire à l’infini sans former de coupure entre chaque reproduction. Dans sa librairie, Snoweb vous propose plus de 150 patterns différents pour agrémenter les fonds de vos pages web ou de vos blocs !

BACKGROUND

La collection Background met à disposition des éléments graphiques, animés ou non, que vous pouvez mettre en arrière-plan d’un bloc ou d’une page web.

Pour plus d’informations, voici la liste des liens de Snoweb SVG :

4. Conclusion

Le SVG est un outil essentiel sur le web et il vous permet de rendre votre site internet plus dynamique et attractif ! Pensez donc à l’utiliser pour vos icônes, pour votre logo mais aussi pour vos illustrations. Et, pour les plus créatifs d’entre nous, les SVG prendront vie et s’animeront grâce à Bodymovin ou au CSS.

Voici donc ce qu’il faut retenir :