---
title: SVG Attribute reference
slug: Web/SVG/Attribute
tags:
  - Drawing
  - Landing
  - NeedsHelp
  - Overview
  - Responsive Design
  - SVG
  - SVG Attribute
  - SVG Reference
  - Vector Graphics
---
{{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-profile")}}
- {{SVGAttr("color-rendering")}}
- {{SVGAttr("contentScriptType")}}
- {{SVGAttr("contentStyleType")}}
- {{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("enable-background")}}
- {{SVGAttr("end")}}
- {{SVGAttr("exponent")}}

### F

- {{SVGAttr("fill")}}
- {{SVGAttr("fill-opacity")}}
- {{SVGAttr("fill-rule")}}
- {{SVGAttr("filter")}}
- {{SVGAttr("filterRes")}}
- {{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("kerning")}}
- {{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("viewTarget")}}
- {{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")}}
- {{SVGAttr("xlink:role")}}
- {{SVGAttr("xlink:show")}}
- {{SVGAttr("xlink:title")}}
- {{SVGAttr("xlink:type")}}
- {{SVGAttr("xml:base")}}
- {{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
  - : [Core attributes](/en-US/docs/Web/SVG/Attribute/Core)

    {{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}
- Style attributes
  - : [Style attributes](/en-US/docs/Web/SVG/Attribute/Styling)

    {{SVGAttr("class")}}, {{SVGAttr("style")}}
- Conditional processing attributes
  - : {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.

### XLink attributes

{{SVGAttr("xlink:href")}}, {{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](/en-US/docs/Web/SVG/Attribute/Presentation) 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-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{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("kerning")}}, {{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

- Animation event attributes
  - : [Animation event attributes](/en-US/docs/Web/SVG/Attribute/Events#animation_event_attributes)

    **`onbegin`**, **`onend`**, **`onrepeat`**
- Document event attributes
  - : [Document event attributes](/en-US/docs/Web/SVG/Attribute/Events#document_event_attributes)

    **`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**
- Global event attributes
  - : [Global event attributes](/en-US/docs/Web/SVG/Attribute/Events#global_event_attributes)

    **`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**
- Graphical event attributes
  - : [Graphical event attributes](/en-US/docs/Web/SVG/Attribute/Events#graphical_event_attributes)

    **`onactivate`**, **`onfocusin`**, **`onfocusout`**

## 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/Document_Object_Model#svg_interfaces)
