SVG Presentation Attributes
===========================

SVG presentation attributes are CSS properties that can be used as attributes on SVG elements.

* alignment-baseline
* baseline-shift
* clip
* clip-path
* clip-rule
* color
* color-interpolation
* color-interpolation-filters
* color-profile
* color-rendering
* cursor
* d
* direction
* display
* dominant-baseline
* enable-background
* fill
* fill-opacity
* fill-rule
* filter
* flood-color
* flood-opacity
* font-family
* font-size
* font-size-adjust
* font-stretch
* font-style
* font-variant
* font-weight
* glyph-orientation-horizontal
* glyph-orientation-vertical
* image-rendering
* kerning
* letter-spacing
* lighting-color
* marker-end
* marker-mid
* marker-start
* mask
* opacity
* overflow
* pointer-events
* shape-rendering
* solid-color
* solid-opacity
* stop-color
* stop-opacity
* stroke
* stroke-dasharray
* stroke-dashoffset
* stroke-linecap
* stroke-linejoin
* stroke-miterlimit
* stroke-opacity
* stroke-width
* text-anchor
* text-decoration
* text-rendering
* transform
* unicode-bidi
* vector-effect
* visibility
* word-spacing
* writing-mode
Attributes
----------

`alignment-baseline`

 It specifies how an object is aligned along the font baseline with respect to its parent.
 *Value*: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`; *Animatable*: **Yes**

`baseline-shift`

 It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
 *Value*: **`auto`**|`baseline`|`super`|`sub`|<percentage>|<length>|`inherit`; *Animatable*: **Yes**

`clip` 
Deprecated

 It defines what portion of an element is visible.
 *Value*: **`auto`**|`<shape>`|`inherit`; *Animatable*: **Yes**

`clip-path`

 It binds the element it is applied to with a given `<clipPath>` element.
 *Value*: **`none`**|<FuncIRI>|`inherit`; *Animatable*: **Yes**

`clip-rule`

 It indicates how to determine what side of a path is inside a shape in order to know how a `<clipPath>` should clip its target.
 *Value*: **`nonzero`**|`evenodd`|`inherit`; *Animatable*: **Yes**

`color`

 It provides a potential indirect value (`currentcolor`) for the `fill`, `stroke`, `stop-color`, `flood-color` and `lighting-color` presentation attributes.
 *Value*: <color>|`inherit`; *Animatable*: **Yes**

`color-interpolation`

 It specifies the color space for gradient interpolations, color animations, and alpha compositing.
 *Value*: `auto`|**`sRGB`**|`linearRGB`|`inherit`; *Animatable*: **Yes**

`color-interpolation-filters`

 It specifies the color space for imaging operations performed via filter effects.
 *Value*: `auto`|`sRGB`|**`linearRGB`**|`inherit`; *Animatable*: **Yes**

`color-profile` 
Deprecated

 It defines which color profile a raster image included through the `<image>` element should use.
 *Value*: `auto`|`sRGB`|`linearRGB`|<name>|<IRI>|`inherit`; *Animatable*: **Yes**

`color-rendering`

 It provides a hint to the browser about how to optimize its color interpolation and compositing operations.
 *Value*: **`auto`**|`optimizeSpeed`|`optimizeQuality`|`inherit`; *Animatable*: **Yes**

`cursor`

 It specifies the mouse cursor displayed when the mouse pointer is over an element.
 *Value*: <FuncIRI>|<keywords>|`inherit`; *Animatable*: **Yes**

`d`

 It defines a path to be drawn.
 *Value*: path()|`none`

`direction`

 It specifies the base writing direction of text.
 *Value*: **`ltr`**|`rtl`|`inherit`; *Animatable*: **Yes**

`display`

 It allows to control the rendering of graphical or container elements.
 *Value*: see CSS `display`; *Animatable*: **Yes**

`dominant-baseline`

 It defines the baseline used to align the box's text and inline-level contents.
 *Value*: `auto`|`text-bottom`|`alphabetic`|`ideographic`|`middle`|`central`| `mathematical`|`hanging`|`text-top`; *Animatable*: **Yes**

`enable-background` 
Deprecated

 It tells the browser how to manage the accumulation of the background image.
 *Value*: **`accumulate`**|`new`|`inherit`; *Animatable*: **No**

`fill`

 It defines the color of the inside of the graphical element it applies to.
 *Value*: <paint>; *Animatable*: **Yes**

`fill-opacity`

 It specifies the opacity of the color or the content the current object is filled with.
 *Value*: <number>|<percentage>; *Animatable*: **Yes**

`fill-rule`

 It indicates how to determine what side of a path is inside a shape.
 *Value*: **`nonzero`**|`evenodd`|`inherit`; *Animatable*: **Yes**

`filter`

 It defines the filter effects defined by the `<filter>` element that shall be applied to its element.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`flood-color`

 It indicates what color to use to flood the current filter primitive subregion defined through the `<feFlood>` or `<feDropShadow>` element.
 *Value*: <color>; *Animatable*: **Yes**

`flood-opacity`

 It indicates the opacity value to use across the current filter primitive subregion defined through the `<feFlood>` or `<feDropShadow>` element.
 *Value*: <number>|<percentage>; *Animatable*: **Yes**

`font-family`

 It indicates which font family will be used to render the text of the element.
 *Value*: see CSS `font-family`; *Animatable*: **Yes**

`font-size`

 It specifies the size of the font.
 *Value*: see CSS `font-size`; *Animatable*: **Yes**

`font-size-adjust`

 It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.
 *Value*: <number>|**`none`**|`inherit`; *Animatable*: **Yes**

`font-stretch`

 It selects a normal, condensed, or expanded face from a font.
 *Value*: see CSS `font-stretch`; *Animatable*: **Yes**

`font-style`

 It specifies whether a font should be styled with a normal, italic, or oblique face from its `font-family`.
 *Value*: **`normal`**|`italic`|`oblique`; *Animatable*: **Yes**

`font-variant`

 It specifies whether a font should be used with some of their variation such as small caps or ligatures.
 *Value*: see CSS `font-variant`; *Animatable*: **Yes**

`font-weight`

 It specifies the weight (or boldness) of the font.
 *Value*: **`normal`**|`bold`|`lighter`|`bolder`|`100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`; *Animatable*: **Yes**

`glyph-orientation-horizontal` 
Deprecated

 It controls glyph orientation when the inline-progression-direction is horizontal.
 *Value*: <angle>|`inherit`; *Animatable*: **No**

`glyph-orientation-vertical` 
Deprecated

 It controls glyph orientation when the inline-progression-direction is vertical.
 *Value*: **`auto`**|<angle>|`inherit`; *Animatable*: **No**

`image-rendering`

 It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
 *Value*: **`auto`**|`optimizeQuality`|`optimizeSpeed`; *Animatable*: **Yes**

`kerning` 
Deprecated

 It indicates whether the browser should adjust inter-glyph spacing.
 *Value*: **`auto`**|<length>|`inherit`; *Animatable*: **Yes**

`letter-spacing`

 It controls spacing between text characters.
 *Value*: **`normal`**|<length>|`inherit`; *Animatable*: **Yes**

`lighting-color`

 It defines the color of the light source for filter primitives elements `<feDiffuseLighting>` and `<feSpecularLighting>`.
 *Value*: <color>; *Animatable*: **Yes**

`marker-end`

 It defines the arrowhead or polymarker that will be drawn at the final vertex of the given `<path>` element or basic shape.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`marker-mid`

 It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given `<path>` element or basic shape.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`marker-start`

 It defines the arrowhead or polymarker that will be drawn at the first vertex of the given `<path>` element or basic shape.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`mask`

 It alters the visibility of an element by either masking or clipping the image at specific points.
 *Value*: see CSS `mask`; *Animatable*: **Yes**

`opacity`

 It specifies the transparency of an object or a group of objects.
 *Value*: <opacity-value>; *Animatable*: **Yes**

`overflow`

 Specifies whether the content of a block-level element is clipped when it overflows the element's box.
 *Value*: **`visible`**|`hidden|scroll`|`auto`|`inherit`; *Animatable*: **Yes**

`pointer-events`

 Defines whether or when an element may be the target of a mouse event.
 *Value*: `bounding-box`|**`visiblePainted`**|`visibleFill`|`visibleStroke`|`visible` |`painted`|`fill`|`stroke`|`all`|`none`; *Animatable*: **Yes**

`shape-rendering`

 Hints about what tradeoffs to make as the browser renders `<path>` element or basic shapes.
 *Value*: **`auto`**|`optimizeSpeed`|`crispEdges`|`geometricPrecision` |`inherit`; *Animatable*: **Yes**

`solid-color`

 -
 *Value*:; *Animatable*: **-**

`solid-opacity`

 -
 *Value*:; *Animatable*: **-**

`stop-color`

 Indicates what color to use at that gradient stop.
 *Value*: `currentcolor`|<color>|<icccolor>|`inherit`; *Animatable*: **Yes**

`stop-opacity`

 Defines the opacity of a given gradient stop.
 *Value*: <opacity-value>|`inherit`; *Animatable*: **Yes**

`stroke`

 Defines the color used to paint the outline of the shape.
 *Value*: <paint>; *Animatable*: **Yes**

`stroke-dasharray`

 Defines the pattern of dashes and gaps used to paint the outline of the shape.
 *Value*: `none`|`<dasharray>`; *Animatable*: **Yes**

`stroke-dashoffset`

 Defines an offset on the rendering of the associated dash array.
 *Value*: <percentage>|<length>; *Animatable*: **Yes**

**`stroke-linecap`**

 Defines the shape to be used at the end of open subpaths when they are stroked.
 *Value*: **`butt`**|`round`|`square`; *Animatable*: **Yes**

**`stroke-linejoin`**

 Defines the shape to be used at the corners of paths when they are stroked.
 *Value*: `arcs`|`bevel`|**`miter`**|`miter-clip`|`round`; *Animatable*: **Yes**

**`stroke-miterlimit`**

 Defines a limit on the ratio of the miter length to the `stroke-width` used to draw a miter join.
 *Value*: <number>; *Animatable*: **Yes**

**`stroke-opacity`**

 Defines the opacity of the stroke of a shape.
 *Value*: <opacity-value>|<percentage>; *Animatable*: **Yes**

**`stroke-width`**

 Defines the width of the stroke to be applied to the shape.
 *Value*: <length>|<percentage>; *Animatable*: **Yes**

**`text-anchor`**

 Defines the vertical alignment a string of text.
 *Value*: `start`|`middle`|`end`|**`inherit`**; *Animatable*: **Yes**

**`text-decoration`**

 Sets the appearance of decorative lines on text.
 *Value*: `none`|`underline`|`overline`|`line-through`|`blink`|**`inherit`**; *Animatable*: **Yes**

**`text-rendering`**

 Hints about what tradeoffs to make as the browser renders text.
 *Value*: **`auto`**|`optimizeSpeed`|`optimizeLegibility`|`geometricPrecision`|`inherit`; *Animatable*: **Yes**

**`transform`**

 Defines a list of transform definitions that are applied to an element and the element's children.
 *Value*: <transform-list>; *Animatable*: **Yes**

**`unicode-bidi`**

 -
 *Value*:; *Animatable*: **-**

**`vector-effect`**

 Specifies the vector effect to use when drawing an object.
 *Value*: `default`|`non-scaling-stroke`|`inherit`|`<uri>`; *Animatable*: **Yes**

**`visibility`**

 Lets you control the visibility of graphical elements.
 *Value*: **`visible`**|`hidden`|`collapse`|`inherit`; *Animatable*: **Yes**

**`word-spacing`**

 Specifies spacing behavior between words.
 *Value*: <length>|**`inherit`**; *Animatable*: **Yes**

**`writing-mode`**

 Specifies whether the initial inline-progression-direction for a `<text>` element shall be left-to-right, right-to-left, or top-to-bottom.
 *Value*: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; *Animatable*: **Yes**

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.