height - SVG: Scalable Vector Graphics

height
======

The **`height`** attribute defines the vertical length of an element in the user coordinate system.

You can use this attribute with the following SVG elements:

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
Example
-------
```

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

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- With a height of 0 or less, nothing will be rendered -->
  <rect y="0" x="0" width="90" height="0" />
  <rect y="0" x="100" width="90" height="60" />
  <rect y="0" x="200" width="90" height="100%" />
</svg>
```

feBlend
-------

For `<feBlend>`, `height` defines the vertical length for the rendering area of the primitive.

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

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

For `<feColorMatrix>`, `height` defines the vertical length for the rendering area of the primitive.

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

feComponentTransfer
-------------------

For `<feComponentTransfer>`, `height` defines the vertical length for the rendering area of the primitive.

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

feComposite
-----------

For `<feComposite>`, `height` defines the vertical length for the rendering area of the primitive.

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

feConvolveMatrix
----------------

For `<feConvolveMatrix>`, `height` defines the vertical length for the rendering area of the primitive.

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

feDiffuseLighting
-----------------

For `<feDiffuseLighting>`, `height` defines the vertical length for the rendering area of the primitive.

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

feDisplacementMap
-----------------

For `<feDisplacementMap>`, `height` defines the vertical length for the rendering area of the primitive.

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

feDropShadow
------------

For `<feDropShadow>`, `height` defines the vertical length for the rendering area of the primitive.

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

feFlood
-------

For `<feFlood>`, `height` defines the vertical length for the rendering area of the primitive.

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

feGaussianBlur
--------------

For `<feGaussianBlur>`, `height` defines the vertical length for the rendering area of the primitive.

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

feImage
-------

For `<feImage>`, `height` defines the vertical length for the rendering area of the primitive.

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

feMerge
-------

For `<feMerge>`, `height` defines the vertical length for the rendering area of the primitive.

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

feMorphology
------------

For `<feMorphology>`, `height` defines the vertical length for the rendering area of the primitive.

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

feOffset
--------

For `<feOffset>`, `height` defines the vertical length for the rendering area of the primitive.

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

feSpecularLighting
------------------

For `<feSpecularLighting>`, `height` defines the vertical length for the rendering area of the primitive.

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

feTile
------

For `<feTile>`, `height` defines the vertical length for the rendering area of the primitive.

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

feTurbulence
------------

For `<feTurbulence>`, `height` defines the vertical length for the rendering area of the primitive.

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

filter
------

For `<filter>`, `height` defines the vertical length for the rendering area of the filter.

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

foreignObject
-------------

For `<foreignObject>`, `height` defines the vertical length for the rendering area for the referenced document.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

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

image
-----

For `<image>`, `height` defines the vertical length for the image.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as the intrinsic height of the image) |
| Animatable | Yes |

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

mask
----

For `<mask>`, `height` defines the vertical length of its area of effect. The exact effect of this attribute is influenced by the `maskUnits` attribute.

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

pattern
-------

For `<pattern>`, `height` defines the vertical length of the tile pattern. The exact effect of this attribute is influenced by the `patternUnits` and `patternTransform` attributes.

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

rect
----

For `<rect>`, `height` defines the vertical length for the rectangle.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

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

svg
---

For `<svg>`, `height` defines the vertical length for the rendering area of the SVG viewport.

**Note:** In an HTML document if both the `viewBox` and `height` attributes are omitted, the svg element will be rendered with a height of `150px`

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `100%`) |
| Animatable | Yes |

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

use
---

For `<use>`, `height` defines the vertical length for the referenced element.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

**Note:** `height` has no effect on `use` elements, unless the element referenced has a viewBox - i.e. they only have an effect when `use` refers to a `svg` or `symbol` element.

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-height |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-height |
| CSS Masking Module Level 1 # element-attrdef-mask-height |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementHeightAttribute |


visibility - SVG: Scalable Vector Graphics

visibility
==========

The **`visibility`** attribute lets you control the visibility of graphical elements. With a value of `hidden` or `collapse` the current graphics element is invisible.

**Note:** If the `visibility` attribute is set to `hidden` on a text element, then the text is invisible but still takes up space in text layout calculations.

Depending on the value of attribute `pointer-events`, graphics elements which have their `visibility` attribute set to `hidden` still might receive events.

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

You can use this attribute with the following SVG elements:

* `<a>`
* `<audio>`
* `<canvas>`
* `<circle>`
* `<ellipse>`
* `<foreignObject>`
* `<iframe>`
* `<image>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
* `<video>`
Example
-------

### Example 1
```

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

```html
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <rect
 x="10"
 y="10"
 width="200"
 height="100"
 stroke="black"
 stroke-width="5"
 fill="transparent" />
  <g stroke="seagreen" stroke-width="5" fill="skyblue">
    <rect x="20" y="20" width="80" height="80" visibility="visible" />
    <rect x="120" y="20" width="80" height="80" visibility="hidden" />
  </g>
</svg>
```

### Example 2

The following example toggles the CSS `visibility` of the SVG image path.

#### HTML

```html
<button id="nav-toggle-button">
  <svg
 xmlns="http://www.w3.org/2000/svg"
 width="24"
 height="24"
 viewBox="0 0 24 24"
 class="button-icon">
    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
    <path
 d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
 class="invisible" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
  <span> click me </span>
</button>
```

#### CSS

```css
svg {
  display: inline !important;
}
span {
  vertical-align: 50%;
}
button {
  line-height: 1em;
}
.invisible {
  visibility: hidden;
}
```

#### JavaScript

```js
const button = document.querySelector("button");
button.addEventListener("click", (evt) => {
  button
    .querySelector("svg > path:nth-of-type(1)")
    .classList.toggle("invisible");
  button
    .querySelector("svg > path:nth-of-type(2)")
    .classList.toggle("invisible");
});
```

#### Result

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

|  |  |
| --- | --- |
| Value | `visible` | `hidden` | `collapse` |
| Default value | `visible` |
| Animatable | Yes |

`visible`

This value indicates that the element will be painted.

`hidden`

This value indicates that the element will not be painted. Though it is still part of the rendering tree, i.e. it may receive pointer events depending on the `pointer-events` attribute, may receive focus depending on the `tabindex` attribute, contributes to bounding box calculations and clipping paths, and does affect text layout.

`collapse`

This value is equal to `hidden`.

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

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

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

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

See also
--------

* `display` attribute
* `CSS visibility`


kernelMatrix - SVG: Scalable Vector Graphics

kernelMatrix
============

