---
title: Element
slug: Web/SVG/Element
tags:
  - Conception adaptative
  - Elements
  - Graphiques vectoriels
  - Références SVG
  - SVG
  - dessin
  - 'l10n:priority'
translation_of: Web/SVG/Element
---
<p>« <a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a> / <a href="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a> »</p>

<p><span class="seoSummary">Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG.</span></p>

<h2 id="Éléments_SVG_de_A_à_Z">Éléments SVG de A à Z</h2>

<div class="index">
<h3 id="A">A</h3>

<ul>
 <li>{{SVGElement("a")}}</li>
 <li>{{SVGElement("animate")}}</li>
 <li>{{SVGElement("animateMotion")}}</li>
 <li>{{SVGElement("animateTransform")}}</li>
</ul>

<h3 id="C">C</h3>

<ul>
 <li>{{SVGElement("circle")}}</li>
 <li>{{SVGElement("clipPath")}}</li>
 <li>{{SVGElement("color-profile")}}</li>
</ul>

<h3 id="D">D</h3>

<ul>
 <li>{{SVGElement("defs")}}</li>
 <li>{{SVGElement("desc")}}</li>
 <li>{{SVGElement("discard")}}</li>
</ul>

<h3 id="E">E</h3>

<ul>
 <li>{{SVGElement("ellipse")}}</li>
</ul>

<h3 id="F">F</h3>

<ul>
 <li>{{SVGElement("feBlend")}}</li>
 <li>{{SVGElement("feColorMatrix")}}</li>
 <li>{{SVGElement("feComponentTransfer")}}</li>
 <li>{{SVGElement("feComposite")}}</li>
 <li>{{SVGElement("feConvolveMatrix")}}</li>
 <li>{{SVGElement("feDiffuseLighting")}}</li>
 <li>{{SVGElement("feDisplacementMap")}}</li>
 <li>{{SVGElement("feDistantLight")}}</li>
 <li>{{SVGElement("feDropShadow")}}</li>
 <li>{{SVGElement("feFlood")}}</li>
 <li>{{SVGElement("feFuncA")}}</li>
 <li>{{SVGElement("feFuncB")}}</li>
 <li>{{SVGElement("feFuncG")}}</li>
 <li>{{SVGElement("feFuncR")}}</li>
 <li>{{SVGElement("feGaussianBlur")}}</li>
 <li>{{SVGElement("feImage")}}</li>
 <li>{{SVGElement("feMerge")}}</li>
 <li>{{SVGElement("feMergeNode")}}</li>
 <li>{{SVGElement("feMorphology")}}</li>
 <li>{{SVGElement("feOffset")}}</li>
 <li>{{SVGElement("fePointLight")}}</li>
 <li>{{SVGElement("feSpecularLighting")}}</li>
 <li>{{SVGElement("feSpotLight")}}</li>
 <li>{{SVGElement("feTile")}}</li>
 <li>{{SVGElement("feTurbulence")}}</li>
 <li>{{SVGElement("filter")}}</li>
 <li>{{SVGElement("foreignObject")}}</li>
</ul>

<h3 id="G">G</h3>

<ul>
 <li>{{SVGElement("g")}}</li>
</ul>

<h3 id="H">H</h3>

<ul>
 <li>{{SVGElement("hatch")}}</li>
 <li>{{SVGElement("hatchpath")}}</li>
</ul>

<h3 id="I">I</h3>

<ul>
 <li>{{SVGElement("image")}}</li>
</ul>

<h3 id="L">L</h3>

<ul>
 <li>{{SVGElement("line")}}</li>
 <li>{{SVGElement("linearGradient")}}</li>
</ul>

<h3 id="M">M</h3>

<ul>
 <li>{{SVGElement("marker")}}</li>
 <li>{{SVGElement("mask")}}</li>
 <li>{{SVGElement("mesh")}}</li>
 <li>{{SVGElement("meshgradient")}}</li>
 <li>{{SVGElement("meshpatch")}}</li>
 <li>{{SVGElement("meshrow")}}</li>
 <li>{{SVGElement("metadata")}}</li>
 <li>{{SVGElement("mpath")}}</li>
</ul>

<h3 id="P">P</h3>

<ul>
 <li>{{SVGElement("path")}}</li>
 <li>{{SVGElement("pattern")}}</li>
 <li>{{SVGElement("polygon")}}</li>
 <li>{{SVGElement("polyline")}}</li>
</ul>

<h3 id="R">R</h3>

<ul>
 <li>{{SVGElement("radialGradient")}}</li>
 <li>{{SVGElement("rect")}}</li>
</ul>

<h3 id="S">S</h3>

