index.md

---
title: SVG Attribute reference
short-title: Attributes
slug: Web/SVG/Attribute
page-type: landing-page
---

{{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("color-rendering")}}
- {{SVGAttr("crossorigin")}}
- {{SVGAttr("cursor")}}
- {{SVGAttr("cx")}}
- {{SVGAttr("cy")}}

### D

- {{SVGAttr("d")}}
- {{SVGAttr("decelerate")}}
- {{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("format")}}
- {{SVGAttr("from")}}
- {{SVGAttr("fr")}}
- {{SVGAttr("fx")}}
- {{SVGAttr("fy")}}

### G

- {{SVGAttr("g1")}}
- {{SVGAttr("g2")}}
- {{SVGAttr("glyph-name")}}
- {{SVGAttr("glyph-orientation-horizontal")}}
- {{SVGAttr("glyph-orientation-vertical")}}
- {{SVGAttr("glyphRef")}}
- {{SVGAttr("gradientTransform")}}
- {{SVGAttr("gradientUnits")}}

### H

- {{SVGAttr("hanging")}}
- {{SVGAttr("height")}}
- {{SVGAttr("href")}}
- {{SVGAttr("hreflang")}}
- {{SVGAttr("horiz-adv-x")}}
- {{SVGAttr("horiz-origin-x")}}

### 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("panose-1")}}
- {{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("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("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("color-rendering")}}
- {{SVGAttr("cursor")}}
- {{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("image-rendering")}}
- {{SVGAttr("letter-spacing")}}
- {{SVGAttr("lighting-color")}}
- {{SVGAttr("marker-end")}}
- {{SVGAttr("marker-mid")}}
- {{SVGAttr("marker-start")}}
- {{SVGAttr("mask")}}
- {{SVGAttr("opacity")}}
- {{SVGAttr("overflow")}}
- {{SVGAttr("pointer-events")}}
- {{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-rendering")}}
- {{SVGAttr("transform")}}
- {{SVGAttr("transform-origin")}}
- {{SVGAttr("unicode-bidi")}}
- {{SVGAttr("vector-effect")}}
- {{SVGAttr("visibility")}}
- {{SVGAttr("word-spacing")}}
- {{SVGAttr("writing-mode")}}

### 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")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}
- Animation addition attributes
  - : {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}

### Event attributes

- **`onabort`**
- **`onactivate`**
- **`onbegin`**
- **`oncancel`**
- **`oncanplay`**
- **`oncanplaythrough`**
- **`onchange`**
- **`onclick`**
- **`onclose`**
- **`oncuechange`**
- **`ondblclick`**
- **`ondrag`**
- **`ondragend`**
- **`ondragenter`**
- **`ondragleave`**
- **`ondragover`**
- **`ondragstart`**
- **`ondrop`**
- **`ondurationchange`**
- **`onemptied`**
- **`onend`**
- **`onended`**
- **`onerror`**
- **`onerror`**
- **`onfocus`**
- **`onfocusin`**
- **`onfocusout`**
- **`oninput`**
- **`oninvalid`**
- **`onkeydown`**
- **`onkeypress`**
- **`onkeyup`**
- **`onload`**
- **`onloadeddata`**
- **`onloadedmetadata`**
- **`onloadstart`**
- **`onmousedown`**
- **`onmouseenter`**
- **`onmouseleave`**
- **`onmousemove`**
- **`onmouseout`**
- **`onmouseover`**
- **`onmouseup`**
- **`onmousewheel`**
- **`onpause`**
- **`onplay`**
- **`onplaying`**
- **`onprogress`**
- **`onratechange`**
- **`onrepeat`**
- **`onreset`**
- **`onresize`**
- **`onresize`**
- **`onscroll`**
- **`onscroll`**
- **`onseeked`**
- **`onseeking`**
- **`onselect`**
- **`onshow`**
- **`onstalled`**
- **`onsubmit`**
- **`onsuspend`**
- **`ontimeupdate`**
- **`ontoggle`**
- **`onunload`**
- **`onvolumechange`**
- **`onwaiting`**

## See also

- [SVG element reference](/en-US/docs/Web/SVG/Element)
- [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial)
- [SVG interface reference](/en-US/docs/Web/API/SVG_API#interfaces)