The **`kernelMatrix`** attribute defines the list of numbers that make up the kernel matrix for the `<feConvolveMatrix>` element.

Values are separated by space characters and/or a comma. The number of entries in the list must equal to `<orderX>` by `<orderY>` as defined in the `order` attribute.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="convolveMatrix1" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="1 1 0 0 0 0 0 0 -1" />
  </filter>
  <filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="-1 0 0 0 0 0 0 0 1" />
  </filter>

  <image
 href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#convolveMatrix1);" />
  <image
 href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#convolveMatrix2); transform:translateX(220px);" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<list of numbers>` |
| Default value | *None* |
| Animatable | Yes |

`<list of numbers>`

The list of `<number>`s that make up the kernel matrix for the convolution. Values are separated by space characters and/or a comma. The number of entries in the list must equal `<orderX>` times `<orderY>`.

If the result of `orderX` \* `orderY` is not equal to the number of entries in the value list, the filter primitive acts as a pass through filter.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-kernelmatrix |

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

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


opacity - SVG: Scalable Vector Graphics

opacity
=======

The **`opacity`** attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

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

You can use this attribute with the following SVG elements:

* `<a>`
* `<audio>`
* `<canvas>`
* `<circle>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<iframe>`
* `<image>`
* `<line>`
* `<marker>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<svg>`
* `<switch>`
* `<symbol>`
* `<text>`
* `<textPath>`
* `<tspan>`
* `<use>`
* `<unknown>`
* `<video>`
Example
-------
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" style="stop-color:skyblue;" />
      <stop offset="100%" style="stop-color:seagreen;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>
```

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

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

`<alpha-value>`

The uniform opacity setting to be applied across an entire object, as a `<number>`. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

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

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |
| Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |

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

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

See also
--------

* `CSS opacity`


points - SVG: Scalable Vector Graphics

points
======

The **`points`** attribute defines a list of points. Each point is defined by a pair of number representing a X and a Y coordinate in the user coordinate system. If the attribute contains an odd number of coordinates, the last one will be ignored.

You can use this attribute with the following SVG elements:

* `<polyline>`
* `<polygon>`
Example
-------
```

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

```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />

  <!-- polygon is a closed shape -->
  <polygon
 stroke="black"
 fill="none"
 transform="translate(100,0)"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 It is usually considered best practices to separate a X and Y
 coordinate with a comma and a group of coordinates by a space.
 It makes things more readable for human beings.
 -->
</svg>
```

polyline
--------

For `<polyline>`, `points` defines a list of points, each representing a vertex of the line to be drawn. Each point is define by a X and Y coordinate in the user coordinate system.

**Note:** A polyline is an open shape, meaning the last point is not connected to the first point.

|  |  |
| --- | --- |
| Value | [ `<number>`+ ]# |
| Default value | *none* |
| Animatable | Yes |
```

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

```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```

polygon
-------

For `<polygon>`, `points` defines a list of points, each representing a vertex of the shape to be drawn. Each point is define by a X and Y coordinate in the user coordinate system.

**Note:** A polygon is a closed shape, meaning the last point is connected to the first point.

|  |  |
| --- | --- |
| Value | [ `<number>`+ ]# |
| Default value | *none* |
| Animatable | Yes |
```

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

```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polygon is an closed shape -->
  <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute |
| Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute |


color-interpolation-filters - SVG: Scalable Vector Graphics

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

The **`color-interpolation-filters`** attribute specifies the color space for imaging operations performed via filter effects.

**Note:** This property just has an affect on filter operations. Therefore, it has no effect on filter primitives like `<feOffset>`, `<feImage>`, `<feTile>` or `<feFlood>`.

`color-interpolation-filters` has a different initial value than `color-interpolation`. `color-interpolation-filters` has an initial value of `linearRGB`, whereas `color-interpolation` has an initial value of `sRGB`. Thus, in the default case, filter effects operations occur in the linearRGB color space, whereas all other color interpolations occur by default in the sRGB color space.

It has no affect on filter functions, which operate in the sRGB color space.

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

You can use this attribute with the following SVG elements:

* `<feSpotLight>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `auto` | `sRGB` | `linearRGB` |
| Default value | `linearRGB` |
| 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 |
| --- |
| Filter Effects Module Level 1 # ColorInterpolationFiltersProperty |

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

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

See also
--------

* sRGB specification
* `color-interpolation`


from - SVG: Scalable Vector Graphics

from
====

The **`from`** attribute indicates the initial value of the attribute that will be modified during the animation.

When used with the `to` attribute, the animation will change the modified attribute from the `from` value to the `to` value. When used with the `by` attribute, the animation will change the attribute relatively from the `from` value by the value specified in `by`.

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" height="100">
    <animate attributeName="width" fill="freeze" from="100" to="150" 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 `from` attribute is ignored.

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

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

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

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


attributeName - SVG: Scalable Vector Graphics

attributeName
=============

The **`attributeName`** attribute indicates the name of the CSS property or attribute of the target element that is going to be changed during an animation.

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 | `<name>` |
| Default value | *None* |
| Animatable | No |

`<name>`

This value indicates the name of the CSS property or attribute of the target element to be animated.

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

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

See also
--------

* SMIL Animation specification


baseline-shift - SVG: Scalable Vector Graphics

baseline-shift
==============

The **`baseline-shift`** attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.

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

**Note:** This property is going to be deprecated and authors are advised to use `vertical-align` instead.

You can use this attribute with the following SVG elements:

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

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

`sub`

The dominant-baseline is shifted to the default position for subscripts.

`super`

The dominant-baseline is shifted to the default position for superscripts.

`<length-percentage>`

A length value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified length.

A percentage value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified percentage of the `line-height`.

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

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

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

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


cx - SVG: Scalable Vector Graphics

cx
==

The **`cx`** attribute define the x-axis coordinate of a center point.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="45" />
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

For `<circle>`, `cx` defines the x-axis coordinate of the center of the shape.

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

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

ellipse
-------

For `<ellipse>`, `cx` defines the x-axis coordinate of the center of the shape.

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

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

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

For `<radialGradient>`, `cx` defines the x-axis coordinate of the end circle for the radial gradient.

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

### Example
```

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

```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CX |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |

See also
--------

* `cy`
* `r`


keyTimes - SVG: Scalable Vector Graphics

keyTimes
========

The **`keyTimes`** attribute represents a list of time values used to control the pacing of the animation.

