SVG Attribute reference
{{SVGRef}}
SVG elements can be modified using attributes that specify details about exactly how the element should be 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
{{SVGAttr("accent-height")}}{{SVGAttr("accumulate")}}{{SVGAttr("additive")}}{{SVGAttr("alignment-baseline")}}{{SVGAttr("alphabetic")}}{{SVGAttr("amplitude")}}{{SVGAttr("arabic-form")}}{{SVGAttr("ascent")}}{{SVGAttr("attributeName")}}{{SVGAttr("attributeType")}}{{SVGAttr("azimuth")}}
B
{{SVGAttr("baseFrequency")}}{{SVGAttr("baseline-shift")}}{{SVGAttr("baseProfile")}}{{SVGAttr("bbox")}}{{SVGAttr("begin")}}{{SVGAttr("bias")}}{{SVGAttr("by")}}
C
{{SVGAttr("calcMode")}}{{SVGAttr("cap-height")}}{{SVGAttr("class")}}{{SVGAttr("clip")}}{{SVGAttr("clipPathUnits")}}{{SVGAttr("clip-path")}}{{SVGAttr("clip-rule")}}{{SVGAttr("color")}}{{SVGAttr("color-interpolation")}}{{SVGAttr("color-interpolation-filters")}}{{SVGAttr("crossorigin")}}{{SVGAttr("cursor")}}{{SVGAttr("cx")}}{{SVGAttr("cy")}}
D
{{SVGAttr("d")}}{{SVGAttr("data-*")}}{{SVGAttr("decoding")}}{{SVGAttr("descent")}}{{SVGAttr("diffuseConstant")}}{{SVGAttr("direction")}}{{SVGAttr("display")}}{{SVGAttr("divisor")}}{{SVGAttr("dominant-baseline")}}{{SVGAttr("dur")}}{{SVGAttr("dx")}}{{SVGAttr("dy")}}
E
{{SVGAttr("edgeMode")}}{{SVGAttr("elevation")}}{{SVGAttr("end")}}{{SVGAttr("exponent")}}
F
{{SVGAttr("fill")}}{{SVGAttr("fill-opacity")}}{{SVGAttr("fill-rule")}}{{SVGAttr("filter")}}{{SVGAttr("filterUnits")}}{{SVGAttr("flood-color")}}{{SVGAttr("flood-opacity")}}{{SVGAttr("font-family")}}{{SVGAttr("font-size")}}{{SVGAttr("font-size-adjust")}}{{SVGAttr("font-stretch")}}{{SVGAttr("font-style")}}{{SVGAttr("font-variant")}}{{SVGAttr("font-weight")}}{{SVGAttr("fr")}}{{SVGAttr("from")}}{{SVGAttr("fx")}}{{SVGAttr("fy")}}
G
{{SVGAttr("g1")}}{{SVGAttr("g2")}}{{SVGAttr("glyph-name")}}{{SVGAttr("glyph-orientation-horizontal")}}{{SVGAttr("glyph-orientation-vertical")}}{{SVGAttr("gradientTransform")}}{{SVGAttr("gradientUnits")}}
H
{{SVGAttr("hanging")}}{{SVGAttr("height")}}{{SVGAttr("horiz-adv-x")}}{{SVGAttr("horiz-origin-x")}}{{SVGAttr("horiz-origin-y")}}{{SVGAttr("href")}}{{SVGAttr("hreflang")}}
I
{{SVGAttr("id")}}{{SVGAttr("ideographic")}}{{SVGAttr("image-rendering")}}{{SVGAttr("in")}}{{SVGAttr("in2")}}{{SVGAttr("intercept")}}
K
{{SVGAttr("k")}}{{SVGAttr("k1")}}{{SVGAttr("k2")}}{{SVGAttr("k3")}}{{SVGAttr("k4")}}{{SVGAttr("kernelMatrix")}}{{SVGAttr("kernelUnitLength")}}{{SVGAttr("keyPoints")}}{{SVGAttr("keySplines")}}{{SVGAttr("keyTimes")}}
L
{{SVGAttr("lang")}}{{SVGAttr("lengthAdjust")}}{{SVGAttr("letter-spacing")}}{{SVGAttr("lighting-color")}}{{SVGAttr("limitingConeAngle")}}{{SVGAttr("local")}}
M
{{SVGAttr("marker-end")}}{{SVGAttr("marker-mid")}}{{SVGAttr("marker-start")}}{{SVGAttr("markerHeight")}}{{SVGAttr("markerUnits")}}{{SVGAttr("markerWidth")}}{{SVGAttr("mask")}}{{SVGAttr("maskContentUnits")}}{{SVGAttr("maskUnits")}}{{SVGAttr("mathematical")}}{{SVGAttr("max")}}{{SVGAttr("media")}}{{SVGAttr("method")}}{{SVGAttr("min")}}{{SVGAttr("mode")}}
N
{{SVGAttr("name")}}{{SVGAttr("numOctaves")}}
O
{{SVGAttr("offset")}}{{SVGAttr("opacity")}}{{SVGAttr("operator")}}{{SVGAttr("order")}}{{SVGAttr("orient")}}{{SVGAttr("orientation")}}{{SVGAttr("origin")}}{{SVGAttr("overflow")}}{{SVGAttr("overline-position")}}{{SVGAttr("overline-thickness")}}
P
{{SVGAttr("paint-order")}}{{SVGAttr("panose-1")}}{{SVGAttr("path")}}{{SVGAttr("pathLength")}}{{SVGAttr("patternContentUnits")}}{{SVGAttr("patternTransform")}}{{SVGAttr("patternUnits")}}{{SVGAttr("ping")}}{{SVGAttr("pointer-events")}}{{SVGAttr("points")}}{{SVGAttr("pointsAtX")}}{{SVGAttr("pointsAtY")}}{{SVGAttr("pointsAtZ")}}{{SVGAttr("preserveAlpha")}}{{SVGAttr("preserveAspectRatio")}}{{SVGAttr("primitiveUnits")}}
R
{{SVGAttr("r")}}{{SVGAttr("radius")}}{{SVGAttr("referrerPolicy")}}{{SVGAttr("refX")}}{{SVGAttr("refY")}}{{SVGAttr("rel")}}{{SVGAttr("rendering-intent")}}{{SVGAttr("repeatCount")}}{{SVGAttr("repeatDur")}}{{SVGAttr("requiredExtensions")}}{{SVGAttr("requiredFeatures")}}{{SVGAttr("restart")}}{{SVGAttr("result")}}{{SVGAttr("rotate")}}{{SVGAttr("rx")}}{{SVGAttr("ry")}}
S
{{SVGAttr("scale")}}{{SVGAttr("seed")}}{{SVGAttr("shape-rendering")}}{{SVGAttr("side")}}{{SVGAttr("slope")}}{{SVGAttr("spacing")}}{{SVGAttr("specularConstant")}}{{SVGAttr("specularExponent")}}{{SVGAttr("speed")}}{{SVGAttr("spreadMethod")}}{{SVGAttr("startOffset")}}{{SVGAttr("stdDeviation")}}{{SVGAttr("stemh")}}{{SVGAttr("stemv")}}{{SVGAttr("stitchTiles")}}{{SVGAttr("stop-color")}}{{SVGAttr("stop-opacity")}}{{SVGAttr("strikethrough-position")}}{{SVGAttr("strikethrough-thickness")}}{{SVGAttr("string")}}{{SVGAttr("stroke")}}{{SVGAttr("stroke-dasharray")}}{{SVGAttr("stroke-dashoffset")}}{{SVGAttr("stroke-linecap")}}{{SVGAttr("stroke-linejoin")}}{{SVGAttr("stroke-miterlimit")}}{{SVGAttr("stroke-opacity")}}{{SVGAttr("stroke-width")}}{{SVGAttr("style")}}{{SVGAttr("surfaceScale")}}{{SVGAttr("systemLanguage")}}
T
{{SVGAttr("tabindex")}}{{SVGAttr("tableValues")}}{{SVGAttr("target")}}{{SVGAttr("targetX")}}{{SVGAttr("targetY")}}{{SVGAttr("text-anchor")}}{{SVGAttr("text-decoration")}}{{SVGAttr("text-rendering")}}{{SVGAttr("textLength")}}{{SVGAttr("to")}}{{SVGAttr("transform")}}{{SVGAttr("transform-origin")}}{{SVGAttr("type")}}
U
{{SVGAttr("u1")}}{{SVGAttr("u2")}}{{SVGAttr("underline-position")}}{{SVGAttr("underline-thickness")}}{{SVGAttr("unicode")}}{{SVGAttr("unicode-bidi")}}{{SVGAttr("unicode-range")}}{{SVGAttr("units-per-em")}}
V
{{SVGAttr("v-alphabetic")}}{{SVGAttr("v-hanging")}}{{SVGAttr("v-ideographic")}}{{SVGAttr("v-mathematical")}}{{SVGAttr("values")}}{{SVGAttr("vector-effect")}}{{SVGAttr("version")}}{{SVGAttr("vert-adv-y")}}{{SVGAttr("vert-origin-x")}}{{SVGAttr("vert-origin-y")}}{{SVGAttr("viewBox")}}{{SVGAttr("visibility")}}
W
{{SVGAttr("width")}}{{SVGAttr("widths")}}{{SVGAttr("word-spacing")}}{{SVGAttr("writing-mode")}}
X
{{SVGAttr("x")}}{{SVGAttr("x-height")}}{{SVGAttr("x1")}}{{SVGAttr("x2")}}{{SVGAttr("xChannelSelector")}}{{SVGAttr("xlink:actuate")}}{{SVGAttr("xlink:arcrole")}}{{SVGAttr("xlink:href")}}{{deprecated_inline}}{{SVGAttr("xlink:role")}}{{SVGAttr("xlink:show")}}{{SVGAttr("xlink:title")}}{{SVGAttr("xlink:type")}}{{SVGAttr("xml:lang")}}{{SVGAttr("xml:space")}}
Y
{{SVGAttr("y")}}{{SVGAttr("y1")}}{{SVGAttr("y2")}}{{SVGAttr("yChannelSelector")}}
Z
{{SVGAttr("z")}}{{SVGAttr("zoomAndPan")}}
SVG attributes by category
Generic attributes
-
Core attributes
{{SVGAttr("id")}}{{SVGAttr("class")}}{{SVGAttr("style")}}{{SVGAttr("lang")}}{{SVGAttr("tabindex")}}{{SVGAttr("xml:lang")}}{{SVGAttr("xml:space")}}
-
Conditional processing attributes
{{SVGAttr("requiredExtensions")}}{{SVGAttr("requiredFeatures")}}{{SVGAttr("systemLanguage")}}
XLink attributes
{{SVGAttr("xlink:href")}}{{deprecated_inline}}{{SVGAttr("xlink:type")}}{{SVGAttr("xlink:role")}}{{SVGAttr("xlink:arcrole")}}{{SVGAttr("xlink:title")}}{{SVGAttr("xlink:show")}}{{SVGAttr("xlink:actuate")}}
Presentation attributes
[!NOTE] All SVG presentation attributes can be used as CSS properties.
{{SVGAttr("alignment-baseline")}}{{SVGAttr("baseline-shift")}}{{SVGAttr("clip")}}{{SVGAttr("clip-path")}}{{SVGAttr("clip-rule")}}{{SVGAttr("color")}}{{SVGAttr("color-interpolation")}}{{SVGAttr("color-interpolation-filters")}}{{SVGAttr("cursor")}}{{SVGAttr("cx")}}{{SVGAttr("cy")}}{{SVGAttr("d")}}{{SVGAttr("direction")}}{{SVGAttr("display")}}{{SVGAttr("dominant-baseline")}}{{SVGAttr("fill")}}{{SVGAttr("fill-opacity")}}{{SVGAttr("fill-rule")}}{{SVGAttr("filter")}}{{SVGAttr("flood-color")}}{{SVGAttr("flood-opacity")}}{{SVGAttr("font-family")}}{{SVGAttr("font-size")}}{{SVGAttr("font-size-adjust")}}{{SVGAttr("font-stretch")}}{{SVGAttr("font-style")}}{{SVGAttr("font-variant")}}{{SVGAttr("font-weight")}}{{SVGAttr("glyph-orientation-horizontal")}}{{SVGAttr("glyph-orientation-vertical")}}{{SVGAttr("height")}}{{SVGAttr("image-rendering")}}{{SVGAttr("letter-spacing")}}{{SVGAttr("lighting-color")}}{{SVGAttr("marker-end")}}{{SVGAttr("marker-mid")}}{{SVGAttr("marker-start")}}{{SVGAttr("mask")}}{{SVGAttr("mask-type")}}{{SVGAttr("opacity")}}{{SVGAttr("overflow")}}{{SVGAttr("pointer-events")}}{{SVGAttr("r")}}{{SVGAttr("rx")}}{{SVGAttr("ry")}}{{SVGAttr("shape-rendering")}}{{SVGAttr("stop-color")}}{{SVGAttr("stop-opacity")}}{{SVGAttr("stroke")}}{{SVGAttr("stroke-dasharray")}}{{SVGAttr("stroke-dashoffset")}}{{SVGAttr("stroke-linecap")}}{{SVGAttr("stroke-linejoin")}}{{SVGAttr("stroke-miterlimit")}}{{SVGAttr("stroke-opacity")}}{{SVGAttr("stroke-width")}}{{SVGAttr("text-anchor")}}{{SVGAttr("text-decoration")}}{{SVGAttr("text-overflow")}}{{SVGAttr("text-rendering")}}{{SVGAttr("transform")}}{{SVGAttr("transform-origin")}}{{SVGAttr("unicode-bidi")}}{{SVGAttr("vector-effect")}}{{SVGAttr("visibility")}}{{SVGAttr("white-space")}}{{SVGAttr("width")}}{{SVGAttr("word-spacing")}}{{SVGAttr("writing-mode")}}{{SVGAttr("x")}}{{SVGAttr("y")}}
Filters attributes
- Filter primitive attributes
- :
{{SVGAttr("height")}},{{SVGAttr("result")}},{{SVGAttr("width")}},{{SVGAttr("x")}},{{SVGAttr("y")}}
- :
- Transfer function attributes
- :
{{SVGAttr("type")}},{{SVGAttr("tableValues")}},{{SVGAttr("slope")}},{{SVGAttr("intercept")}},{{SVGAttr("amplitude")}},{{SVGAttr("exponent")}},{{SVGAttr("offset")}}
- :
Animation attributes
- Animation target element attributes
- :
{{SVGAttr("href")}}
- :
- Animation attribute target attributes
- :
{{SVGAttr("attributeType")}},{{SVGAttr("attributeName")}}
- :
- Animation timing attributes
- :
{{SVGAttr("begin")}},{{SVGAttr("dur")}},{{SVGAttr("end")}},{{SVGAttr("min")}},{{SVGAttr("max")}},{{SVGAttr("restart")}},{{SVGAttr("repeatCount")}},{{SVGAttr("repeatDur")}},{{SVGAttr("fill")}}
- :
- Animation value attributes
- :
{{SVGAttr("calcMode")}},{{SVGAttr("values")}},{{SVGAttr("keyTimes")}},{{SVGAttr("keySplines")}},{{SVGAttr("from")}},{{SVGAttr("to")}},{{SVGAttr("by")}},{{SVGAttr("autoReverse")}}
- :
- Animation addition attributes
- :
{{SVGAttr("additive")}},{{SVGAttr("accumulate")}}
- :
Event attributes
onabortonactivateonbeginoncanceloncanplayoncanplaythroughonchangeonclickoncloseoncuechangeondblclickondragondragendondragenterondragleaveondragoverondragstartondropondurationchangeonemptiedonendonendedonerroronerroronfocusonfocusinonfocusoutoninputoninvalidonkeydownonkeypressonkeyuponloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponmousewheelonpauseonplayonplayingonprogressonratechangeonrepeatonresetonresizeonresizeonscrollonscrollonseekedonseekingonselectonshowonstalledonsubmitonsuspendontimeupdateontoggleonunloadonvolumechangeonwaiting