Attribute Value Types

The types of the attribute values in the following element tables are either listed as a set of possible alternatives or the type of the value. The default value is in maroon.

Type Value
align Possible values are: none xMinYMin xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax
bzlist A list of four fraction values between 0 and 1, each set of four (x1, y1, x2, y2) defines a pair of cubic Bezier control points for one interval.
clock Clock value. Some examples are: 3s 4min 2.5h 100ms 6:45:33.2 45:33.2. If no units are specified, seconds are assumed.
color A CSS colour value (for example, red, #F00, #FF0000, rgb(255,0,0) ).
colorlist A list of colour values
coord Coordinate position in the current coordinate system. It will be transformed.
coordfr Value is either a coordinate (useSpaceOnUse) or a fraction of the bounding box(objectBoundingBox) of the object to which the element is applied.
coordlist A list of coordinate positions possibly only one.
degree A rotation value in the clock-wise direction in degrees.
deglist A list of rotation values in the clock-wise direction in degrees.
evencoordlist A list of coordinate pairs.
fr A fraction between 0 and 1.
frlist A list of fraction values between 0 and 1.
idref Reference to an id attribute such as xyz.begin in a time definition where xyz is an id of another element.
legal Legal values for the attribute specified.
legallist List of legal values for the attribute specified.
length Length in the current coordinate system. It will be transformed.
meetOrSlice Possible values are: meet and slice.
mediatype media type as in RFC2045.
name Any legal identifier as in CSS.
num Any number, does not have a metric.
percent A per centage value between 0% and 100%.
text Any text string.
time Some possible values are: +[clock] -[clock] [idref].begin + [clock] [idref].begin - [clock] [idref].end + [clock] [idref].end - [clock]
timelist List of [time].
transformlist List of transformations (for example: scale(2) translate(100,100)).
url A legal URL.

SVG Elements

The table below gives a list of the elements in SVG (most of them described in this primer). For each element, both the attributes that have been described and those omitted are listed. The style attributes are not listed here but have a separate table. The attributes in blue are the main or unique ones for the element. The complete set of xlink attributes are allowed for simple links. For attributes that can have a set of values, the default value is shown in red and bold

Element Attributes Comment
a xmlns:xlink target xlink:href etc The a element acts like a g element so most of those attributes are also allowed.
animate attributeName=[legal] attributeType=[legal] begin=[timelist] end=[timelist] dur=[[clock] | indefinite] min=[clock] max=[clock] restart=[always | never | whenNotActive] repeatCount=[ [clock] | indefinite] repeatDur=[ [clock] | indefinite] fill=[remove | freeze ] calcMode=[linear | discrete | paced | spline] keyTimes=[frlist] keySplines=[bzlist]
from=[legal] to=[legal] by=[legal] additive=[replace | sum] accumulate=[none | sum] onbegin onend onrepeat 		keySplines list is one less than the keyTimes list.
animateColor begin=[timelist] end=[timelist] dur=[[clock] | indefinite] repeatCount=[ [clock] | indefinite] repeatDur=[ [clock] | indefinite] fill=[freeze | remove ] from=[legal] to=[legal] by=[legal] values=[colorlist]
animateMotion begin=[timelist] end=[timelist] dur=[[clock] | indefinite] min=[clock] max=[clock] restart=[always | never | whenNotActive] repeatCount=[ [clock] | indefinite] repeatDur=[ [clock] | indefinite] calcMode=[linear | discrete | paced | spline] keyTimes=[frlist] keySplines=[bzlist]
aditive=[replace | sum] from=[[coord],[coord]] to=[[coord],[coord]] by=[[coord],[coord]] keyPoints=[frlist] path=[pathdata] rotate=[[degree] | auto | auto-reverse] values=[coordlist] 		keySplines list is one less than the keyTimes list.
animateTransform begin=[timelist] end=[timelist] dur=[[clock] | indefinite] min=[clock] max=[clock] restart=[always | never | whenNotActive] repeatCount=[ [clock] | indefinite] repeatDur=[ [clock] | indefinite] calcMode=[linear | discrete | paced | spline] keyTimes=[frlist] keySplines=[bzlist]
additive=[replace | sum] from=[legal] to=[legal] by=[legal] type=[translate | scale | rotate | skewX | skewY] values=[legallist] 		keySplines list is one less than the keyTimes list.
circle cx=[coord] cy=[coord] r=[length] Draws circle with centre and radius specified. r="0" stops rendering.
clipPath clipPathUnits=[objectBoundingBox | userSpaceOnUse]
defs Encloses elements not to be displayed such as style sheets and symbol definitions. It can have all the attributes of a g element.
desc xmlns Description of the drawing. May have class and style attributes. Could contain XML fragment.
ellipse cx=[coord] cy=[coord] rx=[length] ry=[length] Draws ellipse defined by centre and two axes. Either rx="0" or ry="0" stops the rendering
g All the styling attributes plus id requiredFeatures requiredExtensions systemLanguage xml:lang xml:space externalResourcesRequired class style enable-background flood-color flood-opacity clip overflow transform onfocusin etc The g element can take almost any attribute that an element inside it can have.
image preserveAspectRatio=[align] [meetOrSlice] x=[coord] y=[coord] width=[length] height=[length] xlink:href=[url]
line x1=[coord] y1=[coord] x2=[coord] y2=[coord] Defines line between two points. Default for all four values is 0
linearGradient x1=[coordfr] y1=[coordfr] x2=[coordfr] y2=[coordfr] gradientTransform=[transformlist] gradientUnits=[objectBoundingBox | userSpaceOnUse] spreadMethod=[pad | reflect | repeat] xlink:href=[url] Defines a gradient to be applied between (x1,y1) and (x2,y2). If object is larger than this line, pad continues the end values of the gradient outwards, reflect reflects the gradient and repeat repeats it. The linked url can be another gradient whose values are inherited by this one.
mask height=[length] width=[length] maskContentUnits=[objectBoundingBox | userSpaceOnUse] maskUnits=[objectBoundingBox | userSpaceOnUse] x=[coord] y=[coord]
path d=[pathdata] pathLength=[length] Defines a path where author gives estimate of pathLength. Values dependent on path length are scaled up to the actual length, for example offset of text on a path.
polygon points=[evencoordlist] Equivalent to a path that does moveto to first point and absolute lineto to the other points in sequence finishing with a closepath command.
polyline points=[evencoordlist] Equivalent to a path that does moveto to first point and absolute lineto to the other points in sequence.
radialGradient cx=[coordfr] cy=[coordfr] fx=[coordfr] fy=[coordfr] r= gradientTransform=[transformlist] gradientUnits=[objectBoundingBox | userSpaceOnUse] spreadMethod=[pad | reflect | repeat]
rect x=[coord] y=[coord] width=[length] height=[length] rx=[length] ry=[length] x and y default to 0. rx,ry define the radii that round the corners of the rectangle.
script type=[mediatype]
set begin=[timelist] end=[timelist] dur=[[clock] | indefinite] min=[clock] max=[clock] restart=[always | never | whenNotActive] repeatCount=[ [clock] | indefinite] repeatDur=[ [clock] | indefinite] to=[legal]
stop offset=[[fr] | [percent]] stop-color=[color] stop-opacity=[fr]
style media=[comma separated list of media descriptors] title=[text] type=[mediatype] Usual to have the style sheet at the top of the document and surrounded by a defs element.
svg contentScriptType="text/ecamscript" contentStyleType="text/css" x=[coord] y=[coord] height=[length] width=[length] preserveAspectRatio=[align] [meetOrSlice] xmlns=[resource] zoomAndPan=[magnify | disable | zoom] overflow=[visible | hidden | scroll | auto | inherit] The default media type are given as examples for contentScriptType and contentStyleType.
switch requireFeatures=[org.w3c.svg.static | org.w3c.svg.dynamic | org.w3c.dom.svg | org.w3c.svg.lang | org.w3c.svg.animation etc] systemLanguage=[comma separated list of languages such as en]
symbol All the presentation attributes preserveAspectRatio=[align] [meetOrSlice] viewBox=[coord] [coord] [length] [length] Symbol is a container element for a set of graphics elements including use elements.
text dx=[lengthlist] dy=[lengthlist] x=[coordlist] y=[coordlist] lengthAdjust=[spacing | spacingAndGlyphs] rotate=[degree] textLength=[length] transform=[transformlist] Draws text with origin of text string or origin of individual characters defined by (x,y) offset by (dx,dy). Additional rotation can be specified for the text string or individual characters. The expected length of the text can be defined. If actual length is different, lengthAdjust decides whether it gets padded by just varying the spacing.
textPath lengthAdjust=[spacing | spacingAndGlyphs] method=[align | stretch] spacing=[auto | exact] startOffset=[length] textLength=[length]
title Normally none Title for document or element. Wise to only have one per element or document as browser may only look for first.
tref dx=[lengthlist] dy=[lengthlist] x=[coordlist] y=[coordlist] lengthAdjust=[spacing | spacingAndGlyphs] rotate=[deglist] textLength=[length] xlink:href=[url] Similar to tspan but text to be drawn is pointed at by the url rather than enclosed by the element as in tspan.
tspan dx=[lengthlist] dy=[lengthlist] x=[coordlist] y=[coordlist] lengthAdjust=[spacing | spacingAndGlyphs] rotate=[deglist] textLength=[length] Draws a substring within a text element with origin of substring or origin of individual characters defined by (x,y) offset by (dx,dy). Additional rotation can be specified and the expected length of the substring. If actual length is different, lengthAdjust decides whether it gets padded by just varying the spacing.
use All the presentation attributes height=[length] width=[length] x=[coord] y=[coord] xlink:href=[url] The use element can point either to a symbol, SVG document or a group. The use is effectively replaced by a group.
id =[name] The name must be unique in the document.
class =[name] The name is used to style sub classes of a set of drawing elements in their own way.
style Style attribute as in CSS. List of styling declarations separated by semicolons.

SVG Style Properties and Attributes

The table below gives a list of the style properties in SVG that can also be used as style attributes.

Attribute Possible Values Comment
alignment-baseline =[auto | baseline | before-edge | text-before-edge | middle | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit]
baseline-shift =[baseline | sub | super | [percent] | [length] | inherit]
clip =[[shape] | auto | inherit]
clip-path =[[url] | none | inherit] References the clipPath element that defines the clipping.
clip-rule =[nonzero | evenodd | inherit] Same as for fill-rule.
color =[ [color] | inherit] CSS colour, better to use fill and stroke properties unless you need a common style across the SVG document and the page in which it is embedded.
color-interpolation
color-rendering =[auto | optimizeSpeed | optimizeQuality | inherit]
direction =[ltr | rtl | inherit] Defines the base writing direction of the text.
dominant-baseline =[auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | inherit]
fill =[ none | [color] | [url] ] The url points to a patten or gradient definition.
fill-opacity =[fr] Initial value is 1.
fill-rule =[nonzero | evenodd | inherit]
font-family =[list of generic or font names as in CSS] See CSS.
font-size =[ [length] | larger | smaller | [percent] | inherit] See CSS.
font-size-adjust =[ [num] | none | inherit] Adjusts the font size to retain legibility. The number defines the required aspect ratio (for example, 0.58 for Verdana). If another font is used instead (for example, Times New Roman with an aspect ratio of 0.46, the font is scaled up in size by 0.58/0.46.
font-stretch =[normal |wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit]
font-style =[normal | italic | oblique | inherit]
font-variant =[normal | small-caps | inherit]
font-weight =[normal | bold | bolder | lighter | 100 | 200 ! 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit]
glyph-orientaion-vertical =[auto | [degree] | inherit] Top-down Latin text will be orientated 90 degrees unless this is set to 0.
glyph-orientation-horizontal =[ [degree] | inherit] Default value is 0. Allowed values are 0, 90, 180, and 270.
kerning =[auto | [length] | inherit] kerning length is added to the inter-character spacing.
letter-spacing =[normal | [length] | inherit]
mask =[[url] | none | inherit] Defines the mask element to be used for masking.
onclick, onload etc Script function call
opacity =[ [fr] | inherit ] Initial value is 1.
shape-rendering =[auto | optimizeSpeed | crispEdges | geometricPrecision | inherit] A hint as to how to render the SVG document.
stroke =[ none | [color] | [url] ] The url points to a patten or gradient definition.
stroke-dasharrary =[ [length],[length],[length],[length], ...] A list of lengths that should be even giving the dash and space lengths in order. If an odd number is specified, the list is repeated to make it even.
stroke-dashoffset =[ [length] | none] Initial value is 0.
stroke-linecap = [butt | round | square | inherit] Defined for the end of paths and lines.
stroke-linejoin = [miter | round | bevel | inherit] Specifies the shape to be used at the corners of paths and polylines.
stroke-miterlimit =[ [num] | inherit] Initial value is 4. Limits the ratio of the miter length to the width of the lines joined by a miter.
stroke-opacity =[fr] Initial value is 1.
stroke-width =[ [length] | inherit] Initial value is 1.
text-anchor =[start | middle | end | inherit] Starting position of the text string.
text-decoration =[none | underline | overline | line-through | blink | inherit] See CSS.
text-rendering =[auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit] Allows renderer to make decisions on whether to anti-alias or use font hinting.
transform
unicode-bidi =[normal | embed | bidi-override | inherit] See CSS for meaning.
visibility =[visible | hidden | collapse | inherit]
word-spacing =[normal | [length] | inherit]
writing-mode =[lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit]

Filtering Elements

SVG has a range of image filtering operations that can be performed on the vector graphics image generated before it is displayed. These have not been described in this document.

Element Attributes Comment
definition-src
feBlend in2 mode=[normal | multiply | screen | darken | lighten]
feColorMatrix type=[matrix | saturate | hueRotate | luminanceToAlpha] values
feComponentTransfer
feComposite in2 k1 k2 k3 k4 operator=[over | in | out | atop | xor | arithmetic]
feConvolveMatrix bias divisor edgeMode kernelMatrix kernelUnitLength order preserveAlpha targetX targetY
feDiffuseLighting diffuseConstant surfaceScale
feDisplacementMap in2 scale xChannelSelector=[R | G | B | A] yChannelSelector=[R | G | B | A]
feDistantLight azimuth elevation
feFlood
feFuncA
feFuncB
feFuncG
feFuncR
feGaussianBlur stdDeviation
feImage
feMerge
feMergeNode in out
feMorphology operator=[erode | dilate] radius
feOffset dx dy
fePointLight x y z
feSpecularLighting specularConstant specularExponent surfaceScale
feSpotLight limitingConeAngle pointsAtX pointsAtY pointsAtZ x y z
feTile
feTurbulence baseFrequency numOctaves seed stitchTiles=[stitch | noStitch] type=[fractalNoise | turbulence]
filter animate feColorMatrix feComposite feGaussianBlur feMorphology feTile filterRes filterUnits=[objectBoundingBox | userSpaceOnUse] height width primitiveUnits=[objectBoundingBox | userSpaceOnUse] x y

Other Elements

SVG has some other more specific elements that have not been described in this document.

Element Attributes Comment
color-profile local name rendering-intent=[auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric]
cursor x y
definition-src
foreignObject x y
marker markerHeight=[length] markerWidth=[length] markerUnits=[strokeWidth | userSpaceOnUse] orient=[auto | [degree]] preserveAspectRatio=[align] [meetOrSlice] refX=[coord] refY=[coord] viewBox=[coord] [coord] [length] [length] Defines a marker where (refX,refY) is the reference point of the marker. If attribute orient is set to auto, the marker is oriented in the current direction of the path (for example an arrow head).
metadata
mpath xmlns:xlink etc xlink:href externalResourcesRequired=[false | true] Sub-element used by animateMotion to define a path instead of its path attribute.
pattern patternContentUnits=[objectBoundingBox | userSpaceOnUse] patternTransform=[transformlist]patternUnits=[objectBoundingBox | userSpaceOnUse] preserveAspectRatio=[align] [meetOrSlice] viewBox=[coord] [coord] [length] [length] x=[coord] y=[coord] width=[length] height=[length]
switch requireFeatures=[org.w3c.svg.static | org.w3c.svg.dynamic | org.w3c.dom.svg | org.w3c.svg.lang | org.w3c.svg.animation etc] systemLanguage=[comma separated list of languages such as en]
view preserveAspectRatio=[align] [meetOrSlice] viewBox=[coord] [coord] [length] [length] viewTarget zoomAndPan=[disable | magnify | zoom]