Each time in the list corresponds to a value in the `values` attribute list, and defines when the value is used in the animation. Each time value in the `keyTimes` list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the duration of the animation element.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 repeatCount="indefinite"
 values="60; 110; 60; 10; 60"
 keyTimes="0; 0.25; 0.5; 0.75; 1" />
    <animate
 attributeName="cy"
 dur="4s"
 repeatCount="indefinite"
 values="10; 60; 110; 60; 10"
 keyTimes="0; 0.25; 0.5; 0.75; 1" />
  </circle>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<number>` [
 `;` `<number>` ]\* `;`?
  |
| Default value | *None* |
| Animatable | No |

The value of the `keyTimes` attribute is a semicolon-separated list of values.

There must be exactly as many values in the `keyTimes` list as in the `values` list.

Each successive time value must be greater than or equal to the preceding time value.

The `keyTimes` list semantics depends upon the interpolation mode:

* For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be `1`. The key time associated with each value defines when the value is set; values are interpolated between the key times.
* For discrete animation, the first time value in the list must be `0`. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the list.

If the `calcMode` attribute is set to `paced`, the `keyTimes` attribute is ignored.

If the duration of the animation is indefinite, any `keyTimes` specification will be ignored.

* Safari issue: `keyTimes` values should be separated with semicolon without space before, f.e: `keyTimes="0; 0.25; 0.5; 0.75; 1"`
Specifications
--------------

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


onclick - SVG: Scalable Vector Graphics

onclick
=======

The **`onclick`** attribute specifies some script to run when the element is clicked.

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<circle>`
* `<defs>`
* `<desc>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<image>`
* `<line>`
* `<linearGradient>`
* `<marker>`
* `<metadata>`
* `<mpath>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<radialGradient>`
* `<rect>`
* `<script>`
* `<set>`
* `<stop>`
* `<style>`
* `<svg>`
* `<switch>`
* `<symbol>`
* `<text>`
* `<textPath>`
* `<title>`
* `<tref>`
* `<tspan>`
* `<use>`
* `<view>`
Example
-------
```

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

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle
 cx="100"
 cy="100"
 r="100"
 onclick="alert('You have clicked the circle.')" />
</svg>
```

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

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

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

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

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

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


tableValues - SVG: Scalable Vector Graphics

tableValues
===========

The **`tableValues`** attribute defines a list of numbers defining a lookup table of values for a color component transfer function.

You can use this attribute with the following SVG elements:

* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient
 id="gradient"
 gradientUnits="userSpaceOnUse"
 x1="0"
 y1="0"
 x2="200"
 y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset="0.5" stop-color="#00ff00" />
      <stop offset="1" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0 1" />
      <feFuncG type="table" tableValues="0 1" />
      <feFuncB type="table" tableValues="0 1" />
    </feComponentTransfer>
  </filter>
  <filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="1 0" />
      <feFuncG type="table" tableValues="1 0" />
      <feFuncB type="table" tableValues="1 0" />
    </feComponentTransfer>
  </filter>

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

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

|  |  |
| --- | --- |
| Value | `<list-of-numbers>` |
| Default value | *Empty list resulting in identity transfer* |
| Animatable | Yes |

`<list-of-numbers>`

This value holds a comma- and/or space-separated list of `<number>`s, which define a lookup table for the color component transfer function. Each number can be between `0` and `1`.

An empty list results in an identity transfer function.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-tablevalues |


maskUnits - SVG: Scalable Vector Graphics

maskUnits
=========

The **`maskUnits`** attribute indicates which coordinate system to use for the geometry properties 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"
 maskUnits="userSpaceOnUse"
 x="20%"
 y="20%"
 width="60%"
 height="60%">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>

  <mask
 id="myMask2"
 maskUnits="objectBoundingBox"
 x="20%"
 y="20%"
 width="60%"
 height="60%">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" 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>`, `maskUnits` defines the coordinate system in use for the geometry attributes (`x`, `y`, `width` and `height`) of the element.

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

`userSpaceOnUse`

This value indicates that all coordinates for the geometry attributes refer to the user coordinate system as defined when the mask was created.

`objectBoundingBox`

This value indicates that all coordinates for the geometry attributes represent fractions or percentages of the bounding box of the element to which the mask is applied. 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-maskunits |

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

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


vector-effect - SVG: Scalable Vector Graphics

vector-effect
=============

The **`vector-effect`** property specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations, i.e. filters, masks and clips.

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

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<foreignObject>`
* `<image>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tspan>`
* `<use>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `none` | `non-scaling-stroke` |
 `non-scaling-size` | `non-rotation` |
 `fixed-position` |
| Default value | `none` |
| Animatable | discrete |

`none`

This value specifies that no vector effect shall be applied, i.e. the default rendering behavior is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.

`non-scaling-stroke`

This value modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shape's path in current user coordinate system and filling that outline with the stroke paint (color or gradient). The resulting visual effect of this value is that the stroke width is not dependent on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.

`non-scaling-size`

This value specifies a special user coordinate system used by the element and its descendants. The scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space. However, it does not specify the suppression of rotation and skew. Also, it does not specify the origin of the user coordinate system. Since this value suppresses scaling of the user coordinate system, it also has the characteristics of `non-scaling-stroke`.

`non-rotation`

This value specifies a special user coordinate system used by the element and its descendants. The rotation and skew of that user coordinate system is suppressed in spite of any transformation changes from a host coordinate space. However, it does not specify the suppression of scaling. Also, it does not specify the origin of user coordinate system.

`fixed-position`

This value specifies a special user coordinate system used by the element and its descendants. The position of user coordinate system is fixed in spite of any transformation changes from a host coordinate space. However, it does not specify the suppression of rotation, skew and scaling. When this vector effect and the `transform` property are defined at the same time, that property is consumed for this effect.

Example
-------

### Example: vector-effect="non-scaling-stroke"

```html
<svg viewBox="0 0 500 240">
  <!-- normal -->
  <path
 d="M10,20 L40,100 L39,200 z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- scaled -->
  <path
 transform="translate(100,0) scale(4,1)"
 d="M10,20 L40,100 L39,200 z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- fixed-->
  <path
 vector-effect="non-scaling-stroke"
 transform="translate(300, 0) scale(4, 1)"
 d="M10,20 L40,100 L39,200 z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>
</svg>
```

#### Result

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

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

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

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


xChannelSelector - SVG: Scalable Vector Graphics

xChannelSelector
================

The **`xChannelSelector`** attribute indicates which color channel from `in2` to use to displace the pixels in `in` along the x-axis.

You can use this attribute with the following SVG elements:

* `<feDisplacementMap>`
Example
-------
```

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

```html
<svg viewBox="0 0 440 160" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 xChannelSelector="R" />
  </filter>
  <filter id="displacementFilter2">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 xChannelSelector="B" />
  </filter>

  <text x="10" y="60" font-size="50" filter="url(#displacementFilter)">
    Some displaced text
  </text>
  <text x="10" y="120" font-size="50" filter="url(#displacementFilter2)">
    Some displaced text
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `R` | `G` | `B` | `A` |
| Default value | `A` |
| Animatable | Yes |

`R`

This keyword specifies that the red color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

`G`

This keyword specifies that the green color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

`B`

This keyword specifies that the blue color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

`A`

This keyword specifies that the alpha channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-xchannelselector |

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

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


stemv - SVG: Scalable Vector Graphics

stemv
=====

**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 **`stemv`** attribute indicates the vertical stem width of the font.

The vertical stem width is the width of vertical (or near-vertical) stems of glyphs. This information is often tied to hinting, and may not be directly accessible in some font formats. The measurement is meant for the dominant vertical stem in the font because there might be different groupings of vertical stems (e.g., one main one, and one lighter weight one as for an uppercase "M" or "N").

If this attribute is used, the `units-per-em` must also be used.

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 vertical stem width of the font.

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

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

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

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

See also
--------

* `stemh`


viewBox - SVG: Scalable Vector Graphics

viewBox
=======

The **`viewBox`** attribute defines the position and dimension, in user space, of an SVG viewport.

The value of the `viewBox` attribute is a list of four numbers: `min-x`, `min-y`, `width` and `height`. The numbers `min-x` and `min-y` represent the top left coordinates of the viewport. The numbers `width` and `height` represent its dimensions. These numbers, which are separated by whitespace and/or a comma, specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport).

You can use this attribute with the following SVG elements:

* `<marker>`
* `<pattern>`
* `<svg>`
* `<symbol>`
* `<view>`
Example
-------
```

html,
body,
svg {
  height: 100%;
  vertical-align: top;
}
svg:not(:root) {
  display: inline-block;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
 with relative unit such as percentage, the visual size
 of the square looks unchanged regardless of the viewBox
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 with a large viewBox the circle looks small
 as it is using user units for the r attribute:
 4 resolved against 100 as set in the viewBox
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 with relative unit such as percentage, the visual size
 of the square looks unchanged regardless of the viewBox
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 with a small viewBox the circle looks large
 as it is using user units for the r attribute:
 4 resolved against 10 as set in the viewBox
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 The point of coordinate 0,0 is now in the center of the viewport,
 and 100% is still resolve to a width or height of 10 user units so
 the rectangle looks shifted to the bottom/right corner of the viewport
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 With the point of coordinate 0,0 in the center of the viewport the
 value 50% is resolve to 5 which means the center of the circle is
 in the bottom/right corner of the viewport.
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
```

The exact effect of this attribute is influenced by the `preserveAspectRatio` attribute.

**Note:** Values for `width` or `height` lower or equal to `0` disable rendering of the element.

marker
------

For `<marker>`, `viewBox` defines the position and dimension for the content of the `<marker>` element.

|  |  |
| --- | --- |
| Value | **<number>**,?
 **<number>**,?
 **<number>**,?
 **<number>** |
| Default value | *none* |
| Animatable | Yes |

pattern
-------

For `<pattern>`, `viewBox` defines the position and dimension for the content of the pattern tile.

|  |  |
| --- | --- |
| Value | **<number>**,?
 **<number>**,?
 **<number>**,?
 **<number>** |
| Default value | *none* |
| Animatable | Yes |

svg
---

For `<svg>`, `viewBox` defines the position and dimension for the content of the `<svg>` element.

|  |  |
| --- | --- |
| Value | **<number>**,?
 **<number>**,?
 **<number>**,?
 **<number>** |
| Default value | *none* |
| Animatable | Yes |

symbol
------

For `<symbol>`, `viewBox` defines the position and dimension for the content of the `<symbol>` element.

|  |  |
| --- | --- |
| Value | **<number>**,?
 **<number>**,?
 **<number>**,?
 **<number>** |
| Default value | *none* |
| Animatable | Yes |

view
----

For `<view>`, `viewBox` defines the position and dimension for the content of the `<view>` element.

|  |  |
| --- | --- |
| Value | **<number>**,?
 **<number>**,?
 **<number>**,?
 **<number>** |
| Default value | *none* |
| Animatable | Yes |

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

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


spreadMethod - SVG: Scalable Vector Graphics

spreadMethod
============

The **`spreadMethod`** attribute determines how a shape is filled beyond the defined edges of a gradient.

You can use this attribute with the following SVG elements:

* `<linearGradient>`
* `<radialGradient>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `pad` | `reflect` | `repeat` |
| Initial value | `pad` |
| Animatable | Yes |

`pad`

This value indicates that the final color of the gradient fills the shape beyond the gradient's edges.

`reflect`

This value indicates that the gradient repeats in reverse beyond its edges.

`repeat`

This value specifies that the gradient repeats in the original order beyond its edges.

### Defining a gradient's edges

By default, a gradient reaches to the edges of the shape being filled. To see the effects of this attribute, you will need to set the size of the gradient smaller than the shape.

In the case of a linear gradient, the edges may be defined as a rectangle by the `x1`, `x2`, `y1` and `y2` attributes. In the case of a radial gradient, the edges may be defined as outer and inner circles by the `cx`, `cy` and `r` (outer) and `fx`, `fy` and `fr` (inner) attributes.

Examples of spreadMethod with linear gradients
----------------------------------------------

### SVG

```html
<svg width="220" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="PadGradient" x1="33%" x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
    <linearGradient
 id="ReflectGradient"
 spreadMethod="reflect"
 x1="33%"
 x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
    <linearGradient id="RepeatGradient" spreadMethod="repeat" x1="33%" x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
  </defs>

  <rect fill="url(#PadGradient)" x="10" y="0" width="200" height="40" />
  <rect fill="url(#ReflectGradient)" x="10" y="50" width="200" height="40" />
  <rect fill="url(#RepeatGradient)" x="10" y="100" width="200" height="40" />
