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, x is 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.