All SVG elements are in the namespace http://www.w3.org/2000/svg. SVG 1.1
(Second Edition, 2011) defines 80 elements and SVG 2 (Candidate Recommendation) 63; SVG 2
takes its filter elements from the Filter Effects Module and its clipping and masking from
CSS Masking.
The tables below mark each element’s versions: “1.1” only in SVG 1.1, “2” only in
SVG 2, and nothing when both have it. Their attributes are on the
attributes and properties page, and the
d attribute on the path data
page.
Structure
| Element | Purpose | Only in |
|---|---|---|
svg | The root element, and a nested viewport with its own coordinate system (viewBox, width, height). | |
g | Groups elements so they share attributes and transforms. | |
defs | Holds elements that are defined for later reference and not drawn directly. | |
symbol | A reusable graphic with its own viewBox, drawn only through use. | |
use | Draws a copy of another element, referenced by href (xlink:href in 1.1). | |
switch | Draws only its first child whose conditions (requiredFeatures, requiredExtensions, systemLanguage) are met. | |
a | A hyperlink around other elements. | |
image | Draws a raster image or another SVG file into a rectangle. | |
foreignObject | Holds content from another namespace, usually XHTML, laid out in a rectangle. | |
view | A named view (viewBox, preserveAspectRatio) that a URL fragment can select. |
Description and metadata
| Element | Purpose | Only in |
|---|---|---|
title | A short text alternative for its parent, often shown as a tooltip. | |
desc | A longer text description of its parent. | |
metadata | Metadata in other XML vocabularies, such as RDF and Dublin Core. | |
script | A script, inline or by reference. | |
style | A style sheet, normally CSS. |
Shapes
| Element | Geometry | Only in |
|---|---|---|
path | d: any outline of lines, curves and arcs. | |
rect | x, y, width, height, and corner radii rx, ry. | |
circle | cx, cy, r. | |
ellipse | cx, cy, rx, ry. | |
line | x1, y1, x2, y2. | |
polyline | points: an open list of x, y pairs. | |
polygon | points: a closed list of x, y pairs. |
Text
| Element | Purpose | Only in |
|---|---|---|
text | A block of text, positioned by x, y, dx, dy and rotate. | |
tspan | A run of text inside text with its own position or style. | |
textPath | Text laid along a path. | |
tref | Copies the text of another element. | 1.1 |
altGlyph | Draws text with chosen glyphs. | 1.1 |
altGlyphDef | Defines a set of substitute glyphs. | 1.1 |
altGlyphItem | One candidate set of glyphs in an altGlyphDef. | 1.1 |
glyphRef | Refers to one glyph for altGlyphDef. | 1.1 |
Paint servers, clipping and masking
| Element | Purpose | Only in |
|---|---|---|
linearGradient | A gradient along a line from (x1, y1) to (x2, y2). | |
radialGradient | A gradient between a focal circle (fx, fy, and in SVG 2 fr) and an outer circle (cx, cy, r). | |
stop | A colour stop of a gradient: offset, stop-color, stop-opacity. | |
pattern | A tile of graphics repeated to fill or stroke a shape. | |
clipPath | Shapes whose outline clips other elements. | |
mask | Graphics whose luminance (or alpha, with CSS Masking’s mask-type) sets the opacity of other elements. | |
marker | A symbol drawn at the vertices of paths, lines, polylines and polygons. |
Filters
filter holds a chain of filter primitives; each reads from in
(and in2) and writes to result.
| Element | Purpose | Only in |
|---|---|---|
filter | The filter itself, its region and the primitives inside it. | |
feBlend | Blends two inputs with a blend mode. | |
feColorMatrix | Applies a colour matrix: matrix, saturate, hueRotate or luminanceToAlpha. | |
feComponentTransfer | Remaps each channel through its feFunc children. | |
feFuncR, feFuncG, feFuncB, feFuncA | The transfer function for red, green, blue or alpha: identity, table, discrete, linear or gamma. | |
feComposite | Porter–Duff compositing of two inputs: over, in, out, atop, xor, arithmetic (the Filter Effects Module adds lighter). | |
feConvolveMatrix | A convolution with a kernel matrix. | |
feDiffuseLighting | Diffuse lighting from a light source child, using alpha as a bump map. | |
feSpecularLighting | Specular lighting from a light source child. | |
feDistantLight | A light from a direction (azimuth, elevation). | |
fePointLight | A light at a point (x, y, z). | |
feSpotLight | A spot light with a direction and cone. | |
feDisplacementMap | Moves pixels of one input by the values of another. | |
feDropShadow | A drop shadow in one step. | 2 |
feFlood | Fills the region with flood-color and flood-opacity. | |
feGaussianBlur | A Gaussian blur with stdDeviation. | |
feImage | An image or element as input. | |
feMerge | Stacks its feMergeNode inputs over each other. | |
feMergeNode | One input of feMerge. | |
feMorphology | Thickens (dilate) or thins (erode). | |
feOffset | Shifts the input by dx, dy. | |
feTile | Repeats the input to fill the region. | |
feTurbulence | Perlin noise: turbulence or fractalNoise. |
Animation
| Element | Purpose | Only in |
|---|---|---|
animate | Animates an attribute or property over time. | |
set | Sets an attribute to a value for a time. | |
animateMotion | Moves an element along a path. | |
mpath | Refers to the path an animateMotion follows. | |
animateTransform | Animates a transform: translate, scale, rotate, skewX or skewY. | |
animateColor | Animates a colour. Deprecated in 1.1; animate does the same. | 1.1 |
Fonts, colour profiles and cursors (SVG 1.1 only)
| Element | Purpose | Only in |
|---|---|---|
font | An SVG font: glyph outlines defined in SVG. | 1.1 |
glyph | One glyph of an SVG font, with its outline in d. | 1.1 |
missing-glyph | The glyph drawn for characters the font lacks. | 1.1 |
hkern | A horizontal kerning pair. | 1.1 |
vkern | A vertical kerning pair. | 1.1 |
font-face | Font description, like CSS @font-face. | 1.1 |
font-face-src | Sources of a font face. | 1.1 |
font-face-uri | A font file by URI. | 1.1 |
font-face-format | Format of a font-face-uri. | 1.1 |
font-face-name | A locally installed font by name. | 1.1 |
color-profile | An ICC colour profile by reference. | 1.1 |
cursor | A custom pointer image. | 1.1 |
SVG 2 removed these, with tref, the altGlyph family and
animateColor. Web fonts in CSS (WOFF) took the place of SVG fonts.
SVG Tiny 1.2
SVG Tiny 1.2 (2008), the mobile profile, has a subset of SVG 1.1 and a few elements of
its own that neither SVG 1.1 nor SVG 2 has: textArea and
tbreak (wrapped text and line breaks), solidColor (a
single-colour paint server), audio, video and
animation (embedded media and animations), discard (removes
an element at a time), handler and listener (event handling)
and prefetch (loading hints).