Comment dessiner un flocon de neige en SVG

Ce tutoriel montre comment dessiner un flocon de neige en SVG : créer une seule branche, la réutiliser avec <use>, faire pivoter les copies autour du centre et ajouter, si nécessaire, une animation SVG. Le même principe convient aux icônes d’hiver, arrière-plans, loaders décoratifs, cartes de vœux et ressources vectorielles réutilisables.

Réponse rapide : dessinez une branche de flocon comme un <path>, placez-la dans <defs>, réutilisez-la six fois avec <use> et faites pivoter chaque copie autour du centre avec transform="rotate(angle cx cy)".

Dans cet article, vous apprendrez à :

définir un viewBox pour obtenir un dessin de flocon redimensionnable;
dessiner une branche avec des commandes de path;
réutiliser la branche avec <defs> et <use>;
faire pivoter les branches autour du centre du flocon;
ajouter une décoration centrale et une rotation optionnelle avec <animateTransform>;
optimiser un flocon SVG pour l’accessibilité, le SEO et la réutilisation.

Pourquoi SVG convient aux flocons de neige

SVG est bien adapté aux flocons de neige, car le dessin est géométrique, redimensionnable, modifiable et généralement léger. Un flocon peut être construit à partir de lignes répétées et de transformations, plutôt que d’une série de chemins copiés manuellement.

Trois flocons de neige stylisés tournent autour de leur centre.

Les flocons, avec leur symétrie en six branches et leurs lignes nettes, illustrent bien les points forts de SVG :

Redimensionnement net – le dessin reste précis aussi bien en petite icône qu’en grand arrière-plan.
Fichier léger – le code SVG est souvent plus compact qu’une image matricielle équivalente.
SEO – les moteurs de recherche peuvent lire le texte, les titres et les descriptions intégrés au SVG.
Styles CSS – la couleur, l’épaisseur de trait et l’animation peuvent être ajustées facilement.

Structure de base d’un flocon

Un flocon SVG simple peut être construit avec six branches tournées autour d’un point central. Un tour complet fait 360 degrés; six branches régulières sont donc séparées de 60 degrés. L’approche de base consiste à créer une branche, à la réutiliser avec cinq rotations, puis à ajouter les détails décoratifs.

Cet exemple utilise des paths SVG, des transformations, des éléments réutilisables, fill, stroke et viewBox. Ces articles du tutoriel expliquent les notions utilisées :

Systèmes de coordonnées et unités SVG explique le canvas SVG, le viewport, les unités et le système de coordonnées.
SVG Shapes montre comment créer des formes de base et appliquer des styles simples.
SVG Path Data explique comment les paths dessinent des contours avec des lignes, arcs et courbes.
Transformations SVG de base couvre rotation, mise à l’échelle, translation et skew avec l’attribut transform.
Fills and Strokes en SVG explique la couleur de trait, l’épaisseur, l’opacité, les pointillés et le comportement de fill.

Comment dessiner un flocon SVG

Créez un élément <svg> avec un viewBox carré, par exemple viewBox="0 0 300 300".
Choisissez le centre du flocon. Dans un viewBox de 300x300, le centre est (150, 150).
Dessinez une branche comme un <path> et gardez fill="none" si vous voulez un dessin au trait.
Placez cette branche dans <defs> afin qu’elle puisse être réutilisée sans être rendue comme forme autonome.
Utilisez <use> pour placer six copies et faites pivoter chaque copie de 60 degrés autour du centre.
Ajoutez les décorations, métadonnées et, si nécessaire, <animateTransform> pour faire tourner le flocon.

Étape 1. Créer un document SVG

Chaque image SVG commence par l’élément <svg>. Il définit la zone de dessin et le système de coordonnées utilisés par le flocon.

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2  <!-- Le code du flocon sera placé ici -->
3</svg>

Chaque attribut a un rôle précis :

width et height définissent la taille d’affichage sur la page, ici 300x300 pixels;
viewBox="0 0 300 300" définit le système de coordonnées interne. Grâce à lui, le dessin peut être agrandi ou réduit sans perdre sa netteté;
xmlns="http://www.w3.org/2000/svg" indique que le document utilise l’espace de noms SVG et garantit un rendu correct.

Conseil : définissez toujours un viewBox. Il permet au flocon de s’adapter proprement à différentes tailles d’affichage. Pour plus de détails, consultez SVG viewBox.

Étape 2. Commencer par une branche

Déterminez d’abord le centre du flocon. Dans un viewBox de 300x300, le centre est (150, 150). Au lieu de dessiner les six branches à la main, dessinez une seule branche et réutilisez-la. L’exemple utilise un élément <path> pour dessiner des lignes :

1<path id="b1" stroke="#03b6fd" stroke-linecap="round" stroke-width="10" fill="none" d="
2  M 50,50 L 150,150
3  M 50,80 L 80,80 L 80,50
4  M 50,100 L 100,100 L 100,50
5  M 80,120 L 120,120 L 120,80
6  M 110,140 L 140,140 L 140,110" />