</svg>
```

### Result

Notice that the middle third of each gradient is the same. The outer thirds show the difference between the three spread methods.

Examples of spreadMethod with radial gradients
----------------------------------------------

### SVG

```html
<svg width="340" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="RadialPadGradient"
 cx="75%"
 cy="25%"
 r="33%"
 fx="64%"
 fy="18%"
 fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
    <radialGradient
 id="RadialReflectGradient"
 spreadMethod="reflect"
 cx="75%"
 cy="25%"
 r="33%"
 fx="64%"
 fy="18%"
 fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
    <radialGradient
 id="RadialRepeatGradient"
 spreadMethod="repeat"
 cx="75%"
 cy="25%"
 r="33%"
 fx="64%"
 fy="18%"
 fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
  </defs>

  <rect fill="url(#RadialPadGradient)" x="10" y="10" width="100" height="100" />
  <rect
 fill="url(#RadialReflectGradient)"
 x="120"
 y="10"
 width="100"
 height="100" />
  <rect
 fill="url(#RadialRepeatGradient)"
 x="230"
 y="10"
 width="100"
 height="100" />
</svg>
```

### Result

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementSpreadMethodAttribute |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementSpreadMethodAttribute |

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

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


xml:lang - SVG: Scalable Vector Graphics

xml:lang
========

**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 **`xml:lang`** attribute specifies the primary language used in contents and attributes containing text content of particular elements.

It is a universal attribute allowed in all XML dialects to mark up the natural human language that an element contains.

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

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 xml: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
--------

* XML specification of `xml:lang`
* RFC 5646: Tags for Identifying Languages (also known as BCP 47)


kerning - SVG: Scalable Vector Graphics

kerning
=======

**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 **`kerning`** attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero).

**Note:** As a presentation attribute `kerning` can be used as a CSS property. In CSS the property is called `font-kerning`, though.

You can use this attribute with the following SVG elements:

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

html,
body,
svg {
  height: 100%;
  font:
    36px Verdana,
    Helvetica,
    Arial,
    sans-serif;
}
```

```html
<svg viewBox="0 0 150 125" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="30" kerning="auto">auto</text>
  <text x="10" y="70" kerning="0">number</text>
  <text x="10" y="110" kerning="20px">length</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `auto` |
 `<length>` |
| Default value | `auto` |
| Animatable | Yes |

`auto`

This value indicates that the spacing between glyphs is adjusted based on kerning tables that are included in the font that will be used.

`<length>`

If a length is provided, then auto-kerning is disabled. Instead, inter-character spacing is set to the given length.

If a length is provided without a unit identifier (e.g., an unqualified number such as 128), the length is processed as a width value in the current user coordinate system. If a unit identifier (e.g., `0.25em` or `1%`) is provided, then the length is converted into a corresponding value in the current user coordinate system.

The most common scenario, other than `auto`, is to set `kerning` to a value of `0` so that auto-kerning is disabled.

The given length is added to the inter-character spacing value specified by the `letter-spacing` attribute.

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

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

See also
--------

* `CSS font-kerning`


elevation - SVG: Scalable Vector Graphics

elevation
=========

The **`elevation`** attribute specifies the direction angle for the light source from the XY plane towards the Z-axis, in degrees. Note that the positive Z-axis points towards the viewer of the content.

You can use this attribute with the following SVG elements:

* `<feDistantLight>`
Example
-------
```

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

```html
<svg viewBox="0 0 440 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="distantLight1">
    <feDiffuseLighting>
      <feDistantLight elevation="0" />
    </feDiffuseLighting>
  </filter>
  <filter id="distantLight2">
    <feDiffuseLighting>
      <feDistantLight elevation="45" />
    </feDiffuseLighting>
  </filter>

  <circle cx="100" cy="100" r="80" style="filter: url(#distantLight1);" />
  <circle
 cx="100"
 cy="100"
 r="80"
 style="filter: url(#distantLight2); transform: translateX(240px);" />
</svg>
```

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

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedistantlight-elevation |

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

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


k1 - SVG: Scalable Vector Graphics

k1
==

The **`k1`** attribute defines one of the values to be used within the `arithmetic` operation of the `<feComposite>` filter primitive.

The pixel composition is computed using the following formula:

```js
result = k1 \* i1 \* i2 + k2 \* i1 + k3 \* i2 + k4;
```

You can use this attribute with the following SVG elements:

* `<feComposite>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="composite1" x="0" y="0" width="100%" height="100%">
    <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>
  <filter id="composite2" x="0" y="0" width="100%" height="100%">
    <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="10"
 k2="0"
 k3="0"
 k4="0" />
  </filter>

  <image
 href="mdn.svg"
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#composite1);" />
  <image
 href="mdn.svg"
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#composite2); transform: translateX(220px);" />
</svg>
```

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

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomposite-k1 |

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

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


markerWidth - SVG: Scalable Vector Graphics

markerWidth
===========

The **`markerWidth`** attribute represents the width 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 width of the marker.
 Relative values refer to the width specified via the `viewBox` and `preserveAspectRatio` attributes.

`<number>`

This value defines the width 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 # MarkerWidthAttribute |

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

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

See also
--------

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


flood-opacity - SVG: Scalable Vector Graphics

flood-opacity
=============

The **`flood-opacity`** attribute indicates the opacity value to use across the current filter primitive subregion.

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

You can use this attribute with the following SVG elements:

* `<feFlood>` and `<feDropShadow>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood
 flood-color="seagreen"
 flood-opacity="1"
 x="0"
 y="0"
 width="200"
 height="200" />
  </filter>
  <filter id="flood2">
    <feFlood
 flood-color="seagreen"
 flood-opacity="0.3"
 x="0"
 y="0"
 width="200"
 height="200" />
  </filter>

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

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

|  |  |
| --- | --- |
| Value | `<alpha-value>` |
| Initial value | `1` |
| Animatable | Yes |

`<alpha-value>`

 A number or percentage indicating the opacity value to use across the current filter primitive subregion.
 A number of `0` or a percentage of `0%` represents a fully transparent color, `1` or `100%` represents a fully opaque color.

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

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

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

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

See also
--------

* `flood-color`


g1 - SVG: Scalable Vector Graphics

g1
==

**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 **`g1`** attribute specifies a list of glyph names which identify a set of possible first glyphs in the kerning pair.

All glyphs with the given glyph name are included in the set. The total set of possible first glyphs in the kerning pair is the union of glyphs specified by the `u1` and `g1` attributes.

You can use this attribute with the following SVG elements:

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

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

`<name>#`

This value indicates a comma-separated sequence of glyph names (i.e., values that match `glyph-name` attributes on `<glyph>` elements) which identify a set of possible first glyphs in the kerning pair.

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

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

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

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


xlink:show - SVG: Scalable Vector Graphics

xlink:show
==========

