Elysia Tools
Navigation mobile
Media
Exemples SVG
Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG
Exemples
Entrées de cette collection
Formes SVG de Base
Démonstration de formes SVG de base avec rectangle, cercle, ellipse, ligne, polyligne et éléments polygonaux
Difficulté
1/10
Temps estimé
5 min
Étiquettes
beginner, basic-shapes, geometric
SVG · 1.5 KB · 360×240
- elements
- ["rect","circle","ellipse","line","polyline","polygon","text"]
- features
- ["Basic shapes","Stroke and fill","Text labels"]
- complexity
- beginner
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Propriétés de Contour et Remplissage
Démonstration des propriétés de contour et remplissage SVG avec divers styles de ligne et motifs
Difficulté
2/10
Temps estimé
10 min
Étiquettes
beginner, styling, appearance
SVG · 1.9 KB · 360×240
- elements
- ["rect","circle","path","line"]
- features
- ["Stroke styles","Fill patterns","Dash arrays","Line caps"]
- complexity
- beginner
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- false
Transformations SVG
Exemples de transformation SVG incluant translation, rotation, mise à échelle et opérations d'inclinaison
Difficulté
4/10
Temps estimé
15 min
Étiquettes
intermediate, transformation, positioning
SVG · 1.2 KB · 360×240
- elements
- ["rect","circle","g","transform"]
- features
- ["Translation","Rotation","Scaling","Skewing","Matrix transforms"]
- complexity
- intermediate
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Dégradés SVG
Démonstrations de dégradés linéaires et radiaux avec multiples arrêts de couleur et effets
Difficulté
3/10
Temps estimé
12 min
Étiquettes
intermediate, colors, visual-effects
SVG · 1.1 KB · 360×240
- elements
- ["rect","circle","linearGradient","radialGradient","stop"]
- features
- ["Linear gradients","Radial gradients","Color stops","Gradient fills"]
- complexity
- intermediate
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- true
- hasFilters
- false
- hasText
- true
Motifs SVG
Définitions et applications de motifs SVG pour créer des arrière-plans répétitifs et textures
Difficulté
5/10
Temps estimé
18 min
Étiquettes
intermediate, design, repeating
SVG · 1.0 KB · 360×240
- elements
- ["rect","pattern","circle","path","polygon"]
- features
- ["Pattern fills","Repeating patterns","Custom textures","Pattern transforms"]
- complexity
- intermediate
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Marqueurs SVG
Éléments de marqueur SVG pour créer des pointes de flèche personnalisées et points terminaux sur les chemins et lignes
Difficulté
4/10
Temps estimé
15 min
Étiquettes
intermediate, decoration, paths
SVG · 1.1 KB · 360×240
- elements
- ["path","line","polyline","marker","defs"]
- features
- ["Custom markers","Arrowheads","Path endpoints","Marker positioning"]
- complexity
- intermediate
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Texte sur Chemin
Texte positionné le long des chemins SVG avec divers effets de texte et options de style
Difficulté
5/10
Temps estimé
20 min
Étiquettes
intermediate, text, typography
SVG · 1012 B · 360×240
- elements
- ["text","textPath","path","defs"]
- features
- ["Text on path","Path text alignment","Text spacing","Text effects"]
- complexity
- intermediate
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Découpage et Masquage
Démonstrations de découpage et masquage pour créer des formes complexes et effets
Difficulté
7/10
Temps estimé
25 min
Étiquettes
advanced, masking, shapes
SVG · 1.4 KB · 360×240
- elements
- ["rect","circle","clipPath","mask","image","g"]
- features
- ["Clipping paths","Masks","Alpha masks","Complex shapes"]
- complexity
- advanced
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Filtres SVG
Effets de filtre SVG incluant flou, ombre, manipulation de couleur et effets visuels
Difficulté
8/10
Temps estimé
30 min
Étiquettes
advanced, visual-effects, filters
SVG · 1.6 KB · 360×240
- elements
- ["rect","circle","filter","feGaussianBlur","feDropShadow","feColorMatrix","image"]
- features
- ["Gaussian blur","Drop shadows","Color manipulation","Filter chaining"]
- complexity
- advanced
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- true
- hasText
- true
Animation SVG
Animations SMIL démontrant les changements de couleur, transformations et effets de mouvement
Difficulté
9/10
Temps estimé
35 min
Étiquettes
advanced, animation, interactive
SVG · 1.0 KB · 360×240
- elements
- ["circle","rect","animate","animateTransform","text"]
- features
- ["SMIL animation","Color animation","Transform animation","Motion paths"]
- complexity
- advanced
- viewBox
- 0 0 360 240
- hasAnimation
- true
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Design SVG Responsive
Techniques de design SVG responsive avec layouts adaptables et comportements de mise à échelle
Difficulté
6/10
Temps estimé
20 min
Étiquettes
intermediate, responsive, layout
SVG · 834 B · 360×240
- elements
- ["svg","g","rect","circle","text","symbol","use"]
- features
- ["Responsive design","Adaptive layouts","Scaling behavior","ViewBox management"]
- complexity
- intermediate
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Symboles SVG et Réutilisation
Symboles SVG et éléments réutilisables avec l'élément use pour des graphiques efficaces
Difficulté
5/10
Temps estimé
18 min
Étiquettes
intermediate, architecture, efficiency
SVG · 834 B · 360×240
- elements
- ["symbol","use","defs","g","rect","circle","path"]
- features
- ["Reusable symbols","Use element","Symbol instances","Graphic libraries"]
- complexity
- intermediate
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Intégration ForeignObject
Intégration de contenu HTML dans SVG utilisant foreignObject pour du contenu mixte
Difficulté
10/10
Temps estimé
40 min
Étiquettes
advanced, integration, html
SVG · 1.1 KB · 360×240
- elements
- ["foreignObject","div","p","style","rect","text"]
- features
- ["HTML integration","ForeignObject","Mixed content","Styling integration"]
- complexity
- advanced
- viewBox
- 0 0 360 240
- hasAnimation
- false
- hasGradients
- false
- hasFilters
- false
- hasText
- true
Outils
Outils souvent utilisés avec cet exemple
Associé