Le path fonctionne ainsi :

chaque commande M de l’attribut d déplace le curseur de dessin vers un point de départ;
chaque commande L trace une ligne droite vers la coordonnée suivante;
l’attribut stroke définit la couleur du trait;
stroke-linecap arrondit les extrémités des lignes.

À ce stade, le SVG contient une branche, c’est-à-dire un sixième du flocon final. Vous pouvez modifier son apparence avec stroke, stroke-width, stroke-linecap, stroke-dasharray et fill.

La figure ci-dessous montre quatre variantes de la même branche SVG.

Quatre variantes de style pour une branche de flocon, marquées a à d

a) Sans stroke-linecap="round", les extrémités restent droites.
b) Avec stroke-linecap="round", les extrémités deviennent arrondies.
c) Avec fill="#03b6fd" au lieu de fill="none", la forme est remplie.
d) Avec stroke-dasharray="2 8", le trait devient pointillé.

Étape 3. Faire pivoter la branche

Réutilisez la branche avec <use> au lieu de copier plusieurs fois le même attribut d. Une transformation de rotation place chaque copie autour du centre (150, 150) :

1<g id="snowflake1">
2  <use href="#b1" />
3  <use href="#b1" transform="rotate(60 150 150)" />
4  <use href="#b1" transform="rotate(120 150 150)" />
5  <use href="#b1" transform="rotate(180 150 150)" />
6  <use href="#b1" transform="rotate(240 150 150)" />
7  <use href="#b1" transform="rotate(300 150 150)" />
8</g>

Le résultat est un flocon complet : six copies identiques, espacées de 60 degrés autour du même point central.

Quatre styles de flocons complets, marqués a à d

Étape 4. Ajouter une décoration centrale

Pour terminer l’icône, ajoutez un cercle au centre afin de donner plus de poids visuel au dessin :

1<circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3"/>

cx et cy définissent le centre du cercle;
r définit son rayon;
fill et stroke définissent ses couleurs.

Le flocon devient alors une image vectorielle complète construite à partir d’une seule branche réutilisable et d’un détail central.

Étape 5. Animer le flocon

Vous pouvez ajouter une rotation directement dans le fichier SVG avec <animateTransform>. Placez cet élément dans le groupe <g> qui contient les branches et la décoration centrale. Ainsi, tout le groupe tourne autour du point (150, 150).

1<g id="snowflake1">
2  <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="30s" repeatCount="indefinite"/>
3
4  <use href="#b1" />
5  <use href="#b1" transform="rotate(60 150 150)" />
6  ...
7</g>

type="rotate" définit le type de transformation;
from et to indiquent les angles et le centre de rotation;
dur="30s" définit la durée d’un tour complet;
repeatCount="indefinite" répète l’animation en continu.

Cette approche garde l’animation dans le fichier SVG lui-même. Le flocon reste portable lorsqu’il est utilisé comme fichier image, icône ou élément décoratif. Elle est toutefois moins flexible qu’une animation CSS complexe, car chaque <animateTransform> décrit une transformation précise.

Vous pouvez voir le résultat animé et le fichier complet ici : animated-snowflake.svg.

Flocon bleu tournant autour de son centre

Optimiser les flocons SVG pour le SEO et l’accessibilité

Pour rendre un flocon SVG plus clair pour les moteurs de recherche, les outils d’accessibilité et les utilisateurs :

Ajoutez <title> et <desc> dans le SVG.
Utilisez un nom de fichier descriptif, par exemple winter-snowflake-icon.svg plutôt que image1.svg.
Ajoutez un texte alt lorsque le SVG est intégré avec <img>.
Réduisez le code inutile : espaces superflus, décimales excessives et formes non utilisées.

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2  <title>Decorative winter snowflake</title>
3  <desc>Six-pointed snowflake for winter holiday decor</desc>
4  <!-- snowflake code -->
5</svg>

Voici le code complet d’un flocon animé :

 1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
 2  <title>Decorative winter snowflake</title>
 3  <desc>Six-pointed snowflake for winter holiday decor</desc>
 4
 5  <defs>
 6    <path id="b1" stroke="#03b6fd" stroke-linecap="round" stroke-width="10" fill="none" d="
 7      M 50,50 L 150,150
 8      M 50,80 L 80,80 L 80,50
 9      M 50,100 L 100,100 L 100,50
10      M 80,120 L 120,120 L 120,80
11      M 110,140 L 140,140 L 140,110" />
12  </defs>
13
14  <g id="snowflake1">
15    <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="30s" repeatCount="indefinite"/>
16    <use href="#b1" />
17    <use href="#b1" transform="rotate(60 150 150)" />
18    <use href="#b1" transform="rotate(120 150 150)" />
19    <use href="#b1" transform="rotate(180 150 150)" />
20    <use href="#b1" transform="rotate(240 150 150)" />
21    <use href="#b1" transform="rotate(300 150 150)" />
22    <circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3" />
23  </g>
24</svg>

