values - SVG: Scalable Vector Graphics

values
======

The `values` attribute has different meanings, depending upon the context where it's used, either it defines a sequence of values used over the course of an animation, or it's a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<feColorMatrix>`
animate, animateMotion, animateTransform
----------------------------------------

For `<animate>`, `<animateMotion>`, and `<animateTransform>`, `values` is a list of values defining the sequence of values over the course of the animation. If this attribute is specified, any `from`, `to`, and `by` attribute values set on the element are ignored.

|  |  |
| --- | --- |
| Value | `<list-of-values>` |
| Default value | *None* |
| Animatable | No |

`<list-of-values>`

The value holds a semicolon-separated list of one or more values. The type of the values is defined by the `href` and `attributeName` attributes.

feColorMatrix
-------------

For the `<feColorMatrix>` element, `values` is a list of numbers interpreted differently depending on the value of the `type` attribute.

|  |  |
| --- | --- |
| Value | `<list-of-numbers>` |
| Default value | *If `type="matrix"`, identity matrix,if
`type="saturate"`, `1`, resulting in identity
matrix,if `type="hueRotate"`, `0`,
resulting in identity matrix* |
| Animatable | Yes |

`<list-of-numbers>`

The value is a list of numbers, which is interpreted differently depending on the value of the `type` attribute:

* For `type="matrix"`, `values` is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 … a34), separated by whitespace and/or a comma.
* For `type="saturate"`, `values` is a single real number value (0 to 1).
* For `type="hueRotate"`, `values` is a single one real number value (degrees).
* For `type="luminanceToAlpha"`, `values` is not applicable.

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecolormatrix-values |
| SVG Animations Level 2 # ValuesAttribute |


end - SVG: Scalable Vector Graphics

end
===

The **`end`** attribute defines an end value for the animation that can constrain the active duration.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Usage notes
-----------

|  |  |
| --- | --- |
| Default value | *None* |
| Value | `<end-value-list>` |
| Animatable | No |

The `<end-value-list>` is a semicolon-separated list of values. Each value can be one of the following:

`<offset-value>`

This value defines a clock-value that represents a point in time relative to the beginning of the SVG document (usually the `load` or `DOMContentLoaded` event). Negative values are valid.

`<syncbase-value>`

This value defines a *syncbase* and an optional offset from that *syncbase*. The element's animation end time is defined relative to the begin or active end of another animation.

A valid syncbase-value consists of an ID reference to another animation element followed by a dot and either `begin` or `end` to identify whether to synchronize with the beginning or active end of the referenced animation element. An optional offset value as defined in `<offset-value>` can be appended.

`<event-value>`

This value defines an event and an optional offset that determines the time at which the element's animation should end. The animation end time is defined relative to the time that the specified event is fired.

A valid event-value consists of an element ID followed by a dot and one of the supported events for that element. All valid events (not necessarily supported by all elements) are defined by the DOM and HTML specifications. Those are:

* `focus`
* `blur`
* `focusin`
* `focusout`
* `activate`
* `auxclick`
* `click`
* `dblclick`
* `mousedown`
* `mouseenter`
* `mouseleave`
* `mousemove`
* `mouseout`
* `mouseover`
* `mouseup`
* `wheel`
* `beforeinput`
* `input`
* `keydown`
* `keyup`
* `compositionstart`
* `compositionupdate`
* `compositionend`
* `load`
* `unload`
* `abort`
* `error`
* `select`
* `resize`
* `scroll`
* `beginEvent`
* `endEvent`
* `repeatEvent`

An optional offset value as defined in `<offset-value>` can be appended.

`<repeat-value>`

This value defines a qualified repeat event. The element animation end time is defined relative to the time that the repeat event is raised with the specified iteration value.

A valid repeat value consists of an element ID followed by a dot and the function `repeat()` with an integer value specifying the number of repetitions as parameter. An optional offset value as defined in `<offset-value>` can be appended.

`<accessKey-value>`

This value defines an access key that should trigger the end of the animation. The element animation will end when the user presses the specified key.

A valid accessKey-value consists of the function `accessKey()` with the character to be input as parameter. An optional offset value as defined in `<offset-value>` can be appended.

`<wallclock-sync-value>`

This value defines the animation end time as a real-world clock time.

A valid wallclock-sync-value consists of the function `wallclock()` with a time value as parameter. The time syntax is based upon the syntax defined in ISO 8601.

`indefinite`

The end of the animation will be determined by an `SVGAnimationElement.endElement()` method call.

Examples
--------

### Offset example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="100"
 begin="0s"
 end="8s"
 fill="freeze" />
  </rect>

  <rect x="10" y="60" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="75"
 begin="0s"
 end="6s"
 fill="freeze" />
  </rect>

  <rect x="10" y="85" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="50"
 begin="0s"
 end="4s"
 fill="freeze" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>
```

### Event example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="0s"
 end="endButton.click"
 dur="8s"
 repeatCount="indefinite"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <rect
 id="endButton"
 style="cursor:pointer;"
 x="19.5"
 y="62.5"
 rx="5"
 height="25"
 width="80"
 fill="#EFEFEF"
 stroke="black"
 stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

### Accesskey example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="0s"
 end="accessKey(e)"
 dur="8s"
 repeatCount="indefinite"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

*This example is embedded in an iFrame. If you want to activate the key events, you have to click on it first.*

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # EndAttribute |


ascent - SVG: Scalable Vector Graphics

ascent
======

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`ascent`** attribute defines the maximum unaccented height of the font within the font coordinate system.

If the attribute is not specified, the effect is as if the attribute were set to the difference between the `units-per-em` value and the `vert-origin-y` value for the corresponding font.

You can use this attribute with the following SVG elements:

* `<font-face>`
font-face
---------

For `<font-face>`, `ascent` defines the maximum unaccented height of the font within the font coordinate system.

|  |  |
| --- | --- |
| Value | <number> |
| Default value |
 Difference between `units-per-em` and
 `vert-origin-y` |
| Animatable | No |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementAscentAttribute |

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

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


vert-adv-y - SVG: Scalable Vector Graphics

vert-adv-y
==========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`vert-adv-y`** attribute indicates the vertical advance after rendering a glyph in vertical orientation.

You can use this attribute with the following SVG elements:

* `<font>`
* `<glyph>`
* `<missing-glyph>`
font
----