**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 **`xlink:show`** attribute indicates how a linked resource should be opened and is meant for XLink-aware processors. In case of a conflict, the `target` attribute has priority, since it can express a wider range of values.

You can use this attribute with the following SVG elements:

* `<a>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `new` | `replace` | `embed` |
 `other` | `none` |
| Default value | `replace` |
| Animatable | No |

`new`

This value specifies that the referenced resource is opened in a new window or tab. This is similar to the effect achieved by an HTML `<a>` element with target set to `_blank`.

`replace`

This value specifies that the referenced resource is opened in the same window or tab. This is similar to the effect achieved by an HTML `<a>` element with target set to `_self`.

`embed`

This value specifies that instead of linking to the resource it will be loaded and shown within the document. This is similar to the effect achieved by an HTML `<img>` element.

`other`

This value indicates that other markup present in the link, i.e. the `target` attribute, determines its behavior.

`none`

This value specifies that there is no indication for how to refer to the linked resource.

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

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

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

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

See also
--------

* Definition of the `xlink:show` attribute in the XLink specification


fill-rule - SVG: Scalable Vector Graphics

fill-rule
=========

The **`fill-rule`** attribute is a presentation attribute defining the algorithm to use to determine the *inside* part of a shape.

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Default value for fill-rule -->
  <polygon
 fill-rule="nonzero"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 The center of the shape has two
 path segments (shown by the red stroke)
 between it and infinity. It is therefore
 considered outside the shape, and not filled.
 -->
  <polygon
 fill-rule="evenodd"
 stroke="red"
 points="150,0 121,90 198,35 102,35 179,90" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `nonzero` | `evenodd` |
| Default value | `nonzero` |
| Animatable | discrete |

The `fill-rule` attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:

### nonzero

The value `nonzero` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.

#### Example
```

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

```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of nonzero fill rule on crossing path segments -->
  <polygon
 fill-rule="nonzero"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 Effect of nonzero fill rule on a shape inside a shape
 with the path segment moving in the same direction
 (both squares drawn clockwise, to the "right")
 -->
  <path
 fill-rule="nonzero"
 stroke="red"
 d="M110,0 h90 v90 h-90 z
 M130,20 h50 v50 h-50 z" />

  <!--
 Effect of nonzero fill rule on a shape inside a shape
 with the path segment moving in the opposite direction
 (one square drawn clockwise, the other anti-clockwise)
 -->
  <path
 fill-rule="nonzero"
 stroke="red"
 d="M210,0 h90 v90 h-90 z
 M230,20 v50 h50 v-50 z" />
</svg>
```

### evenodd

The value `evenodd` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.

#### Example
```

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

```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of evenodd fill rule on crossing path segments -->
  <polygon
 fill-rule="evenodd"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 Effect of evenodd fill rule on a shape inside a shape
 with the path segment moving in the same direction
 (both squares drawn clockwise, to the "right")
 -->
  <path
 fill-rule="evenodd"
 stroke="red"
 d="M110,0 h90 v90 h-90 z
 M130,20 h50 v50 h-50 z" />

  <!--
 Effect of evenodd fill rule on a shape inside a shape
 with the path segment moving in opposite direction
 (one square drawn clockwise, the other anti-clockwise)
 -->
  <path
 fill-rule="evenodd"
 stroke="red"
 d="M210,0 h90 v90 h-90 z
 M230,20 v50 h50 v-50 z" />
</svg>
```

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

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

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

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


orientation - SVG: Scalable Vector Graphics

orientation
===========

**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 **`orientation`** attribute indicates that the given glyph is only to be used for a particular text direction, i.e. horizontal or vertical.

You can use this attribute with the following SVG elements:

* `<glyph>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `h` | `v` |
| Default value | *None (meaning glyph can be used for both text directions)* |
| Animatable | Yes |

`h`

This value indicates that the glyph is only used for a horizontal text direction.

`v`

This value indicates that the glyph is only used for a vertical text direction.

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

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

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

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


direction - SVG: Scalable Vector Graphics

direction
=========

The **`direction`** attribute specifies the inline-base direction of a `<text>` or `<tspan>` element. It defines the start and end points of a line of text as used by the `text-anchor` and `inline-size` properties. It also may affect the direction in which characters are positioned if the `unicode-bidi` property's value is either `embed` or `bidi-override`.

It applies only to glyphs oriented perpendicular to the inline-base direction, which includes the usual case of horizontally-oriented Latin or Arabic text and the case of narrow-cell Latin or Arabic characters rotated 90 degrees clockwise relative to a top-to-bottom inline-base direction.

In many cases, the bidirectional Unicode algorithm produces the desired result automatically, so this attribute doesn't need to be specified in those cases. For other cases, such as when using right-to-left languages, it may be sufficient to add the `direction` attribute to the outermost `<svg>` element, and allow that direction to inherit to all text elements:

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg
 viewBox="0 0 600 72"
 xmlns="http://www.w3.org/2000/svg"
 direction="rtl"
 lang="fa">
  <text x="300" y="50" text-anchor="middle" font-size="36">
    داستان SVG 1.1 SE طولا ني است.
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `ltr` | `rtl` |
| Default value | `ltr` |
| Animatable | Yes |

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # direction |
| Scalable Vector Graphics (SVG) 2 # DirectionProperty |

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

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

See also
--------

* `CSS direction`


k4 - SVG: Scalable Vector Graphics

k4
==

The **`k4`** attribute defines one of the values to be used within the `arithmetic` operation of the `<feComposite>` filter primitive.

The pixel composition is computed using the following formula:
```

result = k1*i1*i2 + k2*i1 + k3*i2 + k4
```

You can use this attribute with the following SVG elements:

* `<feComposite>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="composite1" x="0" y="0" width="100%" height="100%">
    <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>
  <filter id="composite2" x="0" y="0" width="100%" height="100%">
    <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="10"
 k2="0"
 k3="0"
 k4="0.3" />
  </filter>

  <image
 href="mdn.svg"
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#composite1);" />
  <image
 href="mdn.svg"
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#composite2); transform: translateX(220px);" />
</svg>
```

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

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomposite-k4 |

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

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


strikethrough-position - SVG: Scalable Vector Graphics

strikethrough-position
======================

The `strikethrough-position` attribute represents the ideal vertical position of the strikethrough. The strikethrough position 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) |


u2 - SVG: Scalable Vector Graphics

u2
==

**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 **`u2`** attribute specifies list of Unicode characters (refer to the description of the `unicode` attribute of the `<glyph>` element for a description of how to express individual Unicode characters) and/or ranges of Unicode characters, which identify a set of possible second glyphs in a kerning pair.