Erreurs courantes et corrections

Problème	Cause	Correction
Les branches tournent autour du mauvais point	`rotate(angle)` est utilisé sans centre explicite	Utilisez `transform="rotate(60 150 150)"`, où `150 150` est le centre du `viewBox`.
La branche s’affiche deux fois	Le `<path id="b1">` est placé dans le corps du SVG et aussi réutilisé avec `<use>`	Placez la définition dans `<defs>...</defs>`.
`<use href="#b1">` n’affiche rien	L’identifiant est absent ou mal orthographié	Vérifiez que `id="b1"` et `href="#b1"` correspondent exactement.
Le cercle central passe derrière les branches	Le `<circle>` est placé avant les éléments `<use>`	Placez le cercle après les branches dans l’ordre du document.
La branche devient noire et remplie	`fill="none"` est oublié	Ajoutez explicitement `fill="none"` au `<path>`.
L’animation tourne autour de `(0,0)`	`<animateTransform>` n’indique pas le centre	Utilisez `from="0 150 150"` et `to="360 150 150"`.
Le SVG est peu lisible pour le SEO	Pas de `<title>`, pas de `<desc>` ou nom de fichier générique	Ajoutez des métadonnées descriptives et un nom de fichier clair.

Recettes rapides

Flocon à huit branches

Utilisez des rotations de 45 degrés au lieu de 60 degrés :

 1<g>
 2  <use href="#b1" />
 3  <use href="#b1" transform="rotate(45 150 150)" />
 4  <use href="#b1" transform="rotate(90 150 150)" />
 5  <use href="#b1" transform="rotate(135 150 150)" />
 6  <use href="#b1" transform="rotate(180 150 150)" />
 7  <use href="#b1" transform="rotate(225 150 150)" />
 8  <use href="#b1" transform="rotate(270 150 150)" />
 9  <use href="#b1" transform="rotate(315 150 150)" />
10</g>

Réutilisation avec <symbol>

Définissez le flocon une fois comme <symbol> puis placez-le à différentes tailles :

 1<defs>
 2  <symbol id="snowflake" viewBox="0 0 300 300">
 3    <use href="#b1" />
 4    <use href="#b1" transform="rotate(60 150 150)" />
 5    <use href="#b1" transform="rotate(120 150 150)" />
 6    <use href="#b1" transform="rotate(180 150 150)" />
 7    <use href="#b1" transform="rotate(240 150 150)" />
 8    <use href="#b1" transform="rotate(300 150 150)" />
 9    <circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3" />
10  </symbol>
11</defs>
12
13<use href="#snowflake" x="0" y="0" width="80" height="80" />
14<use href="#snowflake" x="100" y="50" width="120" height="120" />

FAQ – flocons SVG

Quels éléments SVG utiliser pour dessiner un flocon ?

Un flocon compact utilise généralement <path> pour une branche, <defs> pour la définition réutilisable, <use> pour les copies, transform="rotate(...)" pour la symétrie et, si nécessaire, <circle> ou <animateTransform> pour la décoration et le mouvement.

Pourquoi utiliser defs et use pour un flocon ?

<defs> et <use> réduisent la duplication. Vous définissez une branche une fois, puis vous la réutilisez avec différents angles de rotation.

Puis-je utiliser ce flocon SVG comme icône ou arrière-plan ?

Oui. Gardez le viewBox, utilisez un nom de fichier descriptif et ajoutez un texte alt pertinent si le fichier est intégré avec <img>. Pour un arrière-plan décoratif, gardez les paths simples et évitez les filtres lourds.

Puis-je animer un flocon SVG sans CSS ?

Oui. <animateTransform> permet de créer une rotation intégrée au fichier SVG. C’est utile lorsque le SVG doit rester autonome.

Points clés

Définissez les éléments répétitifs avec <defs> et réutilisez-les avec <use> pour garder le code compact.
Ajoutez des id aux parties que vous voulez réutiliser ou animer.
Définissez toujours un viewBox pour que le flocon se redimensionne proprement.
Gardez les paths simples afin d’améliorer le rendu et la performance.
Ajoutez <title>, <desc>, un nom de fichier descriptif et un texte alt lorsque le SVG est publié sur une page.

Ressources associées

La section SVG 2 Document Structure définit les éléments réutilisables comme <defs>, <use> et <symbol>.
Systèmes de coordonnées et unités SVG explique le système utilisé pour positionner et faire pivoter les branches.
SVG viewBox explique comment viewBox rend le dessin redimensionnable.
SVG Path Data explique les commandes M et L utilisées dans la branche.
Transformations SVG de base couvre rotate(angle cx cy).
Fills and Strokes en SVG explique stroke, stroke-width, stroke-linecap, pointillés et fill.
How to Work with Aspose.SVG for .NET API montre des workflows de création et modification SVG en C#.

Dégradés SVG