For `<font>` elements, `vert-adv-y` specifies the default vertical advance for a glyph in vertical orientation.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *1 em as of `units-per-em`* |
| Animatable | No |

`<number>`

This value indicates the default vertical advance of the glyph in vertical direction

glyph, missing-glyph
--------------------

For `<glyph>` and `<missing-glyph>` elements, `vert-adv-y` specifies the vertical advance for a glyph in vertical orientation.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *`<font>`'s `vert-adv-y` value* |
| Animatable | No |

`<number>`

This value indicates the vertical advance of the glyph in vertical direction

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementVertAdvYAttribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontElementVertAdvYAttribute |

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

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

See also
--------

* `horiz-adv-x`
* `units-per-em`


stroke-dasharray - SVG: Scalable Vector Graphics

stroke-dasharray
================

The **`stroke-dasharray`** attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;

**Note:** As a presentation attribute, `stroke-dasharray` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<path>`
* `<line>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
 line {
 stroke: black;
 }
 </style>
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- Dashes starting with a gap -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `none` | `<dasharray>` |
| Default value | `none` |
| Animatable | Yes |

<dasharray>

A list of comma and/or white space separated `<length>`s and `<percentage>`s that specify the lengths of alternating dashes and gaps.

If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, `5,3,2` is equivalent to `5,3,2,5,3,2`.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashing |

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

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


repeatCount - SVG: Scalable Vector Graphics

repeatCount
===========

The **`repeatCount`** attribute indicates the number of times an animation will take place.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="5" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` | `indefinite` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value specifies the number of iterations. It can include partial iterations expressed as fraction values. A fractional value describes a portion of the simple duration. Values must be greater than `0`.

`indefinite`

This value indicates that the animation will be repeated indefinitely (i.e. until the document ends).

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # RepeatCountAttribute |

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

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


v-mathematical - SVG: Scalable Vector Graphics

v-mathematical
==============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`v-mathematical`** attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for vertically oriented glyph layouts. The value is an offset in the font coordinate system relative to the glyph-specific `vert-origin-x` attribute.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value indicates the alignment coordinate for the glyphs.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementVertMathematicalAttribute |

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

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


z - SVG: Scalable Vector Graphics

z
=

The **`z`** attribute defines the location along the z-axis for a light source in the coordinate system established by the `primitiveUnits` attribute on the `<filter>` element, assuming that, in the initial coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.

You can use this attribute with the following SVG elements:

* `<fePointLight>`
* `<feSpotLight>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="diffuseLighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <fePointLight x="60" y="60" z="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <fePointLight x="60" y="60" z="50" />
    </feDiffuseLighting>
  </filter>

  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#diffuseLighting1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#diffuseLighting2); transform: translateX(220px);" />
</svg>
```

fePointLight
------------

For `<fePointLight>`, `z` defines the location along the z-axis for the light source in the coordinate system established by the `primitiveUnits` attribute on the `<filter>` element.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `1` |
| Animatable | Yes |

feSpotLight
-----------

For `<feSpotLight>`, `z` defines the location along the z-axis for the light source in the coordinate system established by the `primitiveUnits` attribute on the `<filter>` element.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `1` |
| Animatable | Yes |

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-z |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-z |


repeatDur - SVG: Scalable Vector Graphics

repeatDur
=========

The **`repeatDur`** attribute specifies the total duration for repeating an animation.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatDur="5s" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatDur="indefinite" />
  </rect>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<clock-value>`
 | `indefinite` |
| Default values | *None* |
| Animatable | No |

`<clock-value>`

This value specifies the duration in presentation time to repeat the animation.

`indefinite`

This value indicates that the animation will be repeated indefinitely (i.e. until the document ends).

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # RepeatDurAttribute |


filter - SVG: Scalable Vector Graphics

filter
======

The **`filter`** attribute specifies the filter effects defined by the `<filter>` element that shall be applied to its element.

**Note:** As a presentation attribute, `filter` can be used as a CSS property. See `CSS filter` for further information.

As a presentation attribute, it can be applied to any element but it only has effect on container elements without the `<defs>` element, all graphics elements and the `<use>` element.

Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `none`
|
`<filter-function-list>` |
| Default value | `none` |
| Animatable | Yes |

For a description of the values see the `CSS filter` property.

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # FilterProperty |

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

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

See also
--------

* `<filter>`
* `CSS filter`


strikethrough-thickness - SVG: Scalable Vector Graphics

strikethrough-thickness
=======================

The `strikethrough-thickness` attribute represents the ideal thickness of the strikethrough. The strikethrough thickness is expressed in the font's coordinate system.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage context
-------------

|  |  |
| --- | --- |
| Categories | *None* |
| Value | <number> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |


underline-thickness - SVG: Scalable Vector Graphics

underline-thickness
===================

The `underline-thickness` attribute represents the ideal thickness of the underline. The underline thickness is expressed in the font's coordinate system.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage context
-------------

|  |  |
| --- | --- |
| Categories | *None* |
| Value | <number> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |


gradientUnits - SVG: Scalable Vector Graphics

gradientUnits
=============

The **`gradientUnits`** attribute defines the coordinate system used for attributes specified on the gradient elements.

You can use this attribute with the following SVG elements:

* `<linearGradient>`
* `<radialGradient>`
linearGradient
--------------

For `<linearGradient>`, `gradientUnits` defines the coordinate system used for the attributes `x1`, `y1`, `x2`, and `y2`.

|  |  |
| --- | --- |
| Value | `userSpaceOnUse` | `objectBoundingBox` |
| Default value | `objectBoundingBox` |
| Animatable | Yes |

`userSpaceOnUse`

 This value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a `fill` or `stroke` property) and then applying the transform specified by attribute `gradientTransform`.
 Percentages represent values relative to the current SVG viewport.

`objectBoundingBox`

This value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute `gradientTransform`.

Percentages represent values relative to the bounding box for the object.

With this value and `gradientTransform` being the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular relative to the gradient vector in user space. If the gradient vector is parallel to one of the axes of the bounding box, the gradient normal will remain perpendicular. This transformation is due to application of the non-uniform scaling transformation from bounding box space to user space.

radialGradient
--------------

For `<radialGradient>`, `gradientUnits` defines the coordinate system used for the attributes `cx`, `cy`, `r`, `fx`, `fy`, and `fr`.