If a given Unicode character within the set has multiple corresponding `<glyph>` elements (i.e., there are multiple `<glyph>` elements with the same `unicode` attribute value but different `glyph-name` values), then all such glyphs are included in the set. Comma is the separator character; thus, to kern a comma, specify the comma as part of a range of Unicode characters or as a glyph name using the `g2` attribute. The total set of possible second glyphs in the kerning pair is the union of glyphs specified by the `u2` and `g2` attributes.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | [
`<character>`
|
`<urange>`
]# |
| Default value | *None* |
| Animatable | No |

`[ <character> | <urange> ]#`

This value indicates a comma-separated sequence of Unicode characters and/or ranges of Unicode characters, which identify a set of possible second glyphs in a kerning pair.

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

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

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

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


decoding - SVG: Scalable Vector Graphics

decoding
========

The `decoding` attribute, valid on `<image>` elements, provides a hint to the browser as to whether it should perform image decoding along with rendering other content in a single presentation step that looks more "correct" (`sync`), or render and present the other content first and then decode the image and present it later (`async`). In practice, `async` means that the next paint does not wait for the image to decode.

It is often difficult to perceive any noticeable effect when using `decoding` on static `<image>` elements. They'll likely be initially rendered as empty images while the image files are fetched (either from the network or from the cache) and then handled independently anyway, so the "syncing" of content updates is less apparent. However, the blocking of rendering while decoding happens, while often quite small, *can* be measured — even if it is difficult to observe with the human eye.

Using different `decoding` types can result in more noticeable differences when dynamically inserting `<image>` elements into the DOM via JavaScript — see `SVGImageElement.decoding` for more details.

Allowed values:

`sync`

Decode the image synchronously along with rendering the other content, and present everything together.

`async`

Decode the image asynchronously, after rendering and presenting the other content.

`auto`

No preference for the decoding mode; the browser decides what is best for the user. This is the default value.

Example
-------

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image
 href="https://example.com/mdn\_logo\_dark.png"
 height="200"
 width="200"
 decoding="async" />
</svg>
```

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

| Specification |
| --- |
| HTML Standard # dom-img-decoding |

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

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

See also
--------

* SVGImageElement: decoding property
* What does the image decoding attribute actually do? on tunetheweb.com (2023)


systemLanguage - SVG: Scalable Vector Graphics

systemLanguage
==============

The **`systemLanguage`** attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<audio>`
* `<canvas>`
* `<circle>`
* `<clipPath>`
* `<cursor>`
* `<defs>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<iframe>`
* `<image>`
* `<line>`
* `<mask>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<set>`
* `<svg>`
* `<switch>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
* `<unknown>`
* `<use>`
* `<video>`
Usage notes
-----------

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

`<language-tags>`

The value is a set of comma-separated tokens, each of which must be a language tag, as defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).

`systemLanguage` is often used in conjunction with the `<switch>` element. If the attribute is used in other situations, then it represents a simple switch on the given element whether to render the element or not.

**Note:** If several alternative language objects are enclosed in a `<switch>` and none of them matches, this may lead to situations where no content is displayed. It is thus recommended to include a "catch-all" choice at the end of such a `<switch>` which is acceptable in all cases.

The attribute evaluates to "true" if one of the language tags indicated by user preferences is a case-insensitive match or prefix (followed by a "-") of one of the language tags given in the value of this parameter. Otherwise it evaluates to "false".

**Note:** The prefix matching rule does not imply that if a user understands a language with a certain tag, that the user will also understand all languages with the tag as prefix.

If the attribute is not present, then it implicitly evaluates to "true". If a null string or empty string value is given, the attribute evaluates to "false".

The prefix rule allows the use of prefix tags if this is the case.

Multiple languages may be listed for content that is intended for multiple audiences. For example, content that is presented simultaneously in the original Maori and English versions, would call for:

```html
<text systemLanguage="mi, en"><!-- content goes here --></text>
```

However, just because multiple languages are present within the object on which the `systemLanguage` test attribute is placed, this does not mean that it is intended for multiple linguistic audiences. An example would be a beginner's language primer, such as "A First Lesson in Latin," which is clearly intended to be used by an English-literate audience. In this case, the attribute should only include `en`.

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

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

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

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


cy - SVG: Scalable Vector Graphics

cy
==

The **`cy`** attribute define the y-axis coordinate of a center point.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cy="50" cx="50" r="45" />
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

For `<circle>`, `cy` defines the y-axis coordinate of the center of the shape.

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

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

ellipse
-------

For `<ellipse>`, `cy` defines the y-axis coordinate of the center of the shape.

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

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

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

For `<radialGradient>`, `cy` defines the y-axis coordinate of the end circle for the radial gradient.

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

### Example
```

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

```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CY |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |

See also
--------

* `cx`
* `r`


type - SVG: Scalable Vector Graphics

type
====

The `type` attribute is a generic attribute and it has different meaning based on the context in which it's used.

* For the `<animateTransform>` element, it defines the type of transformation, whose values change over time.
* For the `<feColorMatrix>` element, it indicates the type of matrix operation. The keyword `matrix` indicates that a full 5x4 matrix of values will be provided. The other keywords represent convenience shortcuts to allow commonly used color operations to be performed without specifying a complete matrix.
* For the `<feFuncR>`, `<feFuncG>`, `<feFuncB>`, and `<feFuncA>` elements, it Indicates the type of component transfer function.
* For the `<feTurbulence>` element, it indicates whether the filter primitive should perform a noise or turbulence function.
* For the `<style>` and `<script>` elements, it defines the content type of the element.

You can use this attribute with the following SVG elements:

* `<animateTransform>`
* `<feColorMatrix>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feTurbulence>`
* `<script>`
* `<style>`
Usage context
-------------

### For the <animateTransform> elements

SVG element: `<animateTransform>`

|  |  |
| --- | --- |
| Categories | *None* |
| Value | **`translate`** | `scale` |
 `rotate` | `skewX` | `skewY` |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |

### For the <feColorMatrix> element

SVG element: `<feColorMatrix>`

|  |  |
| --- | --- |
| Categories | *None* |
| Value | **`matrix`** | `saturate` |
 `hueRotate` | `luminanceToAlpha` |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the <feFuncR>, <feFuncG>, <feFuncB>, and <feFuncA> elements

SVG elements: `<feFuncR>`, `<feFuncG>`, `<feFuncB>`, `<feFuncA>`

|  |  |
| --- | --- |
| Categories | *None* |
| Value | `identity` | `table` | `discrete` |
 `linear` | `gamma` |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the <feTurbulence> element

SVG element: `<feTurbulence>`

|  |  |
| --- | --- |
| Categories | *None* |
| Value | `fractalNoise` | **`turbulence`** |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the <style> and <script> elements

SVG elements: `<style>`, `<script>`

|  |  |
| --- | --- |
| Categories | *None* |
| Value | <content-type> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) : scriptSVG 1.1 (2nd Edition) : style |


y2 - SVG: Scalable Vector Graphics

y2
==

The **`y2`** attribute is used to specify the second y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the `y` 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="1" x2="9" y1="5" y2="1" stroke="red" />
  <line x1="1" x2="9" y1="5" y2="5" stroke="green" />
  <line x1="1" x2="9" y1="5" y2="9" stroke="blue" />
</svg>
```

