SVG Reference
SVG drawings and images are created with different elements. Here, you can find a table of SVG elements with corresponding descriptions and attributes.
SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional graphics that stay crisp at any size. Each shape, gradient, filter, or animation in an SVG document is written with a dedicated element. This page is a quick lookup table of every standard SVG element, grouped by purpose, with a short description and the attributes you most often reach for. Use it as a companion to the hands-on chapters — start with SVG introduction and SVG in HTML5 — and jump back here when you need to recall what an element does or which attributes it accepts.
In the Attributes column, an entry like attr="…" describes the value a writable attribute expects, while presentation attributes: … lists the groups of CSS-styleable presentation attributes the element supports. Deprecated elements are marked and, where one exists, point to the modern replacement.
Basic shapes
Geometric primitives used to draw the visible graphics of an SVG.
| Element | Description | Attributes |
|---|---|---|
<circle> | Draws a circle. See the SVG circle chapter. | 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 |
<ellipse> | Draws an ellipse. See the SVG ellipse chapter. | cx="x-axis center of the ellipse" cy="y-axis center of the ellipse" rx="radius along the x-axis (required)" ry="radius along the y-axis (required)" presentation attributes: Color, FillStroke, Graphics |
<line> | Draws a straight line between two points. See the SVG line chapter. | 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 |
<path> | Draws an arbitrary shape from a series of path commands. See the SVG path chapter. | 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 |
<polygon> | Draws a closed shape from a list of at least three points. See the SVG polygon chapter. | points="the points of the polygon (at least three are required)" fill-rule="part of the FillStroke presentation attributes" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Draws an open shape made of connected straight line segments. See the SVG polyline chapter. | points="the points on the polyline (required)" presentation attributes: Color, FillStroke, Graphics, Markers |
<rect> | Draws a rectangle, optionally with rounded corners. See the SVG rectangle chapter. | x="x-axis top-left corner of the rectangle" y="y-axis top-left corner of the rectangle" rx="x-axis corner radius (to round the element)" ry="y-axis corner radius (to round the element)" width="width of the rectangle (required)" height="height of the rectangle (required)" presentation attributes: Color, FillStroke, Graphics |
Text
Elements for rendering and laying out text inside an SVG. See the SVG text chapter.
| Element | Description | Attributes |
|---|---|---|
<text> | Draws a run of text at a given position. | x="a list of x-axis positions; the nth position is given to the nth character (default 0)" y="a list of y-axis positions (see x; default 0)" dx="lengths that move characters relative to the last glyph's absolute position (see x)" dy="lengths that move characters relative to the last glyph's absolute position (see x)" rotate="a list of rotations; the nth rotation is applied to the nth character" textLength="a target length the viewer tries to fit the text into by adjusting spacing and/or glyphs (default: the text's normal length)" lengthAdjust="what to adjust to fit textLength: 'spacing' or 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Lays out text along the shape of a referenced <path> element. | href="URI reference to the path the text is laid out on" |
<tspan> | Marks up a sub-span of text inside a <text> or <tspan> to style or reposition it. | Identical to the <text> element, and in addition: href="reference to a <text> element" |
Gradients and patterns
Paint servers that fill or stroke shapes with gradients or repeating tiles. See the linear gradients and radial gradients chapters.
| Element | Description | Attributes |
|---|---|---|
<linearGradient> | Defines a gradient that transitions colors along a straight vector. | id="a unique id used to reference this gradient (required to reference it)" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox' (default 'objectBoundingBox')" gradientTransform="the transformation to apply to the gradient" x1="x start of the gradient vector (number or %; 0% default)" y1="y start of the gradient vector (0% default)" x2="x end of the gradient vector (100% default)" y2="y end of the gradient vector (0% default)" spreadMethod="'pad', 'reflect' or 'repeat'" href="reference to another gradient whose attributes and stops are inherited as defaults (recursive)" |
<radialGradient> | Defines a gradient that transitions colors outward from a center point. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox' (default 'objectBoundingBox')" gradientTransform="transformation to apply to the gradient" cx="center of the gradient (number or %; 50% default)" cy="center 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', 'reflect' or 'repeat'" href="reference to another gradient whose attributes and stops are inherited as defaults (recursive)" |
<stop> | Defines one color and its offset within a gradient. | offset="offset for this stop, 0 to 1 or 0% to 100% (required)" stop-color="color of this stop" stop-opacity="opacity of this stop, 0 to 1" |
<pattern> | Defines a graphics tile that is repeated to fill or stroke a shape. | id="unique id used to reference this pattern (required)" patternUnits="'userSpaceOnUse' or 'objectBoundingBox'; the second value makes x, y, width, height a fraction (or %) of the bounding box of the object using the pattern" patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="a transformation applied to the whole pattern" x="pattern offset from the top-left corner (default 0)" y="pattern 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 region seen in this drawing area: min-x, min-y, width, height (separated by spaces or commas)" href="reference to another pattern whose attributes are inherited as defaults and whose children are inherited (recursive)" |
Filters
Filter primitives (the fe* family) and the <filter> container that combine to produce graphical effects such as blurs, lighting, and color shifts. See the SVG filters introduction, blur effects, and drop shadows chapters.
| Element | Description | Attributes |
|---|---|---|
<filter> | Container that groups filter primitives into a reusable, named filter effect. | |
<feBlend> | Blends two input images together using a blend mode. | mode="blend mode: normal|multiply|screen|darken|lighten" in="first input: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input to the blend" result |
<feColorMatrix> | Applies a matrix transformation to the color and alpha channels of the input. | in="identifies the input image" type="matrix|saturate|hueRotate|luminanceToAlpha" values="the values for the chosen type" result |
<feComponentTransfer> | Remaps each color/alpha channel independently using its feFunc* children. | in="identifies the input image" result |
<feFuncA> | Defines the transfer function for the alpha channel of <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncR> | Defines the transfer function for the red channel of <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncG> | Defines the transfer function for the green channel of <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncB> | Defines the transfer function for the blue channel of <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feComposite> | Combines two inputs using Porter-Duff or arithmetic compositing operators. | 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> | Applies a convolution matrix (kernel) for effects like sharpening or embossing. | 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> | Lights the input image as a diffuse (matte) surface using its alpha as a bump map. | in="identifies the input image" surfaceScale="surface scale factor" diffuseConstant="diffuse reflection constant" kernelUnitLength="length of the kernel" result |
<feDisplacementMap> | Displaces the pixels of one input using the color channels of another. | 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> | Defines a distant (directional) light source for a lighting filter. | azimuth="azimuth angle" elevation="elevation angle" |
<feFlood> | Fills the filter region with a single color and opacity. | flood-color="flood color" flood-opacity="flood opacity" result |
<feGaussianBlur> | Applies a Gaussian blur to the input image. | in="identifies the input image" stdDeviation="standard deviation for the blur" edgeMode="duplicate|wrap|none" result |
<feImage> | Loads an external image or referenced element as a filter input. | href="URI reference to the image" preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL'" result |
<feMerge> | Stacks several inputs into layers, using <feMergeNode> children. | result |
<feMergeNode> | Identifies one input layer for a parent <feMerge>. | in="identifies the input image" |
<feMorphology> | Thins (erodes) or fattens (dilates) the input image. | in="identifies the input image" operator="erode|dilate" radius="radius of the effect" result |
<feOffset> | Shifts the input image by a given offset (the basis of drop shadows). | in="identifies the input image" dx="horizontal offset" dy="vertical offset" result |
<fePointLight> | Defines a point light source for a lighting filter. | x="x position of the light source" y="y position of the light source" z="z position of the light source" |
<feSpecularLighting> | Lights the input image as a specular (shiny) surface using its alpha as a bump map. | in="identifies the input image" surfaceScale="surface scale factor" specularConstant="specular reflection constant" specularExponent="specular exponent" kernelUnitLength="length of the kernel" result |
<feSpotLight> | Defines a spotlight source for a lighting filter. | x="x position of the light source" y="y position of the light source" z="z position of the light source" pointsAtX="x coordinate the light points at" pointsAtY="y coordinate the light points at" pointsAtZ="z coordinate the light points at" specularExponent="specular exponent" limitingConeAngle="limiting cone angle" |
<feTile> | Repeats (tiles) a filter input to fill the filter region. | in="identifies the input image" result |
<feTurbulence> | Generates Perlin turbulence or fractal noise (for textures like clouds or marble). | baseFrequency="base frequency" numOctaves="number of octaves" seed="seed value" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
Animation
Elements that change attribute values over time. They are children of the element they animate (or reference it).
| Element | Description | Attributes |
|---|---|---|
<animate> | Animates a single attribute or property of an element over a time interval. | 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 runs" |
<animateMotion> | Moves an element along a motion path over time. | calcMode="interpolation mode: 'discrete', 'linear', 'paced' or 'spline'" path="the motion path" keyPoints="how far the object moves along the path for each keyTimes value" rotate="rotation transformation" href="URI reference to the <path> element specifying the motion path" |
<animateTransform> | Animates a transform attribute (translate, scale, rotate, skew) over time. | by="relative offset value" from="starting value" to="ending value" type="transform type to change over time: 'translate', 'scale', 'rotate', 'skewX' or 'skewY'" |
<mpath> | References an external <path> element to use as the motion path for <animateMotion>. | href="URI reference to the path element" |
<set> | Sets an attribute to a value for a specified duration (a non-interpolated animation). | attributeName="the name of the target attribute" to="the value to set" begin="when the change starts" dur="how long the value is held" |
Containers and structure
Elements that group, reference, define, or organize content rather than draw it directly.
| Element | Description | Attributes |
|---|---|---|
<a> | Creates a link to a web page, file, email address, location, or any other URL. | href target |
<clipPath> | Defines a clipping path that limits the region of an element that is rendered. | clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox' (default 'userSpaceOnUse')" |
<defs> | Stores graphical objects to be referenced and reused later (not rendered directly). | |
<desc> | Provides a text-only description for an SVG graphics or container element (for accessibility). | |
<foreignObject> | Embeds content from another XML namespace (such as HTML) inside an SVG, letting the browser render it. | x y width height |
<g> | Groups elements so transforms and presentation attributes apply to them together. | id="name of the group" fill="fill color for the group" opacity="opacity for the group" presentation attributes: All |
<image> | Embeds a raster or SVG image inside the document. | 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 |
<marker> | Defines a graphic (such as an arrowhead) drawn at the vertices of a line, polyline, or path via marker-start, marker-mid and marker-end. Define the marker before referencing it. | markerUnits="'strokeWidth' or 'userSpaceOnUse'; with 'strokeWidth' one unit equals one stroke width, otherwise the marker does not scale (default 'strokeWidth')" refX="position where the marker connects with the vertex (default 0)" refY="position where the marker connects with the vertex (default 0)" orient="'auto' or an angle; 'auto' makes 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="the viewport bounds: min-x, min-y, width, height (separated by spaces or commas)" presentation attributes: All |
<mask> | Defines an alpha mask combining opacity and clipping; text, shapes, or paths set which parts show through (the default state is fully transparent). | maskUnits="coordinate system for x, y, width, height on the mask: 'userSpaceOnUse' or 'objectBoundingBox' (default 'objectBoundingBox')" maskContentUnits="coordinate system for the mask's content: '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> | Holds machine-readable metadata (such as RDF) about the document; not rendered. | |
<script> | Embeds or references a script (typically JavaScript) for interactivity. | href="URI of an external script" type="script language MIME type" |
<style> | Embeds a CSS stylesheet inside the SVG document. | type="stylesheet MIME type (text/css)" media="media query the styles apply to" |
<svg> | The root (or a nested) container that defines an SVG document fragment and its coordinate system. | x="top-left corner when embedded (default 0)" y="top-left corner when embedded (default 0)" width="width of the fragment (default 100%)" height="height of the fragment (default 100%)" viewBox="the region seen in this drawing area: min-x, min-y, width, height (separated by spaces or commas)" preserveAspectRatio="'none' or any of the 9 'xVALYVAL' combinations where VAL is 'min', 'mid' or 'max' (default xMidYMid)" xmlns="http://www.w3.org/2000/svg" presentation attributes: All |
<switch> | Renders only the first child whose test attributes (such as language or feature support) evaluate true. | |
<symbol> | Defines a reusable template that is not rendered until instantiated by a <use> element. | |
<title> | Provides a short accessible name (often shown as a tooltip) for its parent element. | |
<use> | Clones and renders a referenced element (such as <svg>, <g>, or a shape) by its id. | 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> | Defines a named view (a viewBox and aspect ratio) that can be targeted by a fragment URL. | viewBox preserveAspectRatio zoomAndPan="'magnify' or 'disable' (default magnify)" |
Deprecated elements
These elements are deprecated in SVG 2 and should be avoided in new documents. Where a modern replacement exists, it is noted in the description.
| Element | Description | Attributes |
|---|---|---|
<altGlyph> | Controlled the glyphs used to render specific character data. Deprecated in SVG 2; no direct replacement (use Unicode text in <text>/<tspan>). | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Defined a substitution set for glyphs. Deprecated in SVG 2; no replacement. | id |
<altGlyphItem> | Defined a candidate set for glyph substitutions. Deprecated in SVG 2; no replacement. | id |
<color-profile> | Described a color profile applied to an image. Deprecated in SVG 2; use the CSS @color-profile at-rule and color() function instead. | local="unique ID for a locally stored color profile" name="profile name" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href="URI of an ICC profile resource" |
<cursor> | Defined a platform-independent custom cursor. Deprecated in SVG 2; use the CSS cursor property instead. | x="x-axis top-left corner of the cursor (default 0)" y="y-axis top-left corner of the cursor (default 0)" href="URI of the image to use as the cursor" |
<font> | Defined an SVG font. Deprecated in SVG 2; use CSS @font-face with web font formats instead. | |
<font-face> | Described a font's characteristics. Deprecated in SVG 2; use the CSS @font-face rule instead. | |
<font-face-format> | Specified the font type referenced by its parent <font-face-uri>. Deprecated in SVG 2; use the CSS @font-face format() hint instead. | |
<font-face-name> | Referenced a local font by name. Deprecated in SVG 2; use the CSS @font-face local() function instead. | |
<font-face-src> | Mirrored the src descriptor of CSS @font-face rules. Deprecated in SVG 2; use the CSS @font-face src descriptor instead. | |
<font-face-uri> | Referenced a remote definition of the current font. Deprecated in SVG 2; use the CSS @font-face src: url() instead. | |
<glyph> | Defined the graphics for a particular glyph in an SVG font. Deprecated in SVG 2; no replacement. | |
<glyphRef> | Referenced a glyph to use as an alternate. Deprecated in SVG 2; no replacement. | |
<hkern> | Defined horizontal kerning pairs and adjustments in an SVG font. Deprecated in SVG 2; rely on web-font kerning instead. | |
<missing-glyph> | Defined the glyph used when a character cannot be displayed in an SVG font. Deprecated in SVG 2; no replacement. | |
<tref> | Referenced and rendered the text content of another element. Deprecated in SVG 2; no replacement. | href="URI reference to the referenced text content" |
<vkern> | Defined vertical kerning pairs in an SVG font. Deprecated in SVG 2; rely on web-font kerning instead. |
Practice
Practice
What are some of the features that can be included in SVGs while coding in HTML?
Was this page helpful?