|  |  |
| --- | --- |
| Value | `userSpaceOnUse` | `objectBoundingBox` |
| Default value | `objectBoundingBox` |
| Animatable | Yes |

`userSpaceOnUse`

`cx`, `cy`, `r`, `fx`, `fy`, and `fr` represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a `fill` or `stroke` property) and then applying the transform specified by attribute `gradientTransform`.

`objectBoundingBox`

 for `<radialGradient>`: the user coordinate system for attributes `cx`, `cy`, `r`, `fx`, `fy`, and `fr` is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute `gradientTransform`.
 With this value and `gradientTransform` being the identity matrix, the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user space.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementGradientUnitsAttribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementGradientUnitsAttribute |


attributeType - SVG: Scalable Vector Graphics

attributeType
=============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`attributeType`** attribute specifies the namespace in which the target attribute and its associated values are defined.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateTransform>`
* `<set>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="5s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `CSS` | `XML` | `auto` |
| Default value | `auto` |
| Animatable | No |

`CSS`

This value specifies that the value of `attributeName` is the name of a CSS property defined as animatable.

`XML`

This value specifies that the value of `attributeName` is the name of an XML attribute defined as animatable in the default XML namespace for the target element.

`auto`

This value specifies that the implementation should match the `attributeName` to an attribute for the target element. User agents first search through the list of CSS properties for a matching property name, and if none is found, search the default XML namespace for the element.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # AttributeTypeAttribute |

See also
--------

* SMIL Animation specification


textLength - SVG: Scalable Vector Graphics

textLength
==========

The **`textLength`** attribute, available on SVG `<text>` and `<tspan>` elements, lets you specify the width of the space into which the text will draw. The user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the `lengthAdjust` attribute. By default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change `lengthAdjust`.

By using `textLength`, you can ensure that your SVG text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet).

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <text y="20" textLength="6em">Small text length</text>
  <text y="40" textLength="120%">Big text length</text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
 `<number>` |
| Default value | None |
| Animatable | Yes |

`<length-percentage>`

This value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage.

`<number>`

A numeric value outlines a length referring to the units of the current coordinate system.

Interactive example
-------------------

Let's create a simple example that presents text you can resize using an `<input>` element of type `"range"`.

### CSS

```css
.controls {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
}
```

### SVG

Let's start with the SVG. It's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box.

```html
<svg
 width="10cm"
 height="3cm"
 viewBox="0 0 1000 300"
 xmlns="http://www.w3.org/2000/svg">
  <rect
 x="1"
 y="1"
 width="998"
 height="298"
 fill="none"
 stroke="green"
 stroke-width="2" />

  <text
 id="hello"
 x="10"
 y="150"
 font-family="sans-serif"
 font-size="60"
 fill="green">
    Hello world!
  </text>
</svg>
```

First, a `<rect>` element is used to create and stroke a rectangle to contain the text. Then `<text>` is used to create the text element itself, with an `id` of `"hello"`.

### HTML

The HTML is also simple, with only two displayed elements contained inside a grouping `<div>`:

```html
<div class="controls">
  <input type="range" id="widthSlider" min="80" max="978" />
  <span id="widthDisplay"></span>
</div>
```

The `<input>` element, of type `"range"`, is used to create the slider control the user will manipulate to change the width of the text. A `<span>` element of ID `"widthDisplay"` is provided to display the current width value.

### JavaScript

Finally, let's have a look at the JavaScript code. It starts by stashing references to the elements it will need to access, using `Document.getElementById()`:

```js
const widthSlider = document.getElementById("widthSlider");
const widthDisplay = document.getElementById("widthDisplay");
const textElement = document.getElementById("hello");
const baseLength = Math.floor(textElement.textLength.baseVal.value);

widthSlider.value = baseLength;

widthSlider.addEventListener(
  "input",
  (event) => {
    textElement.textLength.baseVal.newValueSpecifiedUnits(
      SVGLength.SVG\_LENGTHTYPE\_PX,
      widthSlider.valueAsNumber,
    );
    widthDisplay.innerText = widthSlider.value;
  },
  false,
);

widthSlider.dispatchEvent(new Event("input"));
```

After fetching the element references, an event listener is established by calling `addEventListener()` on the slider control, to receive any `input` events which occur. These events will be sent any time the slider's value changes, even if the user hasn't stopped moving it, so we can responsively adjust the text width.

When an `"input"` event occurs, we call `newValueSpecifiedUnits()` to set the value of `textLength` to the slider's new value, using the `SVGLength` interface's `SVG_LENGTHTYPE_PX` unit type to indicate that the value represents pixels. Note that we have to dive into `textLength` to get its `baseVal` property; `textLength` is stored as an `SVGLength` object, so we can't treat it like a plain number.

After updating the text width, the contents of the `widthDisplay` box are updated with the new value as well, and we're finished.

### Result

Here's what the example looks like. Try dragging the slider around to get a feel for what it does.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextElementTextLengthAttribute |

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

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

See also
--------

* SVG Tutorial: Texts
* `SVGAnimatedLength` and `SVGLength`
* `<text>`


in - SVG: Scalable Vector Graphics

in
==

The **`in`** attribute identifies input for the given filter primitive.

The value can be either one of the six keywords defined below, or a string which matches a previous `result` attribute value within the same `<filter>` element. If no value is provided and this is the first filter primitive, then this filter primitive will use `SourceGraphic` as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.

If the value for `result` appears multiple times within a given `<filter>` element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute `result`.

You can use this attribute with the following SVG elements:

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feGaussianBlur>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `SourceGraphic` | `SourceAlpha` |
 `BackgroundImage` | `BackgroundAlpha` |
 `FillPaint` | `StrokePaint` |
 `<filter-primitive-reference>` |
| Default value | `SourceGraphic` for first filter primitive, otherwise result
 of previous filter primitive
  |
| Animatable | Yes |

`SourceGraphic`

This keyword represents the graphics elements that were the original input into the `<filter>` element.

`SourceAlpha`

This keyword represents the graphics elements that were the original input into the `<filter>` element. `SourceAlpha` has all of the same rules as `SourceGraphic` except that only the alpha channel is used.

`BackgroundImage`

This keyword represents an image snapshot of the SVG document under the filter region at the time that the `<filter>` element was invoked.