line
----

For `<line>`, `y2` defines the y 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="1" x2="9" y1="5" y2="1" stroke="red" />
  <line x1="1" x2="9" y1="5" y2="5" stroke="green" />
  <line x1="1" x2="9" y1="5" y2="9" stroke="blue" />
</svg>
```

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

For `<linearGradient>`, `y2` defines the y 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 | `0%` |
| 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 top right
 corner of the bounding box of the shape it is applied to.
 -->
  <linearGradient y2="0%" id="g0">
    <stop offset="5%" stop-color="black" />
    <stop offset="50%" stop-color="red" />
    <stop offset="95%" stop-color="black" />
  </linearGradient>

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

  <!--
 Here the gradient vector end at the bottom right
 corner of the bounding box of the shape it is applied to.
 -->
  <linearGradient y2="100%" id="g1">
    <stop offset="5%" stop-color="black" />
    <stop offset="50%" stop-color="red" />
    <stop offset="95%" stop-color="black" />
  </linearGradient>

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineElementY2Attribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementY2Attribute |


marker-start - SVG: Scalable Vector Graphics

marker-start
============

The **`marker-start`** attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape.

For all shape elements, except `<polyline>` and `<path>`, the last vertex is the same as the first vertex. In this case, if the value of `marker-start` and `marker-end` are both not `none`, then two markers will be rendered on that final vertex. For `<path>` elements, for each closed subpath, the last vertex is the same as the first vertex. `marker-start` is only rendered on the first vertex of the path data.

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

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
Example
-------
```

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

```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="triangle"
 viewBox="0 0 10 10"
 refX="1"
 refY="5"
 markerUnits="strokeWidth"
 markerWidth="10"
 markerHeight="10"
 orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-start="url(#triangle)" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `none` | `<marker-ref>` |
| Default value | `none` |
| Animatable | discrete |

`none`

Indicates that no marker symbol shall be drawn at the first vertex.

`<marker-ref>`

This value is a reference to a `<marker>` element, which will be drawn at the first vertex. If the reference is not valid, then no marker will be drawn.

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

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

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

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

See also
--------

* `<marker>`
* `marker-end`
* `marker-mid`


text-rendering - SVG: Scalable Vector Graphics

text-rendering
==============

The **`text-rendering`** attribute provides hints to the renderer about what tradeoffs to make when rendering text.

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

You can use this attribute with the following SVG elements:

* `<text>`
Example
-------
```

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

```html
<svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">
  <text y="15" text-rendering="geometricPrecision">Geometric precision</text>
  <text y="35" text-rendering="optimizeLegibility">Optimized legibility</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `auto` | `optimizeSpeed` |
 `optimizeLegibility` | `geometricPrecision` |
| Default value | `auto` |
| Animatable | discrete |

`auto`

This value indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.

`optimizeSpeed`

This value indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause some user agents to turn off text anti-aliasing.

`optimizeLegibility`

This value indicates that the user agent shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.

`geometricPrecision`

This value indicates that the user agent shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

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

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

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

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

See also
--------

* `CSS text-rendering`


zoomAndPan - SVG: Scalable Vector Graphics

zoomAndPan
==========

**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 **`zoomAndPan`** attribute specifies whether the SVG document can be magnified and panned.

Magnification in this context means the effect of a supplemental scale and translate transformation on the outermost SVG document fragment.

Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.

You can use this attribute with the following SVG elements:

* `<svg>`
* `<view>`
Example
-------
```

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

```html
<svg
 viewBox="0 0 200 200"
 xmlns="http://www.w3.org/2000/svg"
 zoomAndPan="disable">
  <filter id="diffuseLighting" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" zoomAndPan="1">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>

  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#diffuseLighting);" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `disable` | `magnify` |
| Default value | `magnify` |
| Animatable | No |

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

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

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

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


underline-position - SVG: Scalable Vector Graphics

underline-position
==================

The `underline-position` attribute represents the ideal vertical position of the underline. The underline position 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) |


intercept - SVG: Scalable Vector Graphics

intercept
=========

The **`intercept`** attribute defines the intercept of the linear function of color component transfers when the `type` attribute is set to `linear`.

You can use this attribute with the following SVG elements:

* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient
 id="gradient"
 gradientUnits="userSpaceOnUse"
 x1="0"
 y1="0"
 x2="200"
 y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset="0.5" stop-color="#00ff00" />
      <stop offset="1" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="linear" intercept="0" />
      <feFuncG type="linear" intercept="0" />
      <feFuncB type="linear" intercept="0" />
    </feComponentTransfer>
  </filter>
  <filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="linear" intercept="0.3" />
      <feFuncG type="linear" intercept="0.1" />
      <feFuncB type="linear" intercept="0.8" />
    </feComponentTransfer>
  </filter>

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

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

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-intercept |


side - SVG: Scalable Vector Graphics

side
====

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`side`** attribute determines the side of a path the text is placed on (relative to the path direction).

You can use this attribute with the following SVG elements:

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

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

text {
  font:
    25px Arial,
    Helvetica,
    sans-serif;
}
```

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <text>
    <textPath href="#circle1" side="left">Text left from the path</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right from the path</textPath>
  </text>

  <circle
 id="circle1"
 cx="100"
 cy="100"
 r="70"
 fill="transparent"
 stroke="silver" />
  <circle
 id="circle2"
 cx="320"
 cy="100"
 r="70"
 fill="transparent"
 stroke="silver" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `left` | `right` |
| Default value | `left` |
| Animatable | Yes |

`left`

This value places the text on the left side of the path (relative to the path direction).

`right`

This value places the text on the right side of the path (relative to the path direction). This effectively reverses the path direction.

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

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

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

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