landing page
SVG Attribute reference
SVG elements can be modified using attributes that modify how the element is handled or rendered.
Below is a list of all of the attributes available in SVG, along with links to reference documentation to help you learn which elements support them and how they work.
SVG attributes A to Z
A
accumulateadditivealignment-baselineamplitudeattributeNameattributeTypeautofocusazimuth
B
baseFrequencybaseline-shiftbaseProfilebeginbiasby
C
calcModeclassclipclipPathUnitsclip-pathclip-rulecolorcolor-interpolationcolor-interpolation-filterscrossorigincursorcxcy
D
ddata-*decodingdiffuseConstantdirectiondisplaydivisordominant-baselinedurdxdy
E
edgeModeelevationendexponent
F
fetchpriorityfillfill-opacityfill-rulefilterfilterUnitsflood-colorflood-opacityfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightfont-widthfrfromfxfy
G
glyph-orientation-horizontalglyph-orientation-verticalgradientTransformgradientUnits
H
heighthrefhreflang
I
idimage-renderinginin2intercept
K
k1k2k3k4kernelMatrixkernelUnitLengthkeyPointskeySplineskeyTimes
L
langlengthAdjustletter-spacinglighting-colorlimitingConeAngle
M
marker-endmarker-midmarker-startmarkerHeightmarkerUnitsmarkerWidthmaskmaskContentUnitsmaskUnitsmaxmediamethodminmode
N
numOctaves
O
offsetopacityoperatororderorientoriginoverflow
P
paint-orderpathpathLengthpatternContentUnitspatternTransformpatternUnitspingpointer-eventspointspointsAtXpointsAtYpointsAtZpreserveAlphapreserveAspectRatioprimitiveUnits
R
rradiusreferrerPolicyrefXrefYrelrepeatCountrepeatDurrequiredExtensionsrequiredFeaturesrestartresultrotaterxry
S
scaleseedshape-renderingsideslopespacingspecularConstantspecularExponentspreadMethodstartOffsetstdDeviationstitchTilesstop-colorstop-opacitystrokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthstylesurfaceScalesystemLanguage
T
tabindextableValuestargettargetXtargetYtext-anchortext-decorationtext-overflowtext-renderingtextLengthtotransformtransform-origintype
U
unicode-bidi
V
valuesvector-effectversionviewBoxvisibility
W
white-spacewidthword-spacingwriting-mode
X
xx1x2xChannelSelectorxlink:actuatexlink:arcrolexlink:hrefDeprecatedxlink:rolexlink:showxlink:titlexlink:typexml:langxml:space
Y
yy1y2yChannelSelector
Z
zzoomAndPan
SVG attributes by category
Core attributes
The core attributes are global attributes.
autofocusidclassstylelangtabindexxml:langxml:space
Conditional processing attributes
The conditional processing attributes control whether the elements they are set on are processed.
requiredExtensionsrequiredFeaturessystemLanguage
XLink attributes
The XLink attributes can reference resources.
xlink:hrefDeprecatedxlink:typeDeprecatedxlink:roleDeprecatedxlink:arcroleDeprecatedxlink:titleDeprecatedxlink:showDeprecatedxlink:actuateDeprecated
Presentation attributes
SVG presentation attributes are SVG attributes that can also be used as CSS properties on SVG elements.
They set CSS property values on an element with a specificity of 0, so other author styles in a stylesheet or style attribute can override them.
Presentation attribute values are parsed as CSS values, not declarations, so they cannot contain !important.
Most presentation attributes inherit when used as CSS properties (for example, fill and stroke).
Geometry properties are the main exception: their CSS counterparts do not inherit.
alignment-baselinebaseline-shiftclipclip-pathclip-rulecolorcolor-interpolationcolor-interpolation-filterscursorcxcyddirectiondisplaydominant-baselinefillfill-opacityfill-rulefilterflood-colorflood-opacityfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightfont-widthglyph-orientation-horizontalglyph-orientation-verticalheightimage-renderingletter-spacinglighting-colormarker-endmarker-midmarker-startmaskmask-typeopacityoverflowpathLengthpointer-eventsrrxryshape-renderingstop-colorstop-opacitystrokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthtext-anchortext-decorationtext-overflowtext-renderingtransformtransform-originunicode-bidivector-effectvisibilitywidthwhite-spaceword-spacingwriting-modexy
Geometry properties
Geometry properties describe the position and dimensions of SVG shapes. In SVG 2, they are a defined subset of presentation attributes whose CSS counterparts do not inherit.
Each geometry property applies as a presentation attribute only on certain elements.
For example, r defines the radius of a <circle>, but has no effect on elements such as <rect>.
The SVG geometry properties are:
For element-by-element applicability, see each property’s attribute page and the list on the <g> element page.
Filters attributes
- Filter primitive attributes (presentation attributes)
- :
height,result,width,x,y
- :
- Transfer function attributes
- :
type,tableValues,slope,intercept,amplitude,exponent,offset
- :
Animation attributes
- Animation target element attributes
- :
href
- :
- Animation attribute target attributes
- :
attributeType,attributeName
- :
- Animation timing attributes
- :
begin,dur,end,min,max,restart,repeatCount,repeatDur,fill
- :
- Animation value attributes
- :
calcMode,values,keyTimes,keySplines,from,to,by
- :
- Animation addition attributes
- :
additive,accumulate
- :
Event attributes
All HTML and SVG elements support event handler attributes defined on the GlobalEventHandlers mixin.
While event handler attributes, like onblur and onauxclick, apply to all elements, they may not have any effect. For example, the oncuechange attribute can be applied to any element, but it is only relevant to the <track> element.
Event handler attributes are discouraged, considered unsafe, and may be blocked by content security policies (CSP). Use the event name withing an addEventListener() method instead.