Référence SVG
Les dessins et images SVG sont créés avec différents éléments. Retrouvez ici un tableau des éléments SVG avec leurs descriptions et attributs.
SVG (Scalable Vector Graphics) est un langage de balisage basé sur XML permettant de décrire des graphiques bidimensionnels qui restent nets quelle que soit leur taille. Chaque forme, dégradé, filtre ou animation dans un document SVG est écrit avec un élément dédié. Cette page est un tableau de référence rapide de tous les éléments SVG standard, regroupés par fonction, avec une courte description et les attributs les plus fréquemment utilisés. Utilisez-la en complément des chapitres pratiques — commencez par l'introduction à SVG et SVG dans HTML5 — et revenez ici lorsque vous avez besoin de vous rappeler ce que fait un élément ou quels attributs il accepte.
Dans la colonne Attributs, une entrée comme attr="…" décrit la valeur attendue par un attribut modifiable, tandis que presentation attributes: … liste les groupes d'attributs de présentation stylisables avec CSS que l'élément prend en charge. Les éléments dépréciés sont signalés et, lorsqu'il en existe un, pointent vers le remplacement moderne.
Formes de base
Primitives géométriques utilisées pour dessiner les graphiques visibles d'un SVG.
| Élément | Description | Attributs |
|---|---|---|
<circle> | Dessine un cercle. Voir le chapitre cercle SVG. | cx="centre sur l'axe x du cercle" cy="centre sur l'axe y du cercle" r="rayon du cercle (obligatoire)" presentation attributes: Color, FillStroke, Graphics |
<ellipse> | Dessine une ellipse. Voir le chapitre ellipse SVG. | cx="centre sur l'axe x de l'ellipse" cy="centre sur l'axe y de l'ellipse" rx="rayon le long de l'axe x (obligatoire)" ry="rayon le long de l'axe y (obligatoire)" presentation attributes: Color, FillStroke, Graphics |
<line> | Dessine une ligne droite entre deux points. Voir le chapitre ligne SVG. | x1="point de départ x de la ligne" y1="point de départ y de la ligne" x2="point d'arrivée x de la ligne" y2="point d'arrivée y de la ligne" presentation attributes: Color, FillStroke, Graphics, Markers |
<path> | Dessine une forme arbitraire à partir d'une série de commandes de tracé. Voir le chapitre tracé SVG. | d="un ensemble de commandes spécifiant le tracé" pathLength="la longueur totale du tracé" transform="une liste de transformations" presentation attributes: Color, FillStroke, Graphics, Markers |
<polygon> | Dessine une forme fermée à partir d'une liste d'au moins trois points. Voir le chapitre polygone SVG. | points="les points du polygone (au moins trois sont obligatoires)" fill-rule="fait partie des attributs de présentation FillStroke" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Dessine une forme ouverte composée de segments de ligne droite connectés. Voir le chapitre polyligne SVG. | points="les points sur la polyligne (obligatoire)" presentation attributes: Color, FillStroke, Graphics, Markers |
<rect> | Dessine un rectangle, avec des coins éventuellement arrondis. Voir le chapitre rectangle SVG. | x="coin supérieur gauche sur l'axe x du rectangle" y="coin supérieur gauche sur l'axe y du rectangle" rx="rayon du coin sur l'axe x (pour arrondir l'élément)" ry="rayon du coin sur l'axe y (pour arrondir l'élément)" width="largeur du rectangle (obligatoire)" height="hauteur du rectangle (obligatoire)" presentation attributes: Color, FillStroke, Graphics |
Texte
Éléments pour le rendu et la mise en page du texte à l'intérieur d'un SVG. Voir le chapitre texte SVG.
| Élément | Description | Attributs |
|---|---|---|
<text> | Affiche une suite de texte à une position donnée. | x="une liste de positions sur l'axe x ; la nième position est attribuée au nième caractère (par défaut 0)" y="une liste de positions sur l'axe y (voir x ; par défaut 0)" dx="longueurs déplaçant les caractères par rapport à la position absolue du dernier glyphe (voir x)" dy="longueurs déplaçant les caractères par rapport à la position absolue du dernier glyphe (voir x)" rotate="une liste de rotations ; la nième rotation est appliquée au nième caractère" textLength="une longueur cible que le visualiseur essaie d'ajuster en modifiant l'espacement et/ou les glyphes (par défaut : la longueur normale du texte)" lengthAdjust="ce qu'il faut ajuster pour correspondre à textLength : 'spacing' ou 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Dispose le texte le long de la forme d'un élément <path> référencé. | href="référence URI vers le tracé sur lequel le texte est disposé" |
<tspan> | Marque une sous-portion de texte à l'intérieur d'un <text> ou <tspan> pour la styliser ou la repositionner. | Identique à l'élément <text>, et en plus : href="référence à un élément <text>" |
Dégradés et motifs
Serveurs de peinture qui remplissent ou tracent des formes avec des dégradés ou des tuiles répétées. Voir les chapitres dégradés linéaires et dégradés radiaux.
| Élément | Description | Attributs |
|---|---|---|
<linearGradient> | Définit un dégradé qui fait la transition des couleurs le long d'un vecteur droit. | id="un identifiant unique utilisé pour référencer ce dégradé (obligatoire pour le référencer)" gradientUnits="'userSpaceOnUse' ou 'objectBoundingBox' (par défaut 'objectBoundingBox')" gradientTransform="la transformation à appliquer au dégradé" x1="début x du vecteur de dégradé (nombre ou % ; par défaut 0%)" y1="début y du vecteur de dégradé (par défaut 0%)" x2="fin x du vecteur de dégradé (par défaut 100%)" y2="fin y du vecteur de dégradé (par défaut 0%)" spreadMethod="'pad', 'reflect' ou 'repeat'" href="référence à un autre dégradé dont les attributs et les arrêts sont hérités par défaut (récursif)" |
<radialGradient> | Définit un dégradé qui fait la transition des couleurs vers l'extérieur depuis un point central. | gradientUnits="'userSpaceOnUse' ou 'objectBoundingBox' (par défaut 'objectBoundingBox')" gradientTransform="transformation à appliquer au dégradé" cx="centre du dégradé (nombre ou % ; par défaut 50%)" cy="centre du dégradé (par défaut 50%)" r="rayon du dégradé (par défaut 50%)" fx="point focal du dégradé (par défaut 0%)" fy="point focal du dégradé (par défaut 0%)" spreadMethod="'pad', 'reflect' ou 'repeat'" href="référence à un autre dégradé dont les attributs et les arrêts sont hérités par défaut (récursif)" |
<stop> | Définit une couleur et son décalage dans un dégradé. | offset="décalage pour cet arrêt, de 0 à 1 ou de 0% à 100% (obligatoire)" stop-color="couleur de cet arrêt" stop-opacity="opacité de cet arrêt, de 0 à 1" |
<pattern> | Définit une tuile graphique répétée pour remplir ou tracer une forme. | id="identifiant unique utilisé pour référencer ce motif (obligatoire)" patternUnits="'userSpaceOnUse' ou 'objectBoundingBox' ; la seconde valeur fait de x, y, width, height une fraction (ou %) de la boîte englobante de l'objet utilisant le motif" patternContentUnits="'userSpaceOnUse' ou 'objectBoundingBox'" patternTransform="une transformation appliquée à l'ensemble du motif" x="décalage du motif depuis le coin supérieur gauche (par défaut 0)" y="décalage du motif depuis le coin supérieur gauche (par défaut 0)" width="largeur de la tuile du motif (par défaut 100%)" height="hauteur de la tuile du motif (par défaut 100%)" viewBox="la région visible dans cette zone de dessin : min-x, min-y, width, height (séparés par des espaces ou des virgules)" href="référence à un autre motif dont les attributs sont hérités par défaut et dont les enfants sont hérités (récursif)" |
Filtres
Primitives de filtre (la famille fe*) et le conteneur <filter> qui se combinent pour produire des effets graphiques tels que des flous, des éclairages et des décalages de couleur. Voir les chapitres introduction aux filtres SVG, effets de flou et ombres portées.
| Élément | Description | Attributs |
|---|---|---|
<filter> | Conteneur qui regroupe des primitives de filtre en un effet de filtre réutilisable et nommé. | |
<feBlend> | Fusionne deux images d'entrée en utilisant un mode de fusion. | mode="mode de fusion : normal|multiply|screen|darken|lighten" in="première entrée : SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="la seconde entrée pour la fusion" result |
<feColorMatrix> | Applique une transformation matricielle aux canaux de couleur et alpha de l'entrée. | in="identifie l'image d'entrée" type="matrix|saturate|hueRotate|luminanceToAlpha" values="les valeurs pour le type choisi" result |
<feComponentTransfer> | Remappe chaque canal couleur/alpha indépendamment en utilisant ses enfants feFunc*. | in="identifie l'image d'entrée" result |
<feFuncA> | Définit la fonction de transfert pour le canal alpha de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncR> | Définit la fonction de transfert pour le canal rouge de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncG> | Définit la fonction de transfert pour le canal vert de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncB> | Définit la fonction de transfert pour le canal bleu de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feComposite> | Combine deux entrées en utilisant les opérateurs de composition Porter-Duff ou arithmétiques. | in="identifie la première image d'entrée" in2="identifie la seconde image d'entrée" operator="over|in|out|atop|xor|arithmetic" k1="coefficient arithmétique" k2="coefficient arithmétique" k3="coefficient arithmétique" k4="coefficient arithmétique" result |
<feConvolveMatrix> | Applique une matrice de convolution (noyau) pour des effets comme l'accentuation ou l'embossage. | in="identifie l'image d'entrée" order="nombre de colonnes et de lignes dans la matrice du noyau" kernelMatrix="liste des valeurs du noyau" divisor="diviseur pour les valeurs du noyau" bias="valeur de biais" targetX="position x de la matrice de convolution" targetY="position y de la matrice de convolution" edgeMode="duplicate|wrap|none" kernelUnitLength="longueur du noyau" preserveAlpha="true|false" result |
<feDiffuseLighting> | Éclaire l'image d'entrée comme une surface diffuse (mate) en utilisant son canal alpha comme carte de relief. | in="identifie l'image d'entrée" surfaceScale="facteur d'échelle de la surface" diffuseConstant="constante de réflexion diffuse" kernelUnitLength="longueur du noyau" result |
<feDisplacementMap> | Déplace les pixels d'une entrée en utilisant les canaux de couleur d'une autre. | in="identifie la première image d'entrée" in2="identifie la seconde image d'entrée" scale="facteur d'échelle" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Définit une source lumineuse distante (directionnelle) pour un filtre d'éclairage. | azimuth="angle d'azimut" elevation="angle d'élévation" |
<feFlood> | Remplit la région du filtre avec une couleur et une opacité uniques. | flood-color="couleur de remplissage" flood-opacity="opacité de remplissage" result |
<feGaussianBlur> | Applique un flou gaussien à l'image d'entrée. | in="identifie l'image d'entrée" stdDeviation="écart type pour le flou" edgeMode="duplicate|wrap|none" result |
<feImage> | Charge une image externe ou un élément référencé comme entrée de filtre. | href="référence URI vers l'image" preserveAspectRatio="'none' ou l'une des 9 combinaisons 'xVALYVAL'" result |
<feMerge> | Empile plusieurs entrées en couches, en utilisant des enfants <feMergeNode>. | result |
<feMergeNode> | Identifie une couche d'entrée pour un parent <feMerge>. | in="identifie l'image d'entrée" |
<feMorphology> | Amincit (érode) ou épaissit (dilate) l'image d'entrée. | in="identifie l'image d'entrée" operator="erode|dilate" radius="rayon de l'effet" result |
<feOffset> | Décale l'image d'entrée d'un certain décalage (la base des ombres portées). | in="identifie l'image d'entrée" dx="décalage horizontal" dy="décalage vertical" result |
<fePointLight> | Définit une source de lumière ponctuelle pour un filtre d'éclairage. | x="position x de la source lumineuse" y="position y de la source lumineuse" z="position z de la source lumineuse" |
<feSpecularLighting> | Éclaire l'image d'entrée comme une surface spéculaire (brillante) en utilisant son canal alpha comme carte de relief. | in="identifie l'image d'entrée" surfaceScale="facteur d'échelle de la surface" specularConstant="constante de réflexion spéculaire" specularExponent="exposant spéculaire" kernelUnitLength="longueur du noyau" result |
<feSpotLight> | Définit une source de projecteur pour un filtre d'éclairage. | x="position x de la source lumineuse" y="position y de la source lumineuse" z="position z de la source lumineuse" pointsAtX="coordonnée x vers laquelle pointe la lumière" pointsAtY="coordonnée y vers laquelle pointe la lumière" pointsAtZ="coordonnée z vers laquelle pointe la lumière" specularExponent="exposant spéculaire" limitingConeAngle="angle du cône limitant" |
<feTile> | Répète (en tuiles) une entrée de filtre pour remplir la région du filtre. | in="identifie l'image d'entrée" result |
<feTurbulence> | Génère de la turbulence Perlin ou du bruit fractal (pour des textures comme les nuages ou le marbre). | baseFrequency="fréquence de base" numOctaves="nombre d'octaves" seed="valeur d'amorçage" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
Animation
Éléments qui modifient les valeurs d'attributs au fil du temps. Ils sont des enfants de l'élément qu'ils animent (ou le référencent).
| Élément | Description | Attributs |
|---|---|---|
<animate> | Anime un seul attribut ou propriété d'un élément sur un intervalle de temps. | attributeName="le nom de l'attribut cible" by="une valeur de décalage relatif" from="la valeur de départ" to="la valeur finale" dur="la durée" repeatCount="le nombre de fois que l'animation s'exécute" |
<animateMotion> | Déplace un élément le long d'un tracé de mouvement au fil du temps. | calcMode="mode d'interpolation : 'discrete', 'linear', 'paced' ou 'spline'" path="le tracé de mouvement" keyPoints="à quelle distance l'objet se déplace le long du tracé pour chaque valeur keyTimes" rotate="transformation de rotation" href="référence URI vers l'élément <path> spécifiant le tracé de mouvement" |
<animateTransform> | Anime un attribut de transformation (translation, mise à l'échelle, rotation, inclinaison) au fil du temps. | by="valeur de décalage relatif" from="valeur de départ" to="valeur finale" type="type de transformation à changer au fil du temps : 'translate', 'scale', 'rotate', 'skewX' ou 'skewY'" |
<mpath> | Référence un élément <path> externe à utiliser comme tracé de mouvement pour <animateMotion>. | href="référence URI vers l'élément de tracé" |
<set> | Définit un attribut à une valeur pour une durée spécifiée (une animation sans interpolation). | attributeName="le nom de l'attribut cible" to="la valeur à définir" begin="quand le changement commence" dur="combien de temps la valeur est maintenue" |
Conteneurs et structure
Éléments qui regroupent, référencent, définissent ou organisent le contenu plutôt que de le dessiner directement.
| Élément | Description | Attributs |
|---|---|---|
<a> | Crée un lien vers une page web, un fichier, une adresse e-mail, un emplacement ou toute autre URL. | href target |
<clipPath> | Définit un chemin de découpe qui limite la région d'un élément qui est rendue. | clipPathUnits="'userSpaceOnUse' ou 'objectBoundingBox' (par défaut 'userSpaceOnUse')" |
<defs> | Stocke des objets graphiques à référencer et réutiliser plus tard (non rendus directement). | |
<desc> | Fournit une description textuelle pour un élément graphique ou conteneur SVG (pour l'accessibilité). | |
<foreignObject> | Intègre du contenu provenant d'un autre espace de noms XML (tel que HTML) dans un SVG, permettant au navigateur de le rendre. | x y width height |
<g> | Regroupe des éléments afin que les transformations et les attributs de présentation leur soient appliqués ensemble. | id="nom du groupe" fill="couleur de remplissage du groupe" opacity="opacité du groupe" presentation attributes: All |
<image> | Intègre une image raster ou SVG dans le document. | x="coin supérieur gauche sur l'axe x de l'image" y="coin supérieur gauche sur l'axe y de l'image" width="largeur de l'image (obligatoire)" height="hauteur de l'image (obligatoire)" href="chemin vers l'image (obligatoire)" presentation attributes: Color, Graphics, Images, Viewports |
<marker> | Définit un graphique (comme une pointe de flèche) dessiné aux sommets d'une ligne, d'une polyligne ou d'un tracé via marker-start, marker-mid et marker-end. Définissez le marqueur avant de le référencer. | markerUnits="'strokeWidth' ou 'userSpaceOnUse' ; avec 'strokeWidth', une unité égale une largeur de trait, sinon le marqueur ne se met pas à l'échelle (par défaut 'strokeWidth')" refX="position où le marqueur se connecte au sommet (par défaut 0)" refY="position où le marqueur se connecte au sommet (par défaut 0)" orient="'auto' ou un angle ; 'auto' fait de l'axe x une tangente du sommet (par défaut 'auto')" markerWidth="largeur du marqueur (par défaut 3)" markerHeight="hauteur du marqueur (par défaut 3)" viewBox="les limites du viewport : min-x, min-y, width, height (séparés par des espaces ou des virgules)" presentation attributes: All |
<mask> | Définit un masque alpha combinant opacité et découpe ; les textes, formes ou tracés définissent quelles parties sont visibles (l'état par défaut est entièrement transparent). | maskUnits="système de coordonnées pour x, y, width, height sur le masque : 'userSpaceOnUse' ou 'objectBoundingBox' (par défaut 'objectBoundingBox')" maskContentUnits="système de coordonnées pour le contenu du masque : 'userSpaceOnUse' ou 'objectBoundingBox' (par défaut 'userSpaceOnUse')" x="plan de découpe du masque (par défaut -10%)" y="plan de découpe du masque (par défaut -10%)" width="plan de découpe du masque (par défaut 120%)" height="plan de découpe du masque (par défaut 120%)" |
<metadata> | Contient des métadonnées lisibles par machine (telles que RDF) sur le document ; non rendu. | |
<script> | Intègre ou référence un script (généralement JavaScript) pour l'interactivité. | href="URI d'un script externe" type="type MIME du langage de script" |
<style> | Intègre une feuille de style CSS dans le document SVG. | type="type MIME de la feuille de style (text/css)" media="requête média à laquelle les styles s'appliquent" |
<svg> | Le conteneur racine (ou imbriqué) qui définit un fragment de document SVG et son système de coordonnées. | x="coin supérieur gauche lors de l'intégration (par défaut 0)" y="coin supérieur gauche lors de l'intégration (par défaut 0)" width="largeur du fragment (par défaut 100%)" height="hauteur du fragment (par défaut 100%)" viewBox="la région visible dans cette zone de dessin : min-x, min-y, width, height (séparés par des espaces ou des virgules)" preserveAspectRatio="'none' ou l'une des 9 combinaisons 'xVALYVAL' où VAL est 'min', 'mid' ou 'max' (par défaut xMidYMid)" xmlns="http://www.w3.org/2000/svg" presentation attributes: All |
<switch> | Rend uniquement le premier enfant dont les attributs de test (tels que la langue ou la prise en charge des fonctionnalités) sont évalués à vrai. | |
<symbol> | Définit un modèle réutilisable qui n'est pas rendu tant qu'il n'est pas instancié par un élément <use>. | |
<title> | Fournit un nom accessible court (souvent affiché comme une infobulle) pour son élément parent. | |
<use> | Clone et rend un élément référencé (tel que <svg>, <g> ou une forme) par son id. | x="coin supérieur gauche sur l'axe x de l'élément cloné" y="coin supérieur gauche sur l'axe y de l'élément cloné" width="largeur de l'élément cloné" height="hauteur de l'élément cloné" href="référence URI vers l'élément cloné" presentation attributes: All |
<view> | Définit une vue nommée (un viewBox et un rapport d'aspect) qui peut être ciblée par une URL de fragment. | viewBox preserveAspectRatio zoomAndPan="'magnify' ou 'disable' (par défaut magnify)" |
Éléments dépréciés
Ces éléments sont dépréciés dans SVG 2 et doivent être évités dans les nouveaux documents. Lorsqu'un remplacement moderne existe, il est mentionné dans la description.
| Élément | Description | Attributs |
|---|---|---|
<altGlyph> | Contrôlait les glyphes utilisés pour rendre des données de caractères spécifiques. Déprécié dans SVG 2 ; pas de remplacement direct (utilisez du texte Unicode dans <text>/<tspan>). | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Définissait un ensemble de substitution pour les glyphes. Déprécié dans SVG 2 ; pas de remplacement. | id |
<altGlyphItem> | Définissait un ensemble de candidats pour les substitutions de glyphes. Déprécié dans SVG 2 ; pas de remplacement. | id |
<color-profile> | Décrivait un profil de couleur appliqué à une image. Déprécié dans SVG 2 ; utilisez la règle CSS @color-profile et la fonction color() à la place. | local="identifiant unique pour un profil de couleur stocké localement" name="nom du profil" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href="URI d'une ressource de profil ICC" |
<cursor> | Définissait un curseur personnalisé indépendant de la plateforme. Déprécié dans SVG 2 ; utilisez la propriété CSS cursor à la place. | x="coin supérieur gauche sur l'axe x du curseur (par défaut 0)" y="coin supérieur gauche sur l'axe y du curseur (par défaut 0)" href="URI de l'image à utiliser comme curseur" |
<font> | Définissait une police SVG. Déprécié dans SVG 2 ; utilisez CSS @font-face avec des formats de polices web à la place. | |
<font-face> | Décrivait les caractéristiques d'une police. Déprécié dans SVG 2 ; utilisez la règle CSS @font-face à la place. | |
<font-face-format> | Spécifiait le type de police référencé par son parent <font-face-uri>. Déprécié dans SVG 2 ; utilisez l'indication format() de CSS @font-face à la place. | |
<font-face-name> | Référençait une police locale par son nom. Déprécié dans SVG 2 ; utilisez la fonction local() de CSS @font-face à la place. | |
<font-face-src> | Reflétait le descripteur src des règles CSS @font-face. Déprécié dans SVG 2 ; utilisez le descripteur src de CSS @font-face à la place. | |
<font-face-uri> | Référençait une définition distante de la police actuelle. Déprécié dans SVG 2 ; utilisez src: url() de CSS @font-face à la place. | |
<glyph> | Définissait le graphique d'un glyphe particulier dans une police SVG. Déprécié dans SVG 2 ; pas de remplacement. | |
<glyphRef> | Référençait un glyphe à utiliser comme alternative. Déprécié dans SVG 2 ; pas de remplacement. | |
<hkern> | Définissait des paires de crénage horizontal et des ajustements dans une police SVG. Déprécié dans SVG 2 ; utilisez plutôt le crénage des polices web. | |
<missing-glyph> | Définissait le glyphe utilisé lorsqu'un caractère ne peut pas être affiché dans une police SVG. Déprécié dans SVG 2 ; pas de remplacement. | |
<tref> | Référençait et rendait le contenu textuel d'un autre élément. Déprécié dans SVG 2 ; pas de remplacement. | href="référence URI vers le contenu textuel référencé" |
<vkern> | Définissait des paires de crénage vertical dans une police SVG. Déprécié dans SVG 2 ; utilisez plutôt le crénage des polices web. |
Exercice
Pratique
Quelles sont certaines des fonctionnalités qui peuvent être incluses dans les SVG lors du codage en HTML ?
Was this page helpful?