`BackgroundAlpha`

Same as `BackgroundImage` except only the alpha channel is used.

`FillPaint`

This keyword represents the value of the `fill` property on the target element for the filter effect. In many cases, the `FillPaint` is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.

`StrokePaint`

This keyword represents the value of the `stroke` property on the target element for the filter effect. In many cases, the `StrokePaint` is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.

`<filter-primitive-reference>`

This value is an assigned name for the filter primitive in the form of a `<custom-ident>`. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same filter element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute.

Workaround for BackgroundImage
------------------------------

`BackgroundImage` is not supported as a filter source in modern browsers (see the feComposite compatibility table). We therefore need to import one of the images to blend inside the filter itself, using an `<feImage>` element.

**Note:** Firefox Bug 455986 means that `feImage` cannot load partial images, including circles, rectangles, paths or other fragments defined in the document. So that this example works on more browsers, a full external image of the logo is loaded.

### HTML

```html
<div style="width: 420px; height: 220px;">
  <svg
 style="width:200px; height:200px; display: inline;"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="backgroundMultiply">
        <!-- This will not work. -->
        <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <image
 href="mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%" />
    <circle
 cx="50%"
 cy="40%"
 r="40%"
 fill="#c00"
 style="filter:url(#backgroundMultiply);" />
  </svg>

  <svg
 style="width:200px; height:200px; display: inline;"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="imageMultiply">
        <!-- This is a workaround. -->
        <feImage
 href="mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%" />
        <feBlend in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <circle
 cx="50%"
 cy="40%"
 r="40%"
 fill="#c00"
 style="filter:url(#imageMultiply);" />
  </svg>
</div>
```

### Result

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-in |


startOffset - SVG: Scalable Vector Graphics

startOffset
===========

The **`startOffset`** attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the `<textPath>` element's coordinate system.

You can use this attribute with the following SVG elements:

* `<textPath>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <path
 id="path1"
 fill="none"
 stroke="red"
 d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <path
 id="path2"
 fill="none"
 stroke="red"
 d="M130,90 Q210,90 210,45 Q210,10 170,10 Q130,10 130,40 Q130,70 165,70 Q190,70 195,50" />

  <text>
    <textPath href="#path1" startOffset="0">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

  <text>
    <textPath href="#path2" startOffset="40">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
 `<number>` |
| Default value | `0` |
| Animatable | Yes |

`<length-percentage>`

A length represents a distance along the path measured in the current user coordinate system for the `<textPath>` element.

If a percentage is given, then the start offset represents a percentage distance along the entire path. Thus, `0%` indicates the start point of the path and `100%` indicates the end point of the path.

`<number>`

This value indicates a distance along the path measured in the current user coordinate system for the `<textPath>` element.

**Note:** Negative values and values larger than the path length (e.g. `150%`) are allowed.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextPathElementStartOffsetAttribute |

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

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


cursor - SVG: Scalable Vector Graphics

cursor
======

SVG Attribute reference home

The `cursor` attribute specifies the mouse cursor displayed when the mouse pointer is over an element.

This attribute behaves exactly like the `CSS cursor` property except that if the browser supports the `<cursor>` element, you should be able to use it with the <funciri> notation.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see `CSS cursor` for further information.

Usage context
-------------

|  |  |
| --- | --- |
| Categories | Presentation attribute |
| Value |
 [[<funciri>,]\* [ **auto** | crosshair | default | pointer | move |
 e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
 s-resize | w-resize| text | wait | help ]] | inherit
  |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

Elements
--------

The following elements can use the `cursor` attribute

* Container elements
* Graphics elements
Browser compatibility
---------------------

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

See also
--------

* `CSS cursor`


by - SVG: Scalable Vector Graphics

by
==

The **`by`** attribute specifies a relative offset value for an attribute that will be modified during an animation.

The starting value for the attribute is either indicated by specifying it as value for the attribute given in the `attributeName` or the `from` attribute.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100">
    <animate attributeName="width" fill="freeze" by="50" dur="3s" />
  </rect>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | *See below* |
| Default value | *None* |
| Animatable | No |

The exact value type for this attribute depends on the value of the attribute that will be animated.

When a list of values is defined via the `values` attribute, the `by` attribute is ignored.

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # ByAttribute |

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

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


unicode - SVG: Scalable Vector Graphics

unicode
=======

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`unicode`** attribute specifies one or more Unicode characters indicating the sequence of Unicode characters which corresponds to a glyph.

If a character is provided, then this glyph corresponds to the given Unicode character. If multiple characters are provided, then this glyph corresponds to the given sequence of Unicode characters. One use of a sequence of characters is ligatures. For example, if `unicode="ffl"`, then the given glyph will be used to render the sequence of characters "f", "f", and "l".

It is often useful to refer to characters using XML character references expressed in hexadecimal notation or decimal notation. For example, `unicode="ffl"` could be expressed as XML character references in hexadecimal notation as `unicode="ffl"` or in decimal notation as `unicode="ffl"`.

The `unicode` attribute contributes to the process for deciding which glyph(s) are used to represent which character(s).

You can use this attribute with the following SVG elements:

* `<glyph>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `<string>` |
| Default value | *None* |
| Animatable | No |

`<string>`

This value specifies one or more Unicode characters corresponding to a glyph.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementUnicodeAttribute |

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

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


fr - SVG: Scalable Vector Graphics

fr
==

The **`fr`** attribute defines the radius of the focal point for the radial gradient.

You can use this attribute with the following SVG elements:

* `<radialGradient>`
Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```

### Changing the value of `fr`

The following example presents two circles: the first one has `fr` set to `5%` while the other circle has `fr` set to `25%`.

```html
<svg
 viewBox="0 0 480 200"
 width="420"
 height="160"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="gradient1"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="darkseagreen" />
    </radialGradient>
    <radialGradient
 id="gradient2"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="25%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="darkseagreen" />
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="100" fill="url(#gradient1)" />
  <circle
 cx="100"
 cy="100"
 r="100"
 fill="url(#gradient2)"
 style="transform: translateX(240px);" />
