Conception SVG

Que fait Conception SVG ?

Compétence feuille du domaine Design ; accessible par son domaine ou par son nom.

Commencez par le rôle du graphisme dans la marque ou l'interface. Choisissez sa composition, sa silhouette, ses proportions, sa typographie et sa couleur pour ce contexte, en préservant une direction visuelle établie lorsqu'elle existe. Exprimez ensuite le design en un balisage SVG minimal, propre. Chaque élément et attribut doit avoir sa raison d'être.

Cette compétence couvre les logos, les jeux d'icônes, les éléments de marque et les graphismes web décoratifs ou expressifs. Choisissez selon l'objectif : le logo d'une page d'accueil et le décor de sa section héroïque relèvent d'ici ; un diagramme expliquant le fonctionnement d'un produit relève d'editorial-svg-diagrams. La composition de page et la mise en page d'interface relèvent de frontend-design.

Une petite décision pour un logo

Brief illustratif : Réalisez un symbole de montagne qui reste reconnaissable dans l'en-tête d'un site web et dans une icône d'application compacte. Commencez par la silhouette extérieure et une découpe de crête distinctive ; omettez les fines lignes de neige qui disparaissent en réduction. Vérifiez le symbole aux deux tailles réelles et sur chaque surface prévue avant d'ajouter de la couleur ou des détails. Si ces usages nécessitent différents niveaux de détail, réalisez une variante explicite pour les petites tailles plutôt que de réduire un symbole illisible.

Avant toute composition substantielle ou révision visuelle, évaluez la capacité visuelle du modèle et l'accès aux tailles et aux surfaces d'utilisation rendues. Si Puppeteer est disponible, utilisez son routage phase/modèle en cours pour un auteur ou un réviseur indépendant mieux adapté, en transmettant le brief, la direction établie et les tailles cibles. Réutilisez un propriétaire de délégation actif ; une petite modification appropriée peut rester directe. Les vérifications propres du designer ne sont pas une acceptation indépendante. L'absence de capacité ou d'accès rendu laisse cette vérification ouverte ; un SVG valide seul n'établit pas un bon design.

Routage thématique

Tâche	Référence à charger
Combinaisons de drapeaux d'arc, formes de chemin courantes	references/path-patterns.md
Conception de logo, typographie, espace négatif	references/logo-techniques.md
Conception d'icônes, systèmes de grille, alignement pixel	references/icon-design.md
Dégradés, masques, clips, filtres, transformations (décisions de design)	references/advanced-techniques.md
Animation (keyframes CSS, décalage, GPU, easing, spécifique SVG)	references/animation.md
Optimisation, sprites, configuration SVGO	references/optimization.md
Accessibilité, pièges des navigateurs	references/accessibility-and-pitfalls.md
Flux de travail d'édition, opérations booléennes, combinaison de SVGs	references/editing-workflow.md

Squelette SVG

Pour une icône d'interface avec contour, partez de cette structure :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <!-- contenu -->
</svg>

Ajustez viewBox pour correspondre au canevas de conception. Omettez les attributs width/height pour que le SVG s'adapte à son conteneur (ajoutez-les uniquement lorsqu'une taille fixe est nécessaire).

Pour les logos et les illustrations web, choisissez le canevas, les remplissages et les contours d'après la composition plutôt que d'hériter des valeurs par défaut des icônes.

Conventions de taille de canevas

Taille	Cas d'usage	Notes
0 0 16 16	Micro-icônes, favicons	Heroicons micro, GitHub Octicons
0 0 20 20	Petites icônes d'interface, éléments de formulaire	Heroicons mini
0 0 24 24	Icônes standard (les plus courantes)	Lucide, Heroicons outline, Material
0 0 32 32	Icônes moyennes, navigation	Phosphor utilise 256x256 en interne
0 0 48 48	Icônes grand affichage	Icônes d'application, illustrations
Personnalisé	Logos, illustrations	Adaptez le rapport hauteur/largeur naturel

Pour les icônes d'interface standard, utilisez par défaut 24x24 sauf si le système d'icônes environnant utilise une autre grille. Les logos et les graphismes web utilisent un canevas adapté à leur composition.

Décision forme vs chemin

Utiliser une forme primitive quand...	Utiliser <path> quand...
La forme est une figure géométrique de base	La forme a des courbes, des contours complexes
La lisibilité compte (un cercle doit ressembler à <circle>)	Il faut minimiser le nombre d'éléments
Il faut animer des propriétés individuelles (r, cx, cy)	Combiner plusieurs formes en un seul élément
La forme sera modifiée par programmation	Exporter d'outils de conception (les chemins sont universels)

Valeurs par défaut de style

Définissez ces attributs sur l'élément racine <svg> pour éviter la répétition sur les enfants :

Attribut	Défaut icône	Défaut logo	Pourquoi
fill	none	variable	Les icônes sont généralement tracées, les logos sont remplis
stroke	currentColor	none ou currentColor	Hérite de la couleur du texte du parent
stroke-width	2 (sur 24x24)	variable	Épaisseur cohérente entre les icônes
stroke-linecap	round	round ou butt	Les extrémités arrondies sont plus nettes aux petites tailles
stroke-linejoin	round	round ou miter	Empêche les pointes acérées aux jonctions

currentColor est votre ami. Il permet au SVG d'hériter de la couleur de l'élément parent, rendant les icônes thématisables sans CSS supplémentaire.

Épaisseur de trait relative à la viewBox

stroke-width est en unités de viewBox, pas en pixels. Définissez-la toujours par rapport aux dimensions de votre canevas :

