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 animation vont permettre de dynamiser le design du site tout en le gardant optimisé.

Alexis Le BaronAlexis Le Baron

Alexis Le Baron

Développeur web chez Snoweb
Publié le 14 juillet 2021 (Mise à jour le 8 avril 2022)


1. Plusieurs effets d'animation SVG

1.1 L'effet masque

L'attribut <clipPath> d'un SVG permet de faire apparaître des formes sur 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/disparaitre des groupes d'éléments :

  • les faces des cubes
  • la lumière
  • les étoiles
svg animation avec mask
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 :

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

1.3 L'effet stroke

L'attribut d'un SVG peut être soit en "stroke" (trait) ou 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 :

svg animation avec stroke
Le code de cette animation SVG est disponible sur 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 :

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

2. Animation Lottie

Dans cet exemple d'animation Lottie :

  • les illustrations ont été réalisée sur Illustrator
  • les animations sur After Effect
  • l'export des animation en 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 sur ce lien.


3. Librairie Snoweb SVG

La librairie de 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 de la page.

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 se 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ée. Cette action permet ensuite de pouvoir sélectionner en un clic l'icône voulu lors de la création de 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 ficher 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 choisi parmi les icons affichés celui que je souhaite récupérer

icon-lightbulb

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élicitation, vous avez récupérer l'icon Ampoule !

icon ampoule

3.2 Réglages

Les paramètres de la libraire Snoweb SVG sont riches et vous permettent te 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é
changement-couleur-icon-light

3.3 Collections

Vous le remarquerez surement, mais je préfère vous l'indiquez, 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 cet 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 cet 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 cet icône

De plus, et comme indiqué juste au-dessus, sur certaines icônes il y a une animation au passage de la souris. Par choix d'optimisation, cette animation est légère et faite en CSS.

  • HEROICONS

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

  • NORTHENLIGHT

Comme indiqué précédemment, Northenlight est une collection d'icônes designés 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 de 22 marques les plus utilisées sur les sites internet. Il s'agit surtout de réseaux sociaux, comme par exemple Linkedin, Facebook ou encore Twitter.

  • NUMBERS

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

  • SEPARATOR_BOTTOM et SEPARATOR_TOP

Les separator_bottom et separator_top permettent de faire des séparation entre les blocs. Par exemple, entre un bloc de couleur blanc et un bloc de couleur bleu, vous pouvez decider d'ajouter un séparateur en forme de vague pour rentre le passage entre les deux blocs plus agréable visuellement.

Découvre 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 a parcourir grâce à ses icônes et ses séparateurs de bloc.

icônes
+1 500
séparateurs
+ 50
patterns
+ 115
  • DECORATOR

La collection Decorator regroupe des éléments graphiques qui peuvent s'ajouter à des bloc afin de les décorer. Il s'agit de formes simples comme des carré, triangle ou 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 pattern différents pour agrémenter les fond 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 dans le web et il vous permet de rendre plus dynamique et attractif votre site internet ! Pensez donc a l'utiliser pour vos icônes, pour votre logo mais aussi pour vos illustrations. Et pour les plus créatif d'entre nous, les SVG vont prendre vie et s'animer grâce au Bodymovin ou au CSS.

Voici donc ce qu'il faut retenir :

  • Pour une animation simple et optimale d'un SVG ➡️ SMIL ou CSS
  • Pour une animation plus complexe d'un SVG ➡️ Lottie
  • Pour avoir une libraire d'icônes optimisée et variée ➡️ Snoweb-SVG
Je souhaite créermes animations SVG
En savoir plus

Le sujet du web design vous fascine, alors ces articles devraient vous intéresser également.

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Partager cet article sur les réseaux sociaux

Nos derniers articles sur le web design

Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.

pop-up newsletter web design