</svg>
```

### The focal point's relationship to `(fx, fy)`

This example has `fr` equal to `5%` and is representing how the attributes `fx` and `fy` (the points labeled as such in the SVG) act as the origin for the focal point of the radial gradient. This focal point is a circle whose radius (the value of `fr`) defines when the first color stop, in this case the color red, should start transitioning into the other color stop, which in this case is the color blue.

```html
<svg
 viewBox="0 0 120 120"
 width="165"
 height="165"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="Gradient"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="45" cy="45" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<length>` |
| Default value | `0` |
| Animatable | None |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFRAttribute |

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

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


font-size-adjust - SVG: Scalable Vector Graphics

font-size-adjust
================

The `font-size-adjust` attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font.

**Note:** As a presentation attribute, `font-size-adjust` can be used as a CSS property. See the `CSS font-size-adjust` property for more information.

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg
 width="600"
 height="80"
 viewBox="0 0 500 80"
 xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="Times, serif" font-size="10px">
    This text uses the Times font (10px), which is hard to read in small sizes.
  </text>
  <text y="40" font-family="Verdana, sans-serif" font-size="10px">
    This text uses the Verdana font (10px), which has relatively large lowercase
    letters.
  </text>
  <text
 y="60"
 font-family="Times, serif"
 font-size="10px"
 font-size-adjust="0.58">
    This is the 10px Times, but now adjusted to the same aspect ratio as the
    Verdana.
  </text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Default value | `none` |
| Value | `none` | `<number>` |
| Animatable | Yes |

`none`

Choose the size of the font based only on the `font-size` property.

`<number>`

Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the `font-size`.

The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice `font-family`. This means that the first-choice font, when available, will appear the same size in browsers, whether or not they support `font-size-adjust`.

`0` yields text of zero height (hidden text).

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-size-adjust-prop |

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

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

See also
--------

* `CSS font-size-adjust`


alignment-baseline - SVG: Scalable Vector Graphics

alignment-baseline
==================

The **`alignment-baseline`** attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the `alignment-baseline` property.

**Note:** As a presentation attribute `alignment-baseline` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<tspan>`
* `<tref>`
* `<textPath>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `auto` | `baseline` | `before-edge` |
 `text-before-edge` | `middle` |
 `central` | `after-edge` |
 `text-after-edge` | `ideographic` |
 `alphabetic` | `hanging` |
 `mathematical` | `top` | `center` |
 `bottom` |
| Default value | `auto` |
| Animatable | Yes |

`auto`
Deprecated

The value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent.

`baseline`

Uses the dominant baseline choice of the parent. Matches the box's corresponding baseline to that of its parent.

`before-edge`
Deprecated

The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.

`text-bottom`

Matches the bottom of the box to the top of the parent's content area.

`text-before-edge`

The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.

**Note:** This keyword may be mapped to `text-top`.

`middle`

Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

`central`

Matches the box's central baseline to the central baseline of its parent.

`after-edge`
Deprecated

The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.

`text-top`

Matches the top of the box to the top of the parent's content area.

`text-after-edge`

The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.

**Note:** This keyword may be mapped to `text-bottom`.

`ideographic`

Matches the box's ideographic character face under-side baseline to that of its parent.

`alphabetic`

Matches the box's alphabetic baseline to that of its parent.

`hanging`

The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.

`mathematical`

Matches the box's mathematical baseline to that of its parent.

`top`

Aligns the top of the aligned subtree with the top of the line box.

`center`

Aligns the center of the aligned subtree with the center of the line box.

`bottom`

Aligns the bottom of the aligned subtree with the bottom of the line box.

SVG 2 introduces some changes to the definition of this property. In particular: the values `auto`, `before-edge`, and `after-edge` have been removed. For backwards compatibility, `text-before-edge` may be mapped to `text-top` and `text-after-edge` to `text-bottom`. Neither `text-before-edge` nor `text-after-edge` should be used with the `vertical-align` property.

Example
-------

```html
<svg
 width="300"
 height="120"
 viewBox="0 0 300 120"
 xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
 d="M60,10 L60,110
 M30,10 L300,10
 M30,65 L300,65
 M30,110 L300,110
 "
 stroke="grey" />

  <!-- Anchors in action -->
  <text alignment-baseline="hanging" x="60" y="10">A hanging</text>

  <text alignment-baseline="middle" x="60" y="65">A middle</text>

  <text alignment-baseline="baseline" x="60" y="110">A baseline</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="10" r="3" fill="red" />
  <circle cx="60" cy="65" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

  <style>
 <![CDATA[
 text{
 font: bold 36px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]>
 </style>
</svg>
```

For object alignment in other elements (such as `<text>`), see `dominant-baseline`.

Specifications
--------------

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # alignment-baseline-property |
| Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty |

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

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

See also
--------

* `CSS alignment-baseline`


pointsAtZ - SVG: Scalable Vector Graphics

pointsAtZ
=========

The **`pointsAtZ`** attribute represents the y location in the coordinate system established by attribute `primitiveUnits` on the `<filter>` element of the point at which the light source is pointing, assuming that, in the initial local coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.

You can use this attribute with the following SVG elements:

* `<feSpotLight>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="lighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <feSpotLight x="100" y="100" z="50" pointsAtZ="0" />
    </feDiffuseLighting>
  </filter>
  <filter id="lighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <feSpotLight x="100" y="100" z="50" pointsAtZ="80" />
    </feDiffuseLighting>
  </filter>

  <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#lighting2); transform: translateX(220px);" />
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Default value | `0` |
| Value | `<number>` |
| Animatable | Yes |

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-pointsatz |

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

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


text-decoration - SVG: Scalable Vector Graphics

text-decoration
===============

The **`text-decoration`** attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the `text-decoration-line` and `text-decoration-style` properties.

The fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared.

The paint order of the text decoration, i.e. the fill and stroke, is determined by the value of the `paint-order` attribute at the point where the text decoration is declared.

**Note:** As a presentation attribute, `text-decoration` can be used as a CSS property. See the `CSS text-decoration` property for more information.

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" text-decoration="underline">Underlined text</text>
  <text x="0" y="40" text-decoration="line-through">Struck-through text</text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<'text-decoration-line'>`
 ||
 `<'text-decoration-style'>`
 ||
 `<'text-decoration-color'>` |
| Default value | See individual properties |
| Animatable | Yes |

For a description of the values, please refer to the CSS `text-decoration` property.

Specifications
--------------

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |

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

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

See also
--------

* `CSS text-decoration`


color-interpolation - SVG: Scalable Vector Graphics

color-interpolation
===================

The **`color-interpolation`** attribute specifies the color space for gradient interpolations, color animations, and alpha compositing.

**Note:** For filter effects, the `color-interpolation-filters` property controls which color space is used.

The color-interpolation property chooses between color operations occurring in the sRGB color space or in a (light energy linear) linearized RGB color space. Having chosen the appropriate color space, component-wise linear interpolation is used.

When a child element is blended into a background, the value of the `color-interpolation` property on the child determines the type of blending, not the value of the `color-interpolation` on the parent. For gradients which make use of the `href` or the deprecated `xlink:href` attribute to reference another gradient, the gradient uses the property's value from the gradient element which is directly referenced by the `fill` or `stroke` property. When animating colors, color interpolation is performed according to the value of the `color-interpolation` property on the element being animated.

**Note:** As a presentation attribute, `color-interpolation` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<circle>`
* `<clipPath>`
* `<defs>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<glyph>`
* `<image>`
* `<line>`
* `<linearGradient>`
* `<marker>`
* `<mask>`
* `<missing-glyph>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<radialGradient>`
* `<rect>`
* `<svg>`
* `<switch>`
* `<symbol>`
* `<text>`
* `<textPath>`
* `<tspan>`
* `<use>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `auto` | `sRGB` | `linearRGB` |
| Default value | `sRGB` |
| Animatable | discrete |

`auto`

Indicates that the user agent can choose either the `sRGB` or `linearRGB` spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.

`sRGB`

Indicates that color interpolation should occur in the sRGB color space.

`linearRGB`

Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ColorInterpolation |

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

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

See also
--------

* sRGB specification
* `color-interpolation-filters`
* Computer color is broken - popular demonstration of linearRGB


horiz-origin-y - SVG: Scalable Vector Graphics

horiz-origin-y
==============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`horiz-origin-y`** attribute indicates the y-coordinate in the font coordinate system of the origin of a glyph to be used when drawing horizontally oriented text.

**Note:** The origin applies to all glyphs in the font.

You can use this attribute with the following SVG elements:

* `<font>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `0` |
| Animatable | No |

`<number>`

This value indicates the x-coordinate of the origin of a glyph for horizontally oriented text.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontElementHorizOriginYAttribute |

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

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

See also
--------

* `horiz-origin-x`
* `vert-origin-x`
* `vert-origin-y`


x2 - SVG: Scalable Vector Graphics

x2
==

The **`x2`** attribute is used to specify the second x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the `x` attribute instead.

You can use this attribute with the following SVG elements:

* `<line>`
* `<linearGradient>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="5" x2="1" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="5" x2="9" y1="1" y2="9" stroke="blue" />
</svg>
```

line
----

For `<line>`, `x2` defines the x coordinate of the ending point of the line.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>**
 |
 **<number>** |
| Default value | `0` |
| Animatable | Yes |
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="5" x2="1" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="5" x2="9" y1="1" y2="9" stroke="blue" />
</svg>
```

linearGradient
--------------

For `<linearGradient>`, `x2` defines the x coordinate of the ending point of the *gradient vector* used to map the gradient stop values. The exact behavior of this attribute is influenced by the `gradientUnits` attributes

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>**
 |
 **<number>** |
| Default value | `100%` |
| Animatable | Yes |
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 By default the gradient vector end at the right
 bounding limit of the shape it is applied to
 -->
  <linearGradient x2="100%" id="g0">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

  <rect x="1" y="1" width="8" height="8" fill="url(#g0)" />

  <!--
 Here the gradient vector start at 20% of the left
 bounding limit of the shape it is applied to
 -->
  <linearGradient x2="20%" id="g1">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

  <rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
</svg>
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineElementX2Attribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementX2Attribute |


ideographic - SVG: Scalable Vector Graphics

ideographic
===========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`ideographic`** attribute indicates the alignment coordinate for glyphs to achieve ideographic baseline alignment for horizontally oriented glyph layouts. The value is an offset in the font coordinate system.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value indicates the alignment coordinate for the glyphs.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementIdeographicAttribute |

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

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


maskContentUnits - SVG: Scalable Vector Graphics

maskContentUnits
================

The **`maskContentUnits`** attribute indicates which coordinate system to use for the contents of the `<mask>` element.

You can use this attribute with the following SVG elements:

* `<mask>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask1" maskContentUnits="userSpaceOnUse">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>

  <mask id="myMask2" maskContentUnits="objectBoundingBox">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx=".5" cy=".5" r=".35" />
  </mask>

  <!-- Some reference rect to materialized the mask -->
  <rect id="r1" x="0" y="0" width="45" height="45" />
  <rect id="r2" x="0" y="55" width="45" height="45" />
  <rect id="r3" x="55" y="55" width="45" height="45" />
  <rect id="r4" x="55" y="0" width="45" height="45" />

  <!-- The first 3 rect are masked with useSpaceOnUse units -->
  <use mask="url(#myMask1)" href="#r1" fill="red" />
  <use mask="url(#myMask1)" href="#r2" fill="red" />
  <use mask="url(#myMask1)" href="#r3" fill="red" />

  <!-- The last rect is masked with objectBoundingBox units -->
  <use mask="url(#myMask2)" href="#r4" fill="red" />
</svg>
```

mask
----

For `<mask>`, `maskContentUnits` defines the coordinate system in use for the content of the element.

|  |  |
| --- | --- |
| Value | `userSpaceOnUse` | `objectBoundingBox` |
| Default value | `userSpaceOnUse` |
| Animatable | Yes |

`userSpaceOnUse`

This value indicates that all coordinates inside the `<mask>` element refer to the user coordinate system as defined when the mask was created.

`objectBoundingBox`

This value indicates that all coordinates inside the `<mask>` element are relative to the bounding box of the element the mask is applied to. A bounding box could be considered the same as if the content of the `<mask>` were bound to a "`0 0 1 1`" `viewBox`.

Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # element-attrdef-mask-maskcontentunits |

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

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


k - SVG: Scalable Vector Graphics

k
=

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`k`** attribute specifies the amount for decreasing the spacing between the two glyphs in a kerning pair.

The value is in the font coordinate system. This attribute is required.

You can use this attribute with the following SVG elements:

* `<hkern>`
* `<vkern>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value indicates the amount for decreasing the spacing between the two glyphs in the kerning pair.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # HKernElementKAttribute |

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

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


lang - SVG: Scalable Vector Graphics

lang
====

The **`lang`** attribute specifies the primary language used in contents and attributes containing text content of particular elements.

There is also an `xml:lang` attribute (with namespace). If both of them are defined, the one with namespace is used and the one without is ignored.

In SVG 1.1 there was a `lang` attribute defined with a different meaning and only applying to `<glyph>` elements. That attribute specified a list of languages according to RFC 5646: Tags for Identifying Languages (also known as BCP 47). The glyph was meant to be used if the `xml:lang` attribute exactly matched one of the languages given in the value of this parameter, or if the `xml:lang` attribute exactly equaled a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix was "-".

You can use this attribute with any SVG element.

Example
-------

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <text lang="en-US">This is some English text</text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<language-tag>` |
| Default value | *None* |
| Animatable | No |

`<language-tag>`

This value specifies the language used for the element. The syntax of this value is defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).

The most common syntax is a value formed by a lowercase two-character part for the language and an uppercase two-character part for the region or country, separated by a minus sign, e.g. `en-US` for US English or `de-AT` for Austrian German.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LangSpaceAttrs |

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

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

See also
--------

* RFC 5646: Tags for Identifying Languages (also known as BCP 47)


v-ideographic - SVG: Scalable Vector Graphics

v-ideographic
=============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`v-ideographic`** attribute indicates the alignment coordinate for glyphs to achieve ideographic baseline alignment for vertically oriented glyph layouts. The value is an offset in the font coordinate system relative to the glyph-specific `vert-origin-x` attribute.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value indicates the alignment coordinate for the glyphs.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementVertIdeographicAttribute |

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

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


xml:space - SVG: Scalable Vector Graphics

xml:space
=========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

SVG supports the built-in XML **`xml:space`** attribute to handle whitespace characters inside elements. Child elements inside an element may also have an `xml:space` attribute that overrides the parent's one.

**Note:** Instead of using the `xml:space` attribute, use the `white-space` CSS property.

This attribute influences how browsers parse text content and therefore changes the way the DOM is built. Therefore, changing this attribute's value through the DOM API may have no effect.

You can use this attribute with any SVG element.

Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 160 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" xml:space="default">    Default    spacing</text>
  <text y="40" xml:space="preserve">    Preserved    spacing</text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `default` | `preserve` |
| Default value | `default` |
| Animatable | No |

`default`

With this value set, whitespace characters will be processed in this order:

1. All newline characters are removed.
2. All tab characters are converted into space characters.
3. All leading and trailing space characters are removed.
4. All contiguous space characters are collapsed into a single space character.

`preserve`

This value tells the user agent to convert all newline and tab characters into spaces. Then, it draws all space characters (including leading, trailing and multiple consecutive space characters).

For example, the string "a   b" (three spaces between "a" and "b") separates "a" and "b" more than "a b" (one space between "a" and "b").

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # WhitespaceProcessingXMLSpaceAttribute |

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

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


refY - SVG: Scalable Vector Graphics

refY
====

The **`refY`** attribute defines the y coordinate of an element's reference point.

You can use this attribute with the following SVG elements:

* `<marker>`
* `<symbol>`
marker
------

For `<marker>`, `refY` defines the y coordinate of the marker's reference point, which is to be placed exactly at the marker's position on the shape.

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
 `<number>` | `top` | `center` |
 `bottom` |
| Default value | `0` |
| Animatable | Yes |

`<length-percentage>`

Lengths are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

Percentage values are interpreted as being a percentage of the `viewBox` height.

`<number>`

Numbers are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

`top`

The reference point of the marker is placed at the top edge of the shape.

`center`

The reference point of the marker is placed at the vertical center of the shape.

`bottom`

The reference point of the marker is placed at the bottom edge of the shape.

symbol
------

For `<symbol>`, `refY` defines the y coordinate of the symbol, which is defined by the cumulative effect of the `y` attribute and any transformations on the `<symbol>` and its host `<use>` element.

Unlike other positioning attributes, `refY` is interpreted as being in the coordinate system of the symbol contents, after application of the `viewBox` and `preserveAspectRatio` attributes. If the attribute is not specified, no vertical adjustment is made, and the top side of the symbol's rectangular viewport region (regardless of the `viewBox` coordinate) is positioned at the y coordinate.

**Note:** For backwards compatibility, the behavior when `refY` is not specified on a `<symbol>` element is different from when it is specified with a value of `0`, and therefore different from the behavior when an equivalent attribute is not specified on a `<marker>` element.

|  |  |
| --- | --- |
| Value | `<length>` | `top` | `center` |
 `bottom` |
| Default value | None |
| Animatable | Yes |

`<length-percentage>`

Lengths are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

Percentage values are interpreted as being a percentage of the `viewBox` height.

`<number>`

Numbers are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

`top`

The reference point of the marker is placed at the top edge of the shape.

`center`

The reference point of the marker is placed at the vertical center of the shape.

`bottom`

The reference point of the marker is placed at the bottom edge of the shape.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # MarkerElementRefYAttribute |
| Scalable Vector Graphics (SVG) 2 # SymbolElementRefYAttribute |

See also
--------

* `refX`


markerHeight - SVG: Scalable Vector Graphics

markerHeight
============

The **`markerHeight`** attribute represents the height of the viewport into which the `<marker>` is to be fitted when it is rendered according to the `viewBox` and `preserveAspectRatio` attributes.

You can use this attribute with the following SVG elements:

* `<marker>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
 `<number>` |
| Default value | `3` |
| Animatable | Yes |

`<length-percentage>`

 This value defines either an absolute or a relative height of the marker.
 Relative values refer to the height specified via the `viewBox` and `preserveAspectRatio` attributes.

`<number>`

This value defines the height of the marker in the units defined by the `markerUnits` attribute.

A value of zero disables rendering of the element and negative values are an error.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # MarkerHeightAttribute |

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

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

See also
--------

* `<marker>`
* `markerWidth`
* `markerUnits`
* `viewBox`
* `preserveAspectRatio`


v-alphabetic - SVG: Scalable Vector Graphics

v-alphabetic
============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`v-alphabetic`** attribute defines indicates the alignment coordinate for glyphs to achieve alphabetic baseline alignment. The value is an offset in the font coordinate system relative to the glyph-specific `vert-origin-x` attribute.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementVertAlphabeticAttribute |

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

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

See also
--------

* `alphabetic`


r - SVG: Scalable Vector Graphics

r
=

The **`r`** attribute defines the radius of a circle.

You can use this attribute with the following SVG elements:

* `<circle>`
* `<radialGradient>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>
```

circle
------

For `<circle>`, `r` defines the radius of the circle and therefor its size. With a value lower or equal to zero the circle won't be drawn at all.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2, `r` is a *Geometry Property* meaning this attribute can also be used as a CSS property for circles.

radialGradient
--------------

For `<radialGradient>`, `r` defines the radius of the end circle for the radial gradient.

The gradient will be drawn such that the **100%** gradient stop is mapped to the perimeter of this end circle. A value of lower or equal to zero will cause the area to be painted as a single color using the color and opacity of the last gradient `<stop>`.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `50%` |
| Animatable | Yes |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # R |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |


color-profile - SVG: Scalable Vector Graphics

color-profile
=============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`color-profile`** attribute is used to define which color profile a raster image included through the `<image>` element should use.

**Note:** As a presentation attribute, `color-profile` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<image>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `auto` | `sRGB` | `<name>` |
 `<iri>` |
| Default value | `auto` |
| Animatable | Yes |

`auto`

All colors are presumed to be defined in the sRGB color space unless a more precise embedded profile is specified within content data. For images that do have a profile built into their data, that profile is used. For images that do not have a profile, the sRGB profile is used.

`sRGB`

The source profile is assumed to be sRGB. This differs from auto in that it overrides an embedded profile inside an image.

`<name>`

A name corresponding to a defined color profile that is in the browser's color profile description database. The browser searches the color profile description database for a color profile description entry whose name descriptor matches `<name>` and uses the last matching entry that is found. If a match is found, the corresponding profile overrides an embedded profile inside an image. If no match is found, then the embedded profile inside the image is used.

`<iri>`

An IRI reference to the source color profile. The referenced color profile overrides an embedded profile inside the image.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # ColorProfileProperty |

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

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


dur - SVG: Scalable Vector Graphics

dur
===

The **`dur`** attribute indicates the simple duration of an animation.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="indefinite" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="3s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<clock-value>`
 | `media` | `indefinite` |
| Default value | `indefinite` |
| Animatable | No |

`<clock-value>`

This value specifies the length of the simple duration. The value must be greater than 0 and can be expressed with hours (`h`), minutes (`m`), seconds (`s`) or milliseconds (`ms`). It's possible to combine those time representations to create some complex durations like `hh:mm:ss.iii` or `mm:ss.iii`.

`media`

 This value specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media.
 (For animation elements the attribute will be ignored if `media` is specified.)

`indefinite`

This value specifies the simple duration as indefinite.

**Note:** the interpolation will not work if the simple duration is indefinite (although this may still be useful for `<set>` elements).

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # DurAttribute |

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

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


stroke-linejoin - SVG: Scalable Vector Graphics

stroke-linejoin
===============

The **`stroke-linejoin`** attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked.

**Note:** As a presentation attribute `stroke-linejoin` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
  <!--
 Upper left path:
 Effect of the "miter" value
 -->
  <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!--
 Center path:
 Effect of the "round" value
 -->
  <path
 d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="round" />

  <!--
 Upper right path:
 Effect of the "bevel" value
 -->
  <path
 d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="bevel" />

  <!--
 Bottom left path:
 Effect of the "miter-clip" value
 with fallback to "miter" if not supported.
 -->
  <path
 d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!--
 Bottom right path:
 Effect of the "arcs" value
 with fallback to "miter" if not supported.
 -->
  <path
 d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="arcs" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="highlight">
    <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5.5" r="0.05" fill="pink" />
  </g>
  <use href="#highlight" x="6" />
  <use href="#highlight" x="12" />
  <use href="#highlight" x="2" y="6" />
  <use href="#highlight" x="8" y="6" />
</svg>
```

Usage context
-------------

|  |  |
| --- | --- |
| Value | `arcs` | `bevel` |`miter` |
 `miter-clip` | `round` |
| Default value | `miter` |
| Animatable | discrete |

### arcs

**Note:** The `arcs` value as been introduced in SVG2 and it isn't widely supported yet, see Browser compatibility below for details.

The `arcs` value indicates that an arcs corner is to be used to join path segments. The arcs shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point.
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "arcs" value -->
  <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="arcs" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### bevel

The `bevel` value indicates that a bevelled corner is to be used to join path segments.
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "bevel" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="bevel" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### miter

The `miter` value indicates that a sharp corner is to be used to join path segments. The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.

**Note:** If the `stroke-miterlimit` is exceeded, the line join falls back to `bevel`.
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "miter" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!-- Effect of the "miter" value on a sharp angle
 where de default miter limit is exceeded -->
  <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!-- the following red dotted line show where
 the miter value falls back to the bevel value -->
  <path
 d="M0,0 h10"
 stroke="red"
 stroke-dasharray="0.05"
 stroke-width="0.025" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />

    <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="7" cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### miter-clip

**Note:** the `miter-clip` value as been introduced in SVG2 and it isn't widely supported yet, see Browser compatibility below for details.

The `miter-clip` value indicates that a sharp corner is to be used to join path segments. The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.

If the `stroke-miterlimit` is exceeded, the miter is clipped at a distance equal to half the `stroke-miterlimit` value multiplied by the stroke width from the intersection of the path segments. This provides a better rendering than `miter` on very sharp join or in case of an animation.
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "miter-clip" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!-- Effect of the "miter-clip" value on a sharp angle
 where de default miter limit is exceeded -->
  <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!-- the following red dotted line show where the clip should happen -->
  <path
 d="M0,0 h10"
 stroke="red"
 stroke-dasharray="0.05"
 stroke-width="0.025" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />

    <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="7" cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### round

The `round` value indicates that a round corner is to be used to join path segments.
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="round" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineJoin |

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

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


hanging - SVG: Scalable Vector Graphics

hanging
=======

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`hanging`** attribute indicates the alignment coordinate for glyphs to achieve hanging baseline alignment for horizontally oriented glyph layouts. The value is an offset in the font coordinate system.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value indicates the alignment coordinate for the glyphs.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementHangingAttribute |

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

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