viewBox	stroke-width typique	Résultat visuel
16x16	1,5	~9,4% du canevas
24x24	2	~8,3% du canevas
32x32	2-2,5	~6,3-7,8% du canevas
48x48	3	~6,3% du canevas
256x256	16	~6,3% du canevas

Quand convertir les formes en chemins

Convertir quand :

• Combinaison de plusieurs formes en un seul chemin composé (opérations booléennes)
• La forme doit faire partie d'une composition de chemin plus grande
• Distribution à des environnements qui ne supportent que <path>
• Optimisation pour un nombre minimal d'éléments DOM

Garder comme formes quand :

• La lisibilité du code est importante (un <circle> est auto-documentant)
• Vous devez animer des propriétés spécifiques (animer r sur un cercle est plus propre que d'animer les données d'un chemin)
• Le SVG sera modifié par programmation

Modèle de conversion rect arrondi vers chemin

Les paramètres d'arc ici sont sujets à erreur. Utilisez ceci comme référence :

<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> devient : -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule: evenodd vs nonzero

Utilisez evenodd lorsque vous avez des formes composées avec des trous. C'est plus simple car vous n'avez pas à vous soucier de la direction d'enroulement :

<!-- Donut avec evenodd (la direction n'a pas d'importance) -->
<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

Avec nonzero (par défaut), le cercle intérieur doit s'enrouler dans la direction opposée pour créer le trou.

Processus de conception de logo

Lors de la création de logos (pas d'icônes), suivez ce processus :

0. Ne résoudre qu'une lacune matérielle dans le brief. Réutilisez une direction de marque fournie, un nom, un public cible, des cas d'usage et des références. Si un choix manquant changerait fondamentalement le design, posez une question courte en utilisant l'interaction supportée par l'hôte actuel. Utilisez une valeur par défaut réversible et sensée pour les choix secondaires ; ne présumez jamais d'un outil de question particulier et n'exigez pas d'entretien de tableau d'humeur.

1. Explorez plusieurs métaphores, pas plusieurs mises en page d'une seule métaphore. La diversité conceptuelle est plus importante que les variations de mise en page. Suivez le processus d'idéation complet dans references/logo-techniques.md, qui couvre le brainstorming spécifique au domaine, les exigences de diversité catégorielle et l'évitement des clichés.

2. Garantissez la variété structurelle. Chaque ensemble de logos doit couvrir plusieurs catégories d'approche, pas seulement plusieurs métaphores dans le même style. Incluez au moins une de chaque colonne lorsque vous présentez 5 options ou plus : une approche typographique/signature, une icône symbolique, une marque géométrique abstraite et un hybride lettre-métaphore. Voir le tableau de diversité catégorielle dans references/logo-techniques.md.

3. Prévisualisez via l'hôte disponible. Lorsqu'une comparaison progressive est utile, utilisez assets/preview.html de cette compétence et la structure dans references/editing-workflow.md. Affichez ou inspectez la prévisualisation via un visualiseur supporté par l'hôte actuel ; ne présumez pas qu'un navigateur, une commande shell ou une fenêtre au premier plan est disponible. Si aucun visualiseur ne peut l'afficher, indiquez la limite et fournissez les fichiers SVG et un aperçu rendu là où c'est supporté. Ne prétendez jamais qu'une prévisualisation non observée a été vérifiée visuellement.

4. Pour les logos colorés, créez toujours une variante -dark.svg. Les bords bleu marine foncé (#1E3A5F) qui rendent bien sur fond blanc disparaissent sur fond sombre. Les variantes sombres nécessitent des bords plus clairs (#4B8BBE), des anneaux plus clairs (#3B6B8A) et des centres blanc cassé (#E2E8F0).

5. Planifiez votre budget vertical avant de dessiner. Sur un canevas 32x32 avec 3 éléments empilés, vous avez environ 30 unités utilisables. Esquissez d'abord la distribution verticale (ex. : boîte=12, espace=2, couche=5, espace=2, couche=5) pour éviter les coupures aux bords de la viewBox.

Anti-patrons

À ne pas faire	À faire à la place
Codage en dur de width="24" height="24" sans viewBox	Utilisez toujours viewBox ; ajoutez width/height uniquement si nécessaire
Définir fill="none" sur un groupe <g>	Définissez fill sur les éléments individuels ou la racine <svg>
Utiliser des unités px à l'intérieur du SVG	Les coordonnées SVG sont sans unité ; elles correspondent à la viewBox
Inclure des métadonnées d'éditeur (<sodipodi:*>, <inkscape:*>)	Supprimez tout le superflu de l'éditeur
Utiliser <text> pour les signatures de logo dans les SVG distribués	Convertissez le texte en chemins pour la portabilité
Imbriquer les transformations sur trois niveaux	Aplatissez les transformations en coordonnées de chemin
Utiliser xlink:href	Utilisez href (xlink est déprécié)
Oublier xmlns sur les fichiers SVG autonomes	Incluez toujours xmlns="http://www.w3.org/2000/svg"
Utiliser une précision décimale au-delà de 2-3 chiffres pour les icônes	Arrondissez à 2 décimales pour les icônes, 3 maximum pour les illustrations complexes

Références croisées

• Le design du site web ou de l'interface environnante n'est pas le travail de cette compétence. Renvoyez-le à la personne qui a demandé le graphisme, avec le rôle et les contraintes de taille du graphisme, et suivez la typographie, les couleurs et la hiérarchie visuelle établies ou le système de conception existant du projet entre-temps.
• Si editorial-svg-diagrams est disponible, utilisez-le pour les figures qui expliquent des concepts, relations, processus ou systèmes. Sinon, gardez la sortie de cette compétence centrée sur les graphismes de marque et d'interface, et expliquez la capacité de diagramme indisponible si le résultat demandé en dépend.