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 Baron
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
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 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 :
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 :
Le code de cette animation SVG est disponible sur ce lien.
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é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
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 !
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é
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 !
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
Le sujet du web design vous fascine, alors ces articles devraient vous intéresser également.
Anne-Laure Compain
Alexis Le Baron
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.
