Référence SVG
Les dessins et images SVG sont créés avec différents éléments. Ici, vous pouvez trouver un tableau des éléments SVG avec leurs descriptions et attributs correspondants.
Éléments SVG
| Element | Description | Attributes |
|---|---|---|
<a> | Crée un lien vers d’autres pages web, des fichiers, des adresses e-mail, des emplacements sur la même page ou toute autre URL. | href target |
<altGlyph> | Contrôle les glyphes utilisés pour rendre des données de caractères spécifiques. Obsolète dans SVG 2. | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Spécifie un ensemble de substitution pour les glyphes. Obsolète dans SVG 2. | id |
<altGlyphItem> | Spécifie un ensemble candidat pour les substitutions de glyphes. Obsolète dans SVG 2. | id |
<animate> | Spécifie comment l’attribut d’un élément change au fil du temps. | attributeName="the name of the target attribute" by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of times the animation will take place" |
<animateMotion> | Fait déplacer un élément référencé le long d’un chemin de mouvement. | calcMode="interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'" path="motion path" keyPoints="how far the object will move along the motion path for each keyTimes values" rotate="rotation transformation" href = URI reference to the <path> element specifying the motion path |
<animateTransform> | Anime un attribut de transformation sur l’élément cible, permettant aux animations de contrôler la translation, la rotation, la mise à l’échelle et/ou le cisaillement. | by="relative offset value" from="starting value" to="ending value" type="transformation type which is to have its values change in time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
<circle> | Spécifie un cercle. | cx="x-axis center of the circle" cy="y-axis center of the circle" r="radius of the circle". Required. presentation attributes: Color, FillStroke, Graphics |
<clipPath> | Spécifie un chemin de découpe. | clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. default: 'userSpaceOnUse' |
<color-profile> | Spécifie une description du profil de couleur utilisé pour l’image. | local="unique ID for a color profile stored locally" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href = URI of an ICC profile resource |
<cursor> | Spécifie un curseur personnalisé indépendant de la plateforme. Obsolète dans SVG 2. | x="x-axis top-left corner of the cursor (default is 0)" y="y-axis top-left corner of the cursor (default is 0)" href = URI of the image to use as the cursor |
<defs> | Stocke des objets graphiques qui seront utilisés plus tard. | |
<desc> | Fournit une description textuelle uniquement pour tout élément graphique ou conteneur SVG. | |
<ellipse> | Spécifie une ellipse. | cx="x-axis center of the ellipse" cy="y-axis center of the ellipse" rx="length of the ellipse's radius along the x-axis". Required. ry="length of the ellipse's radius along the y-axis". Required. presentation attributes: Color, FillStroke, Graphics |
<feBlend> | Mélange deux objets ensemble. | mode="image blending modes normal|multiply|screen|darken|lighten" in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input image to the blending operation" |
<feColorMatrix> | Primitive de filtre SVG. | in type="matrix|saturate|hueRotate|luminanceToAlpha" values result |
<feComposite> | Primitive de filtre SVG. | in="identifies the first input image" in2="identifies the second input image" operator="over|in|out|atop|xor|arithmetic" k1="arithmetic coefficient" k2="arithmetic coefficient" k3="arithmetic coefficient" k4="arithmetic coefficient" result |
<feConvolveMatrix> | Primitive de filtre SVG. | in="identifies the input image" order="number of columns and rows in the kernel matrix" kernelMatrix="list of kernel values" divisor="divisor for the kernel values" bias="bias value" targetX="x position of the convolution matrix" targetY="y position of the convolution matrix" edgeMode="duplicate|wrap|none" kernelUnitLength="length of the kernel" preserveAlpha="true|false" result |
<feDiffuseLighting> | Primitive de filtre SVG. | in="identifies the input image" surfaceScale="surface scale factor" diffuseConstant="diffuse reflection constant" kernelUnitLength="length of the kernel" result |
<feDisplacementMap> | Primitive de filtre SVG. | in="identifies the first input image" in2="identifies the second input image" scale="scale factor" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Primitive de filtre SVG. | azimuth="azimuth angle" elevation="elevation angle" |
<feFlood> | Primitive de filtre SVG. | flood-color="flood color" flood-opacity="flood opacity" result |
<feFuncA> | Filtre SVG. Sous-élément de feComponentTransfer. | |
<feFuncB> | Filtre SVG. Sous-élément de feComponentTransfer. | |
<feFuncG> | Filtre SVG. Sous-élément de feComponentTransfer. | |
<feFuncR> | Filtre SVG. Sous-élément de feComponentTransfer. | |
<feGaussianBlur> | Filtre SVG. Crée un flou gaussien sur l’image. | in="identifies the input image" stdDeviation="standard deviation for the blur" edgeMode="duplicate|wrap|none" result |
<feImage> | Filtre SVG. | href = URI reference to the image preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL'" result |
<feMerge> | Filtre SVG. Crée des calques d’image. | result |
<feMergeNode> | Filtre SVG. Sous-élément de feMerge. | in="identifies the input image" |
<feMorphology> | Filtre SVG. Effectue un « amincissement » ou un « épaississement ». | in="identifies the input image" operator="erode|dilate" radius="radius of the effect" result |
<feOffset> | Filtre SVG. Décale l’image d’entrée. | in="identifies the input image" dx="horizontal offset" dy="vertical offset" result |
<fePointLight> | Filtre SVG. | x="x position of the light source" y="y position of the light source" z="z position of the light source" |
<feSpecularLighting> | Filtre SVG. | in="identifies the input image" surfaceScale="surface scale factor" specularConstant="specular reflection constant" specularExponent="specular exponent" kernelUnitLength="length of the kernel" result |
<feSpotLight> | Filtre SVG. | x="x position of the light source" y="y position of the light source" z="z position of the light source" pointsAtX="x coordinate of the point at which the light points" pointsAtY="y coordinate of the point at which the light points" pointsAtZ="z coordinate of the point at which the light points" specularExponent="specular exponent" limitingConeAngle="limiting cone angle" |
<feTile> | Filtre SVG. | in="identifies the input image" result |
<feTurbulence> | Filtre SVG. | baseFrequency="base frequency" numOctaves="number of octaves" seed="seed value" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
<filter> | Spécifie un effet de filtre personnalisé. | |
<font> | Spécifie une police. Obsolète dans SVG 2. | |
<font-face> | Décrit les caractéristiques d’une police. Obsolète dans SVG 2. | |
<font-face-format> | Spécifie le type de police référencé par son <font-face-uri> parent. | |
<font-face-name> | Référence une police locale par son nom. | |
<font-face-src> | Correspond au descripteur src dans les règles CSS @font-face. | |
<font-face-uri> | Spécifie une définition distante de la police actuelle. | |
<foreignObject> | Permet aux agents utilisateurs d’offrir des fonctionnalités de rendu graphique en plus de celles définies dans la spécification. | |
<g> | Regroupe des éléments ensemble. | id="name of the group" fill="fill color for the group" opacity="opacity for the group" presentation attributes: All |
<glyph> | Spécifie les graphiques pour un glyphe particulier. Obsolète dans SVG 2. | |
<glyphRef> | Spécifie un glyphe possible à utiliser. Obsolète dans SVG 2. | |
<hkern> | Spécifie des paires de crénage et des valeurs d’ajustement dans la valeur d’avance horizontale. Obsolète dans SVG 2. | |
<image> | Spécifie une image. | x="x-axis top-left corner of the image" y="y-axis top-left corner of the image" width="width of the image". Required. height="height of the image". Required. href = path to the image. Required. presentation attributes: Color, Graphics, Images, Viewports |
<line> | Spécifie une ligne. | x1="x start point of the line" y1="y start point of the line" x2="x end point of the line" y2="y end point of the line" presentation attributes: Color, FillStroke, Graphics, Markers |
<linearGradient> | Spécifie un dégradé linéaire qui remplit l’objet à l’aide d’un vecteur. | id="a unique id used to reference this pattern. Required to reference it" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="the transformation to apply to the gradient" x1="x start point of the gradient vector (number or % - 0% is default)" y1="y start point of the gradient vector. (0% default)" x2="x end point of the gradient vector. (100% default)" y2="y end point of the gradient vector. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<marker> | Spécifie le graphique qui doit être utilisé pour dessiner des pointes de flèche. Ces éléments peuvent utiliser les attributs de marqueur suivants : « marker-start », « marker-mid » et « marker-end ». Définissez le marqueur avant de le référencer via son URI. | markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used, one unit is equal to one stroke width. Otherwise, the marker will not scale and will use the same view units as the referencing element (default 'strokeWidth')" refx="the position where the marker connects with the vertex (default 0)" refy="the position where the marker connects with the vertex (default 0)" orient="'auto' or an angle to always display the marker at. 'auto' will compute an angle making the x-axis a tangent of the vertex (default 'auto')" markerWidth="width of the marker (default 3)" markerHeight="height of the marker (default 3)" viewBox="SVG viewport’s bound for the current SVG fragment. 4 values are separated by white space or commas. (min x, min y, width, height)" presentation attributes: All |
<mask> | Spécifie un masque alpha, qui est une combinaison de valeurs d’opacité et de découpe. Le masquage est une combinaison de valeurs d’opacité et de découpe. Vous pouvez utiliser du texte, des formes ou des chemins pour définir les sections du masque. L’état par défaut du masque est entièrement transparent. Les graphiques dans un masque déterminent à quel point les portions du masque sont opaques. | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Specifies the coordinate system for x, y, height, and width on the <mask>. (default: 'objectBoundingBox')" maskContentUnits="Specifies the coordinate system for the content of <mask>. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')" x="clipping plane of the mask (default: -10%)" y="clipping plane of the mask (default: -10%)" width="clipping plane of the mask (default: 120%)" height="clipping plane of the mask (default: 120%)" |
<metadata> | Spécifie des métadonnées. | |
<missing-glyph> | Spécifie le glyphe utilisé lorsqu’un caractère ne peut pas être affiché. | |
<mpath> | Référence un élément <path> externe comme définition d’un chemin de mouvement. | |
<path> | Spécifie un chemin. | d="a set of commands specifying the path" pathLength="the total length for the path" transform="a list of transformations" presentation attributes: Color, FillStroke, Graphics, Markers |
<pattern> | Spécifie un objet graphique qui peut être redessiné à des intervalles de coordonnées répétés. | id="unique id used for referencing this pattern." Required. patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, height, width a fraction (or %) of the object bounding box that uses the pattern." patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="the whole pattern can be transformed" x="pattern's offset from the top-left corner (default 0)" y="pattern's offset from the top-left corner. (default 0)" width="width of the pattern tile (default 100%)" height="height of the pattern tile (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" href = reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive |
<polygon> | Spécifie un graphique contenant au moins trois points. | points="the points of the polygon. At least three points are required." fill-rule="part of the FillStroke presentation attributes" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Spécifie toute forme composée uniquement de lignes droites. | points="the points on the polyline". Required. presentation attributes: Color, FillStroke, Graphics, Markers |
<radialGradient> | Spécifie un dégradé radial. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="transformation to apply to the gradient" cx="center point of the gradient (number or % - 50% is default)" cy="center point of the gradient. (50% default)" r="radius of the gradient. (50% default)" fx="focus point of the gradient. (0% default)" fy="focus point of the gradient. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = Reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<rect> | Spécifie un rectangle. | x="x-axis top-left corner of the rectangle" y="y-axis top-left corner of the rectangle" rx="x-axis radius (to round the element)" ry="y-axis radius (to round the element)" width="width of the rectangle". Required. height="height of the rectangle" Required. presentation attributes: Color, FillStroke, Graphics |
<script> | Ajoute des scripts à un document SVG. | |
<set> | Définit la valeur d’un attribut pendant une durée spécifiée. | |
<stop> | Spécifie une couleur et sa position à utiliser sur un dégradé. | offset="offset for this stop (0 to 1/0% to 100%)". Required. stop-color="color of this stop" stop-opacity="opacity of this stop (0 to 1)" |
<style> | Permet d’intégrer des feuilles de style à l’intérieur d’un contenu SVG. | |
<svg> | Crée un fragment d’un document SVG. | x="top left corner when embedded (default 0)" y="top left corner when embedded (default 0)" width="width of the svg fragment (default 100%)" height="height of the svg fragment (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid)" zoomAndPan="'magnify' or 'disable'. (default magnify)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" presentation attributes: All |
<switch> | Permet d’afficher différentes formes selon l’utilisation de la langue par le visualiseur SVG. | |
<symbol> | Spécifie les symboles réutilisables. | |
<text> | Spécifie un texte. | x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. When there are additional characters after the positions run out they are placed after the last character. 0 is default" y="a list of y-axis positions. (see x). 0 is default" dx="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" dy="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" rotate="a list of rotations. The nth rotation is performed on the nth character." textLength="a target length for the text that the SVG viewer will try to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length)" lengthAdjust="tells the viewer what to adjust to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Référence un élément <text> et positionne le texte le long d’un chemin. | |
<title> | Description des éléments du conteneur SVG ou de l’élément graphique. | |
<tref> | Référence un élément <text> dans le document SVG. Obsolète dans SVG 2. | href = URI reference to the referenced text content |
<tspan> | Spécifie un sous-texte à l’intérieur d’un autre élément <tspan> ou d’un élément <text>. | Identical to the <text> element and in addition: href = Reference to a <text> element |
<use> | Utilise une URI pour référencer un <svg>, <g> ou un autre élément graphique doté d’un attribut id unique et le duplique. | x="x-axis top-left corner of the cloned element" y="y-axis top-left corner of the cloned element" width="width of the cloned element" height="height of the cloned element" href = URI reference to the cloned element presentation attributes: All |
<view> | C’est une façon d’afficher l’image. | |
<vkern> | Spécifie des paires de crénage pour des paires de glyphes orientées verticalement. Obsolète dans SVG 2. |
Practice
What are some of the features that can be included in SVGs while coding in HTML?