SVG Attribute reference
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("accumulate")}}{{SVGAttr("additive")}}{{SVGAttr("alignment-baseline")}}{{SVGAttr("amplitude")}}{{SVGAttr("attributeName")}}{{SVGAttr("attributeType")}}{{SVGAttr("autofocus")}}{{SVGAttr("azimuth")}}
B
{{SVGAttr("baseFrequency")}}{{SVGAttr("baseline-shift")}}{{SVGAttr("baseProfile")}}{{SVGAttr("begin")}}{{SVGAttr("bias")}}{{SVGAttr("by")}}
C
{{SVGAttr("calcMode")}}{{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("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("fetchpriority")}}{{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("glyph-orientation-horizontal")}}{{SVGAttr("glyph-orientation-vertical")}}{{SVGAttr("gradientTransform")}}{{SVGAttr("gradientUnits")}}
H
{{SVGAttr("height")}}{{SVGAttr("href")}}{{SVGAttr("hreflang")}}
I
{{SVGAttr("id")}}{{SVGAttr("image-rendering")}}{{SVGAttr("in")}}{{SVGAttr("in2")}}{{SVGAttr("intercept")}}
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")}}
M
{{SVGAttr("marker-end")}}{{SVGAttr("marker-mid")}}{{SVGAttr("marker-start")}}{{SVGAttr("markerHeight")}}{{SVGAttr("markerUnits")}}{{SVGAttr("markerWidth")}}{{SVGAttr("mask")}}{{SVGAttr("maskContentUnits")}}{{SVGAttr("maskUnits")}}{{SVGAttr("max")}}{{SVGAttr("media")}}{{SVGAttr("method")}}{{SVGAttr("min")}}{{SVGAttr("mode")}}
N
{{SVGAttr("numOctaves")}}
O
{{SVGAttr("offset")}}{{SVGAttr("opacity")}}{{SVGAttr("operator")}}{{SVGAttr("order")}}{{SVGAttr("orient")}}{{SVGAttr("origin")}}{{SVGAttr("overflow")}}
P
{{SVGAttr("paint-order")}}{{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("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("spreadMethod")}}{{SVGAttr("startOffset")}}{{SVGAttr("stdDeviation")}}{{SVGAttr("stitchTiles")}}{{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("style")}}{{SVGAttr("surfaceScale")}}{{SVGAttr("systemLanguage")}}
T
{{SVGAttr("tabindex")}}{{SVGAttr("tableValues")}}{{SVGAttr("target")}}{{SVGAttr("targetX")}}{{SVGAttr("targetY")}}{{SVGAttr("text-anchor")}}{{SVGAttr("text-decoration")}}{{SVGAttr("text-overflow")}}{{SVGAttr("text-rendering")}}{{SVGAttr("textLength")}}{{SVGAttr("to")}}{{SVGAttr("transform")}}{{SVGAttr("transform-origin")}}{{SVGAttr("type")}}
U
{{SVGAttr("unicode-bidi")}}
V
{{SVGAttr("values")}}{{SVGAttr("vector-effect")}}{{SVGAttr("version")}}{{SVGAttr("viewBox")}}{{SVGAttr("visibility")}}
W
{{SVGAttr("white-space")}}{{SVGAttr("width")}}{{SVGAttr("word-spacing")}}{{SVGAttr("writing-mode")}}
X
{{SVGAttr("x")}}{{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
Core attributes
The core attributes are global attributes.
{{SVGAttr("autofocus")}}{{SVGAttr("id")}}{{SVGAttr("class")}}{{SVGAttr("style")}}{{SVGAttr("lang")}}{{SVGAttr("tabindex")}}{{SVGAttr("xml:lang")}}{{SVGAttr("xml:space")}}
Conditional processing attributes
The conditional processing attributes control whether or not the element on which it appears is processed.
{{SVGAttr("requiredExtensions")}}{{SVGAttr("requiredFeatures")}}{{SVGAttr("systemLanguage")}}
XLink attributes
The XLink attributes can reference resources.
{{SVGAttr("xlink:href")}}{{deprecated_inline}}{{SVGAttr("xlink:type")}}{{deprecated_inline}}{{SVGAttr("xlink:role")}}{{deprecated_inline}}{{SVGAttr("xlink:arcrole")}}{{deprecated_inline}}{{SVGAttr("xlink:title")}}{{deprecated_inline}}{{SVGAttr("xlink:show")}}{{deprecated_inline}}{{SVGAttr("xlink:actuate")}}{{deprecated_inline}}
Presentation attributes
All SVG presentation attributes can be used as CSS properties.
[!NOTE] Whether these attributes are presentation attributes depends on the element on which they are set. For example,
xis a presentation attribute for{{svgelement("circle")}}, but not for{{svgelement("tspan")}}; it’s the coordinate of the starting point of the text baseline, or the x coordinate of each individual glyph if a list of values is provided.
{{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("width")}}{{SVGAttr("white-space")}}{{SVGAttr("word-spacing")}}{{SVGAttr("writing-mode")}}{{SVGAttr("x")}}{{SVGAttr("y")}}
Filters attributes
- Filter primitive attributes (presentation 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")}}
- :
- Animation addition attributes
- :
{{SVGAttr("additive")}},{{SVGAttr("accumulate")}}
- :
Event attributes
All HTML and SVG elements support event handler attributes defined on the GlobalEventHandlers mixin.
While event handler attributes, like {{domxref("Element/blur_event", "onblur")}} and {{domxref("Element/auxclick_event", "onauxclick")}} , apply to all elements, they may not have any effect. For example, the {{domxref("HTMLTrackElement/cuechange_event", "oncuechange")}} attribute can be applied to any element, but it is only relevant to the {{htmlelement("track")}} element.
Event handler attributes are discouraged, considered unsafe, and may be blocked by content security policies (CSP). Use the event name withing an {{domxref("EventTarget.addEventListener", "addEventListener()")}} method instead.