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 elements

Element Description Attributes
<a> Creates a link to other web pages, files, email addresses, locations on the same page, or any other URL. xlink:show
xlink:actuate
xlink:href
target
<altGlyph> Controls the glyphs used to render specific character data. x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> Specifies a substitution set for glyphs. id
<altGlyphItem> Specifies a candidate set of glyph substitutions. id
<animate> Specifies how an element’s attribute changes over time. 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 time the animation will take place"
<animateMotion> Makes a referenced element to move along a motion path. 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"
xlink:href="URI reference to the <path> element specifying the motion path"
<animateTransform> Animates a transformation attribute on the target element, allowing animations to control translation, rotation, scaling, and/or skewing. 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> Specifies a circle. 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> Specifies a clipping path. clip-path
clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. default: 'userSpaceOnUse'
<color-profile> Specifies a description of the color profile used for the image. local="unique ID for a color profile stored locally"
name=""
rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
xlink:href="URI of an ICC profile resource"
<cursor> Specifies a platform-independent custom cursor. x="x-axis top-left corner of the cursor (default is 0)"
y="y-axis top-left corner of the cursor (default is 0)"
xlink:href="URI of the image to use as the cursor"
<defs> Stores graphical objects that will be used later.
<desc> Provides a text-only description for any SVG graphics element or container element.
<ellipse> Specifies an 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> Blends two objects together. 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> SVG filter.
<feComposite> SVG filter.
<feConvolveMatrix> SVG filter.
<feDiffuseLighting> SVG filter.
<feDisplacementMap> SVG filter.
<feDistantLight> SVG filter.
<feFlood> SVG filter.
<feFuncA> SVG filter. Sub-element to feComponentTransfer.
<feFuncB> SVG filter. Sub-element to feComponentTransfer.
<feFuncG> SVG filter. Sub-element to feComponentTransfer.
<feFuncR> SVG filter. Sub-element to feComponentTransfer.
<feGaussianBlur> SVG filter. Creates a Gaussian blur on the image.
<feImage> SVG filter.
<feMerge> SVG filter. Creates image layers.
<feMergeNode> SVG filter. Sub-element to feMerge.
<feMorphology> SVG filter. Performs a "thinning" or "fattening".
<feOffset> SVG filter. Offsets the input image.
<fePointLight> SVG filter.
<feSpecularLighting> SVG filter.
<feSpotLight> SVG filter.
<feTile> SVG filter.
<feTurbulence> SVG filter.
<filter> Specifies a custom filter effect.
<font> Specifies a font.
<font-face> Describes a font’s characteristics.
<font-face-format> Specifies the font type referenced by its parent <font-face-uri>.
<font-face-name> References a local font by name.
<font-face-src> Corresponds to the src descriptor within CSS @font-face rules.
<font-face-uri> Spesifies a remote definition of the current font
<foreignObject> Allows user agents to offer graphical rendering features besides those defined within the specification.
<g> Groups elements together. id="name of the group"
fill="fill color for the group"
opacity="opacity for the group"
presentation attributes: All
<glyph> Specifies the graphics for a particular glyph.
<glyphRef> Specifies a possible glyph to use.
<hkern> Specifies kerning pairs and adjustment values in the horizontal advance value.
<image> Specifies an 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.
xlink:href="path to the image". Required.
presentation attributes: Color, Graphics, Images, Viewports
<line> Specifies a line. 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> Specifies a linear gradient that fills the object by using a vector. 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'"
xlink:href="reference to another gradient attribute values of which are used as defaults and stops included. Recursive"
<marker> Specifies the graphic that is to be used for drawing arrowheads. These elements can use the following marker attributes: "marker-start", "marker-mid" and "marker-end". Define the marker before referencing it via its 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 0)"
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> Specifies an alpha mask, which is a combination of opacity values and clipping. Masking is a combination of opacity values and clipping. You can use text, shapes, or paths to define the mask sections. The default state of the mask is fully transparent. The graphics in a mask determine how opaque the mask portions are. 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> Specifies metadata.
<missing-glyph>
<mpath> References an external <path> element as a definition of a motion path.
<path> Specifies a path. 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> Specifies a graphics object that can be redrawn at repeated coordinate intervals. 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)"
xlink:href="reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive"
<polygon> Specifies a graphic containing at least three sides. points="the points of the polygon. The total number of points sould be even". Required.
fill-rule="part of the FillStroke presentation attributes"
presentation attributes: Color, FillStroke, Graphics, Markers
<polyline> Specifies any shape consisting of only straight lines. points="the points on the polyline". Required.
presentation attributes: Color, FillStroke, Graphics, Markers
<radialGradient> Specifies a radial gradient. 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'"
xlink:href="Reference to another gradient attribute values of which are used as defaults and stops included. Recursive"
<rect> Specifies a 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> Adds scripts to an SVG document.
<set> Sets an attribute’s value for a specified duration.
<stop> Specifies a color and its position to use on a gradient. 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> Allows style sheets to be embedded inside an SVG content.
<svg> Creates a fragment of an SVG document. 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)"
xml="outermost element needs to setup SVG and its namespace:
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""
presentation attributes: All
<switch> Allows displaying different shapes depending on the use of the language by the SVG viewer.
<symbol> Specifies the reusable symbols.
<text> Specifies a text. 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>
<title> Description for elements of SVG container element or graphics element.
<tref> References a <text> element in the SVG document. Identical to the <text> element
<tspan> Specifies a subtext within another <tspan> element or a <text> element. Identical to the <text> element
and in addition:
xlink:href="Reference to a <text> element"
<use> Uses a URI to reference a <svg>, <g>, or other graphical element with a unique id attribute and duplicate it. 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"
xlink:href="URI reference to the cloned element"
presentation attributes: All
<view> This is a way to view the image
<vkern> Specifies kerning pairs for vertically-oriented pairs of glyphs.



Do you find this helpful?

Related articles