Dégradés et motifs SVG avancés : Créer des effets complexes
Maîtrisez les dégradés et motifs SVG pour des effets visuels sophistiqués. Apprenez les techniques de dégradés linéaires, radiaux et de motifs pour des designs professionnels.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- SVG prend en charge les dégradés linéaires, les dégradés radiaux et les motifs en tuiles répétitives — tous définis en XML
- Les dégradés multi-stops avec transparence permettent des effets de fondu, projecteur et lueur fluides
-
Les motifs utilisent
patternUnitsetpatternTransformpour un contrôle total sur le pavage et la rotation - Les dégradés peuvent être imbriqués dans les motifs et animés avec SMIL ou CSS pour des visuels dynamiques
- Optimisez en limitant les stops de dégradé et en évitant les motifs complexes dans les contextes animés
Au-delà des couleurs unies
Les dégradés et motifs SVG ajoutent de la profondeur et de l'intérêt visuel aux graphiques vectoriels. Ce guide explore les techniques avancées pour créer des effets professionnels.
Dégradés linéaires
Structure de base
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="100%" stop-color="#0000ff"/>
</linearGradient>
</defs>
<rect fill="url(#gradient1)" width="200" height="100"/>Contrôle de la direction
<!-- Horizontal -->
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%">
<!-- Vertical -->
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%">
<!-- Diagonal -->
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%">
<!-- Angle personnalisé (45 degrés) -->
<linearGradient gradientTransform="rotate(45)">Dégradés multi-stops
<linearGradient id="rainbow">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="17%" stop-color="#ff8000"/>
<stop offset="33%" stop-color="#ffff00"/>
<stop offset="50%" stop-color="#00ff00"/>
<stop offset="67%" stop-color="#0000ff"/>
<stop offset="83%" stop-color="#4b0082"/>
<stop offset="100%" stop-color="#8f00ff"/>
</linearGradient>Pro Tip: Utilisez gradientTransform="rotate(45)" au lieu de calculer manuellement x1/y1/x2/y2 pour les dégradés angulaires. C'est plus lisible et plus facile à ajuster par la suite.
Dégradés radiaux
Radial de base
<radialGradient id="radial1" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>Centre décalé (effet projecteur)
<radialGradient id="spotlight"
cx="30%" cy="30%"
fx="25%" fy="25%"
r="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#333333"/>
</radialGradient>Dégradés elliptiques
<radialGradient id="ellipse"
cx="50%" cy="50%"
rx="50%" ry="25%">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealTransparence des dégradés
Effets de fondu
<linearGradient id="fade-out">
<stop offset="0%" stop-color="#000000" stop-opacity="1"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</linearGradient>Centre transparent
<radialGradient id="glow">
<stop offset="0%" stop-color="#00ff00" stop-opacity="0.8"/>
<stop offset="50%" stop-color="#00ff00" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#00ff00" stop-opacity="0"/>
</radialGradient>"Les dégradés et motifs sont le pont entre le flat design et le photoréalisme dans les graphiques vectoriels — la subtilité d'un stop-opacity bien placé peut faire ou défaire une composition.
Bases des motifs
Motif simple
<defs>
<pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="3" fill="#333"/>
</pattern>
</defs>
<rect fill="url(#dots)" width="200" height="200"/>Motif rayé
<pattern id="stripes" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="5" height="10" fill="#ff0000"/>
<rect x="5" width="5" height="10" fill="#ffffff"/>
</pattern>Motif complexe
<pattern id="plaid" width="40" height="40" patternUnits="userSpaceOnUse">
<!-- Base -->
<rect width="40" height="40" fill="#e0e0e0"/>
<!-- Rayures horizontales -->
<rect width="40" height="10" fill="#c0c0c0"/>
<rect y="20" width="40" height="10" fill="#c0c0c0"/>
<!-- Rayures verticales -->
<rect width="10" height="40" fill="#a0a0a0" opacity="0.5"/>
<rect x="20" width="10" height="40" fill="#a0a0a0" opacity="0.5"/>
</pattern>Transformations de motifs
Motif pivoté
<pattern id="diagonal"
width="10" height="10"
patternTransform="rotate(45)"
patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" stroke="#000" stroke-width="2"/>
</pattern>Motif mis à l'échelle
<pattern id="scaled"
width="20" height="20"
patternTransform="scale(0.5)"
patternUnits="userSpaceOnUse">
<!-- contenu du motif à 2x, affiché à 1x -->
</pattern>
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeTechniques avancées
Dégradé dans un motif
<defs>
<linearGradient id="grad">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<pattern id="gradient-dots" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="8" fill="url(#grad)"/>
</pattern>
</defs>Motif avec fond en dégradé
<defs>
<radialGradient id="bg-grad">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#cccccc"/>
</radialGradient>
<pattern id="textured" width="4" height="4" patternUnits="userSpaceOnUse">
<rect width="4" height="4" fill="url(#bg-grad)"/>
<circle cx="2" cy="2" r="1" fill="#000" opacity="0.1"/>
</pattern>
</defs>Effet bruit/grain
<filter id="noise">
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4"/>
<feColorMatrix type="saturate" values="0"/>
</filter>
<rect filter="url(#noise)" opacity="0.1" width="100%" height="100%"/>Animation CSS avec dégradés
Dégradé animé
<svg>
<defs>
<linearGradient id="animated-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000">
<animate attributeName="stop-color"
values="#ff0000;#00ff00;#0000ff;#ff0000"
dur="4s" repeatCount="indefinite"/>
</stop>
<stop offset="100%" stop-color="#0000ff">
<animate attributeName="stop-color"
values="#0000ff;#ff0000;#00ff00;#0000ff"
dur="4s" repeatCount="indefinite"/>
</stop>
</linearGradient>
</defs>
</svg>Les dégradés animés via SMIL (<animate>) fonctionnent nativement dans tous les navigateurs modernes sans JavaScript. Pour des animations de dégradés plus complexes — comme le déplacement des positions de stops dans le temps — combinez SMIL avec les transitions CSS sur l'élément parent.
Considérations de performance
Conseils d'optimisation
- Limitez les stops de dégradé
- Évitez les motifs complexes dans les animations
- Utilisez will-change avec parcimonie
- Prévoyez des couleurs de remplacement
- Testez sur les appareils mobiles
Quand rastériser
Envisagez la rastérisation quand :
- Motifs extrêmement complexes
- Effets de filtre lourds
- Applications critiques en performance
- Graphiques statiques
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealVectoSolve et les dégradés
Gestion des dégradés
VectoSolve gère la conversion des dégradés :
- Extraction des couleurs de dégradé
- Préservation des stops de couleur
- Sortie SVG propre
Travail post-conversion sur les dégradés
Après la vectorisation :
- Vérifiez les dégradés extraits
- Ajustez les stops si nécessaire
- Optimisez pour votre cas d'utilisation
- Ajoutez les motifs manuellement
Conclusion
Les dégradés et motifs SVG ouvrent la porte à des effets visuels sophistiqués sans les limitations du raster. Maîtrisez ces techniques pour créer de la profondeur, de la texture et de l'intérêt visuel dans vos graphiques vectoriels. Commencez avec des vecteurs propres depuis VectoSolve, puis enrichissez avec des dégradés et motifs selon vos besoins.
Créer des effets vectoriels complexes
| Type de dégradé/motif | Élément SVG | Cas d'utilisation courant |
|---|---|---|
| Dégradé linéaire | <linearGradient> | Arrière-plans, boutons, effets de ciel |
| Dégradé radial | <radialGradient> | Projecteurs, lueurs, fondus circulaires |
| Motif répétitif | <pattern> | Textures, tissus, arrière-plans en tuiles |
| Dégradé mesh | <meshGradient> (SVG2) | Mélange de couleurs photoréaliste |
Sources et lectures complémentaires
- MDN Web Docs: SVG Gradients — Référence complète pour les éléments linearGradient, radialGradient et pattern
- W3C SVG 2: Paint Servers — Spécification officielle pour les dégradés, motifs et mesh gradients SVG
- CSS-Tricks: SVG Gradients — Tutoriels visuels sur la création et l'animation de dégradés et motifs SVG
- Smashing Magazine: Advanced SVG — Articles techniques approfondis sur les transformations de motifs et la composition de dégradés