<ul>
 <li>{{SVGElement("script")}}</li>
 <li>{{SVGElement("set")}}</li>
 <li>{{SVGElement("solidcolor")}}</li>
 <li>{{SVGElement("stop")}}</li>
 <li>{{SVGElement("style")}}</li>
 <li>{{SVGElement("svg")}}</li>
 <li>{{SVGElement("switch")}}</li>
 <li>{{SVGElement("symbol")}}</li>
</ul>

<h3 id="T">T</h3>

<ul>
 <li>{{SVGElement("text")}}</li>
 <li>{{SVGElement("textPath")}}</li>
 <li>{{SVGElement("title")}}</li>
 <li>{{SVGElement("tspan")}}</li>
</ul>

<h3 id="U">U</h3>

<ul>
 <li>{{SVGElement("unknown")}}</li>
 <li>{{SVGElement("use")}}</li>
</ul>

<h3 id="V">V</h3>

<ul>
 <li>{{SVGElement("view")}}</li>
</ul>
</div>

<h2 id="Les_éléments_SVG_par_catégories">Les éléments SVG par catégories</h2>

<h3 id="Éléments_danimation">Éléments d'animation</h3>

<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>

<h3 id="Formes_simples">Formes simples</h3>

<p>{{ SVGElement("circle") }}, {{ SVGElement("ellipse") }}, {{ SVGElement("line") }}, {{SVGElement("polygon") }}, {{ SVGElement("polyline") }}, {{ SVGElement("rect") }}</p>

<h3 id="Éléments_conteneurs">Éléments conteneurs</h3>

<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p>

<h3 id="Éléments_descriptifs">Éléments descriptifs</h3>

<p>{{SVGElement("desc") }}, {{ SVGElement("metadata") }}, {{ SVGElement("title") }}</p>

<h3 id="Éléments_primitives_de_filtre">Éléments primitives de filtre</h3>

<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>

<h3 id="Éléments_pour_polices_de_caractères">Éléments pour polices de caractères</h3>

<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>

<h3 id="Éléments_de_dégradés">Éléments de dégradés</h3>

<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>

<h3 id="Éléments_graphiques">Éléments graphiques</h3>

<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>

<h3 id="Éléments_de_référencement_graphique">Éléments de référencement graphique</h3>

<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p>

<h3 id="Éléments_de_source_de_lumière">Éléments de source de lumière</h3>

<p>{{ SVGElement("feDistantLight") }}, {{ SVGElement("fePointLight") }}, {{ SVGElement("feSpotLight") }}</p>

<h3 id="Éléments_sans‑rendu">Éléments sans‑rendu</h3>

<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p>

<h3 id="Éléments_de_service_pour_peinture">Éléments de service pour peinture</h3>

<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p>

<h3 id="Éléments_avec_rendu">Éléments avec rendu</h3>

<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p>

<h3 id="Éléments_de_formes">Éléments de formes</h3>

<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>

<h3 id="Éléments_structurels">Éléments structurels</h3>

<p>{{ SVGElement("defs") }}, {{ SVGElement("g") }}, {{ SVGElement("svg") }}, {{SVGElement("symbol") }}, {{ SVGElement("use") }}</p>

<h3 id="Éléments_de_contenu_textuel">Éléments de contenu textuel</h3>

<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>

<h3 id="Éléments_de_contenu_textuel_enfant">Éléments de contenu textuel enfant</h3>

<p>{{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }}, {{ SVGElement("tref") }}, {{SVGElement("tspan") }}</p>

<h3 id="Éléments_non_catégorisés">Éléments non catégorisés</h3>

<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p>

<h2 id="Élements_obsolètes_et_dépréciés">Élements obsolètes et dépréciés</h2>

<div class="blockIndicator warning">
<p>Les éléments ci-dessous sont dépréciés et ne doivent pas être utilisés. <strong>Vous ne devez absolument pas les utiliser dans des nouveux projets, et vous devez dans la mesure du possible les remplacer dans les vieux projets.</strong> Ils sont listés là uniquemnt à titre informatif.</p>
</div>

<h3 id="A_2">A</h3>

<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p>

<h3 id="C_2">C</h3>

<p>{{SVGElement("cursor")}}</p>

<h3 id="F_2">F</h3>

<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p>

<h3 id="G_2">G</h3>

<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p>

<h3 id="H_2">H</h3>

<p>{{SVGElement("hkern")}}</p>

<h3 id="M_2">M</h3>

<p>{{SVGElement("missing-glyph")}}</p>

<h3 id="T_2">T</h3>

<p>{{SVGElement("tref")}}</p>

<h3 id="V_2">V</h3>

<p>{{SVGElement("vkern")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a></li>
 <li><a href="/fr/docs/Web/SVG/Tutoriel">Tutoriel SVG</a></li>
 <li><a href="/fr/docs/Web/API/Document_Object_Model#SVG_interfaces">Référence des interfaces avec SVG</a></li>
</ul>

<p>{{SVGRef}}</p>