x - SVG: Scalable Vector Graphics

x
=

The **`x`** attribute defines an x-axis coordinate in the user coordinate system.

You can use this attribute with the following SVG elements:

* `<cursor>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpecularLighting>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<glyphRef>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>`
* `<text>`
* `<tref>`
* `<tspan>`
* `<use>`
Example
-------
```

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

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="60" height="60" />
  <rect x="120" y="20" width="60" height="60" />
  <rect x="220" y="20" width="60" height="60" />
</svg>
```

feBlend
-------

For `<feBlend>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feColorMatrix>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feComponentTransfer>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feComposite>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feConvolveMatrix>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feDiffuseLighting>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feDisplacementMap>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feDropShadow>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feFlood
-------

For `<feFlood>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feFuncA
-------

For `<feFuncA>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feFuncB
-------

For `<feFuncB>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feFuncG
-------

For `<feFuncG>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feFuncR
-------

For `<feFuncR>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feGaussianBlur>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feImage
-------

For `<feImage>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feMerge
-------

For `<feMerge>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feMergeNode
-----------

For `<feMergeNode>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feMorphology>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

feOffset
--------

For `<feOffset>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<fePointLight>`, `x` defines the x location for the light source in the coordinate system defined by the `primitiveUnits` attribute on the `<filter>` element.

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

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

For `<feSpecularLighting>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feSpotLight>`, `x` defines the x location for the light source in the coordinate system defined by the `primitiveUnits` attribute on the `<filter>` element.

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

feTile
------

For `<feTile>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

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

For `<feTurbulence>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

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

filter
------

For `<filter>`, `x` defines the x coordinate of the upper left corner for the rendering area of the filter.

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

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

For `<foreignObject>`, `x` defines the x coordinate of the upper left corner of its viewport.

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

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

glyphRef
--------

**Warning:** As of SVG2 `<glyphRef>` is deprecated and shouldn't be used.

For `<glyphRef>`, `x` defines the x-axis coordinate of the glyph.

|  |  |
| --- | --- |
| Value | **<number>** |
| Default value | `0` for the first glyphRef, and the end x coordinate of the
 previous `<glyphRef>` for all subsequent sibling
 `<glyphRef>`.
  |
| Animatable | Yes |

image
-----

For `<image>`, `x` defines the x coordinate of the upper left corner of the image.

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

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

mask
----

For `<mask>`, `x` defines the x coordinate of the upper left corner of its area of effect. The exact effect of this attribute is influenced by the `maskUnits` attribute.

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

pattern
-------

For `<pattern>`, `x` defines the x coordinate of the upper left corner 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>`, `x` defines the x coordinate of the upper left corner of the shape.

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

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

svg
---

For `<svg>`, `x` defines the x coordinate of the upper left corner of its viewport.

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

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

text
----

For `<text>`, if it contains a single value, `x` defines the x coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `x` defines the x coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | `0` |
| Animatable | Yes |
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <!-- x with a single value -->
  <text y="40%" x="50%">SVG</text>

  <!-- x with multiple values -->
  <text y="90%" x="25%, 50%, 75%">SVG</text>
</svg>
```

```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

tref
----

**Warning:** As of SVG2 `<tref>` is deprecated and shouldn't be used.

For `<tref>`, if it contains a single value, `x` defines the x coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `x` defines the x coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | `0` |
| Animatable | Yes |

tspan
-----

For `<tspan>`, if it contains a single value, `x` defines the x coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `x` defines the x coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | *none* |
| Animatable | Yes |
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <text>
    <!-- x with a single value -->
    <tspan y="40%" x="50%">SVG</tspan>

    <!-- x with multiple values -->
    <tspan y="90%" x="25%, 50%, 75%">SVG</tspan>
  </text>
</svg>
```

```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

use
---

For `<use>`, `x` defines the x coordinate of the upper left corner of the referenced element.

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

**Note:** Starting with SVG2, `x` 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-x |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-x |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-x |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-x |
| CSS Masking Module Level 1 # element-attrdef-mask-x |
| Scalable Vector Graphics (SVG) 2 # X |
| Scalable Vector Graphics (SVG) 2 # PatternElementXAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementXAttribute |


rx - SVG: Scalable Vector Graphics

rx
==

The **`rx`** attribute defines a radius on the x-axis.

You can use this attribute with the following SVG elements:

* `<ellipse>`
* `<rect>`
Example
-------
```

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

```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" rx="0" ry="25" />
  <ellipse cx="150" cy="50" rx="25" ry="25" />
  <ellipse cx="250" cy="50" rx="50" ry="25" />

  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>
```

ellipse
-------

For `<ellipse>`, `rx` defines the x-radius of the shape. With a value lower or equal to zero the ellipse won't be drawn at all.

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

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

rect
----

For `<rect>`, `rx` defines the x-axis radius of the ellipse used to round off the corners of the rectangle.

The way the value of the `rx` attribute is interpreted depend on both the `ry` attribute and the width of the rectangle:

* If a properly specified value is provided for `rx` but not for `ry` (or the opposite), then the browser will consider the missing value equal to the defined one.
* If neither `rx` nor `ry` has a properly specified value, then the browser will draw a rectangle with square corners.
* If `rx` is greater than half of the width of the rectangle, then the browser will consider the value for `rx` as half of the width of the rectangle.

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

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

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

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


marker-mid - SVG: Scalable Vector Graphics

marker-mid
==========

The **`marker-mid`** attribute defines the arrowhead or polymarker that will be drawn at all interior vertices of the given shape.

The marker is rendered on every vertex other than the first and last vertices of the path data.

**Note:** As a presentation attribute, `marker-mid` 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="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
      <circle cx="4" cy="4" r="4" stroke="none" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-mid="url(#circle)" />
</svg>
```

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

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

`none`

Indicates that no marker symbol shall be drawn at the given vertices.

`<marker-ref>`

This value is a reference to a `<marker>` element, which will be drawn at the given vertices. 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-start`
* `marker-end`


class - SVG: Scalable Vector Graphics

class
=====

« SVG Attribute reference home

Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters.

An element's class name serves two key roles:

* As a style sheet selector, for when an author assigns style information to a set of elements.
* For general use by the browser.

You can use this class to style SVG content using CSS.

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

|  |  |
| --- | --- |
| Categories | None |
| Value | <list-of-class-names> |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition): The class attribute |

Example
-------

```html
<html lang="en">
  <body>
    <svg
 width="120"
 height="220"
 viewPort="0 0 120 120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
      <style>
 <![CDATA[
 rect.rectClass {
 stroke: #000066;
 fill: #00cc00;
 }
 circle.circleClass {
 stroke: #006600;
 fill: #cc0000;
 }
 ]]>
 </style>

      <rect class="rectClass" x="10" y="10" width="100" height="100" />
      <circle class="circleClass" cx="40" cy="50" r="26" />
    </svg>
  </body>
</html>
```

Elements
--------

The following elements can use the `class` attribute:

* `<a>`
* `<circle>`
* `<clipPath>`
* `<defs>`
* `<desc>`
* `<ellipse>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<font>`
* `<foreignObject>`
* `<g>`
* `<glyph>`
* `<glyphRef>`
* `<image>`
* `<line>`
* `<linearGradient>`
* `<marker>`
* `<mask>`
* `<missing-glyph>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<radialGradient>`
* `<rect>`
* `<stop>`
* `<svg>`
* `<switch>`
* `<symbol>`
* `<text>`
* `<textPath>`
* `<title>`
* `<tref>`
* `<tspan>`
* `<use>`
Browser compatibility
---------------------

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


targetY - SVG: Scalable Vector Graphics

targetY
=======

The **`targetY`** attribute determines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. The topmost row of the matrix is row number zero. The value must be such that: `0` <= `targetY` < `order` `Y`.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<integer>` |
| Default value | `floor(`order`Y / 2)` |
| Animatable | Yes |

`<integer>`

This value indicates the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image.

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

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

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

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

See also
--------

* `targetX`


filterUnits - SVG: Scalable Vector Graphics

filterUnits
===========

The **`filterUnits`** attribute defines the coordinate system for the attributes `x`, `y`, `width` and `height`.

You can use this attribute with the following SVG elements:

* `<filter>`
Usage notes
-----------

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

`userSpaceOnUse`

`x`, `y`, `width` and `height` represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the `<filter>` element is referenced (i.e., the user coordinate system for the element referencing the `<filter>` element via a `filter` attribute).

`objectBoundingBox`

In that case, `x`, `y`, `width` and `height` represent fractions or percentages of the bounding box on the referencing element.

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

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

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

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


panose-1 - SVG: Scalable Vector Graphics

panose-1
========

**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 **`panose-1`** attribute indicates the Panose-1 number of a font face.

Panose-1 is an industry standard TrueType font classification and matching technology. The PANOSE system consists of a set of ten numbers that categorize the key attributes of a Latin typeface, a classification procedure for creating those numbers, and mapper software that determines the closest possible font match given a set of typefaces.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `<integer>{10}` |
| Default value | `0 0 0 0 0 0 0 0 0 0` |
| Animatable | No |

`<integer>{10}`

This value specifies a Panose-1 number and consists of ten decimal integers, separated by whitespace. The initial value zero for each PANOSE digit means "any", i.e. all fonts will match the Panose number if this value is used.

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

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

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

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


font-weight - SVG: Scalable Vector Graphics

font-weight
===========

The **`font-weight`** attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-weight="normal">Normal text</text>
  <text x="100" y="20" font-weight="bold">Bold text</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `normal` | `bold` | `bolder` |
 `lighter` | `<number>` |
| Default value | `normal` |
| Animatable | Yes |

For a description of the values, please refer to the CSS `font-weight` property.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-weight-prop |

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

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

See also
--------

* `CSS font-weight`


path - SVG: Scalable Vector Graphics

path
====

The **`path`** attribute has two different meanings, either it defines a text path along which the characters of a text are rendered, or a motion path along which a referenced element is animated.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 id="MyPath"
 fill="none"
 stroke="silver"
 d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath
 path="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>
```

animateMotion
-------------

For `<animateMotion>`, `path` defines the motion path, expressed in the same format and interpreted the same way as the `d` geometric property for the `<path>` element. The effect of a motion path animation is a translation along the x- and y-axes of the current user coordinate system by the x and y values computed over time.

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

`<path-data>`

This value defines the motion path along which the referenced element is animated. For detailed information about the commands that can be used, see the explanation for the `d` attribute.

textPath
--------

For `<textPath>`, `path` defines the path onto which the glyphs of a `<text>` element will be rendered. An empty string indicates that there is no path data for the element. This means that the text within the `<textPath>` element does not render or contribute to the bounding box of the `<text>` element. If the attribute is not specified, the path specified in `href` is used instead.

|  |  |
| --- | --- |
| Value | `<path-data>` |
| Default value | *Path specified in `href`* |
| Animatable | Yes |

`<path-data>`

This value defines the text path along which the glyphs of the `<text>` element are aligned. For detailed information about the commands that can be used, see the explanation for the `d` attribute.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextPathElementPathAttribute |
| SVG Animations Level 2 # AnimateMotionElementPathAttribute |


SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics

SVG Conditional Processing Attributes
=====================================

The SVG conditional processing attributes are all the attributes that can be specified on some SVG elements to control whether or not the element on which it appears should be rendered.

* requiredExtensions
* requiredFeatures
* systemLanguage
Attributes
----------

`requiredExtensions`

 List all the browser specific capabilities that must be supported by the browser to be allowed to render the associated element.
 *Value*: A list of space-separated URI; *Animatable*: **No**

`requiredFeatures`
Deprecated

 List all the features, as defined is the SVG 1.1 specification, that must be supported by the browser to be allowed to render the associated element.
 *Value*: A list of space-separated URI; *Animatable*: **No**

`systemLanguage`

 Indicates which language the user must have chosen to render the associated element.
 *Value*: A list of comma-separated language tags according to RFC 5646: Tags for Identifying Languages (also known as BCP 47); *Animatable*: **No**

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

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


vert-origin-y - SVG: Scalable Vector Graphics

vert-origin-y
=============

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value indicates the y-coordinate of the origin of a glyph for vertically oriented text.

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

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

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

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

See also
--------

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


gradientTransform - SVG: Scalable Vector Graphics

gradientTransform
=================

The `gradientTransform` attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient
 id="gradient1"
 gradientUnits="userSpaceOnUse"
 cx="100"
 cy="100"
 r="100"
 fx="100"
 fy="100">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>
  <radialGradient
 id="gradient2"
 gradientUnits="userSpaceOnUse"
 cx="100"
 cy="100"
 r="100"
 fx="100"
 fy="100"
 gradientTransform="skewX(20) translate(-35, 0)">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>

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

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

|  |  |
| --- | --- |
| Default value | *Identity transform* |
| Value | `<transform-list>` |
| Animatable | Yes |

`<transform-list>`

A list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # typedef-transform-list |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementGradientTransformAttribute |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementGradientTransformAttribute |

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

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

See also
--------

* `<transform-function>`


data-* - SVG: Scalable Vector Graphics

data-\*
=======

The **`data-*`** SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the `SVGElement` interface of the element the attributes belong to, with the `HTMLElement.dataset` property.

The `*` can be replaced by any characters allowed in XML's rules for names, with the following restrictions:

* Can't start with `xml`.
* No semicolons (`;`, `U+003A`).
* No capital `A` to `Z` letters.

**Note:** The `HTMLElement.dataset` property is a `DOMStringMap` that provides the attribute `data-test-value` via `SVGElement.dataset.testValue`. Hyphen characters (`-`, `U+002D`) are removed and the next letter is capitalized, resulting in the camel case format.

You can use this attribute with any SVG element.

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

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

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

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

See also
--------

* `SVGElement`
* The `HTMLElement.dataset` property used to access these attributes from scripts.
* Using data attributes


pointsAtX - SVG: Scalable Vector Graphics

pointsAtX
=========

The **`pointsAtX`** attribute represents the x location in the coordinate system established by attribute `primitiveUnits` on the `<filter>` element of the point at which the light source is pointing.

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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


stroke-dashoffset - SVG: Scalable Vector Graphics

stroke-dashoffset
=================

The **`stroke-dashoffset`** attribute is a presentation attribute defining an offset on the rendering of the associated dash array.

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- No dash array -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- No dash offset -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  <!--
 The start of the dash array computation
 is pulled by 3 user units
 -->
  <line
 x1="0"
 y1="5"
 x2="30"
 y2="5"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="3" />

  <!--
 The start of the dash array computation
 is pushed by 3 user units
 -->
  <line
 x1="0"
 y1="7"
 x2="30"
 y2="7"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="-3" />

  <!--
 The start of the dash array computation
 is pulled by 1 user units which ends up
 in the same rendering as the previous example
 -->
  <line
 x1="0"
 y1="9"
 x2="30"
 y2="9"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="1" />

  <!--
 the following red lines highlight the
 offset of the dash array for each line
 -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgb(255 0 0 / 50%)" />
</svg>
```

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

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

The offset is usually expressed in user units resolved against the `pathLength` but if a <percentage> is used, the value is resolved as a percentage of the current viewport.

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

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

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

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


text-anchor - SVG: Scalable Vector Graphics

text-anchor
===========

The **`text-anchor`** attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the `inline-size` property relative to a given point.

This attribute is not applicable to other types of auto-wrapped text. For those cases you should use `text-align`. For multi-line text, the alignment takes place for each line.

The `text-anchor` attribute is applied to each individual text chunk within a given `<text>` element. Each text chunk has an initial current text position, which represents the point in the user coordinate system resulting from (depending on context) application of the `x` and `y` attributes on the `<text>` element, any `x` or `y` attribute values on a `<tspan>` or `<tref>` element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a `<textPath>` element.

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
 d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110"
 stroke="grey" />

  <!-- Anchors in action -->
  <text text-anchor="start" x="60" y="40">A</text>
  <text text-anchor="middle" x="60" y="75">A</text>
  <text text-anchor="end" x="60" y="110">A</text>

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

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

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

|  |  |
| --- | --- |
| Default value | `start` |
| Value | `start` | `middle` | `end` |
| Animatable | discrete |

`start`

The rendered characters are aligned such that the start of the text string is at the initial current text position. For an element with a `direction` property value of `ltr` (typical for most European languages), the left side of the text is rendered at the initial text position. For an element with a direction property value of `rtl` (typical for Arabic and Hebrew), the right side of the text is rendered at the initial text position. For an element with a vertical primary text direction (often typical for Asian text), the top side of the text is rendered at the initial text position.

`middle`

The rendered characters are aligned such that the middle of the text string is at the current text position. (For text on a path, conceptually the text string is first laid out in a straight line. The midpoint between the start of the text string and the end of the text string is determined. Then, the text string is mapped onto the path with this midpoint placed at the current text position.)

`end`

The rendered characters are shifted such that the end of the resulting rendered text (final current text position before applying the `text-anchor` property) is at the initial current text position. For an element with a `direction` property value of `ltr` (typical for most European languages), the right side of the text is rendered at the initial text position. For an element with a `direction` property value of `rtl` (typical for Arabic and Hebrew), the left side of the text is rendered at the initial text position. For an element with a vertical primary text direction (often typical for Asian text), the bottom of the text is rendered at the initial text position.

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

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

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

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


keyPoints - SVG: Scalable Vector Graphics

keyPoints
=========

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <path
 d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
 stroke="lightgrey"
 stroke-width="2"
 fill="none"
 id="motionPath" />
  <circle cx="10" cy="110" r="3" fill="lightgrey" />
  <circle cx="110" cy="10" r="3" fill="lightgrey" />

  <circle r="5" fill="red">
    <animateMotion
 dur="3s"
 repeatCount="indefinite"
 keyPoints="0;0.5;1"
 keyTimes="0;0.15;1"
 calcMode="linear">
      <mpath href="#motionPath" />
    </animateMotion>
  </circle>
</svg>
```

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

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

`<number> [; <number>] ;?`

This value defines a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the object shall move at the moment in time specified by corresponding `keyTimes` value. The distance is calculated along the path specified by the `path` attribute. Each progress value in the list corresponds to a value in the `keyTimes` attribute list.

If a list of key points is specified, there must be exactly as many values in the `keyPoints` list as in the `keyTimes` list.

If there's a semicolon at the end of the value, optionally followed by white space, both the semicolon and the trailing white space are ignored.

If there are any errors in the value specification (i.e. bad values, too many or too few values), then that's an error.

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

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

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

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


descent - SVG: Scalable Vector Graphics

descent
=======

**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 **`descent`** attribute defines the maximum unaccented depth of the font.

**Note:** It was specified to share the syntax and semantics of the obsolete `descent` descriptor of the `@font-face` at-rule defined in an early version of CSS 2.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | Value of `vert-origin-y` |
| Animatable | No |

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

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

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

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


SVG attribute: crossorigin - SVG: Scalable Vector Graphics

SVG attribute: crossorigin
==========================

The crossorigin attribute, valid on the `<image>` and `<feImage>` elements, provides support for configuration of the Cross-Origin Resource Sharing (CORS) requests for the element's fetched data.

This table shows possible keywords and their meaning:

| Keyword | Description |
| --- | --- |
| `anonymous` | Client CORS requests for this element will have the credentials flag set to 'same-origin'. |
| `use-credentials` | Client CORS requests for this element will have the credentials flag set to 'include'. |
| `""` | Setting the attribute name to an empty value, like `crossorigin` or `crossorigin=""`, is the same as `anonymous`. |

It follows the same processing rules as the HTML attribute `crossorigin`.

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"
 crossorigin="use-credentials" />
</svg>
```

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

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

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

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

See also
--------

* Cross-Origin Resource Sharing (CORS)


dy - SVG: Scalable Vector Graphics

dy
==

The **`dy`** attribute indicates a shift along the y-axis on the position of an element or its content.

You can use this attribute with the following SVG elements:

* `<feDropShadow>`
* `<feOffset>`
* `<glyphRef>`
* `<text>`
* `<tref>`
* `<tspan>`
Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="0" x2="100%" y1="30%" y2="30%" />
  <line x1="0" x2="100%" y1="80%" y2="80%" />

  <!-- Some reference text -->
  <text x="10%" y="30%" fill="grey">SVG</text>

  <!-- The same text with a shift along the y-axis -->
  <text dy="50%" x="10%" y="30%">SVG</text>
</svg>
```

```css
line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}
```

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

For `<feDropShadow>`, `dy` defines the y offset of the dropped shadow. The unit used to resolve the value of the attribute is set by the `primitiveUnits` attribute of the `<filter>` element.

|  |  |
| --- | --- |
| Value | **<number>** |
| Default value | `2` |
| Animatable | Yes |

feOffset
--------

For `<feOffset>`, `dy` defines the y offset of the filter input graphic. The unit used to resolve the value of the attribute is set by the `primitiveUnits` attribute of the `<filter>` element.

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

glyphRef
--------

**Warning:** As of SVG2 `<glyphRef>` is deprecated and shouldn't be used.

For `<glyphRef>`, `dy` defines the y offset of the glyph, in the font metric system.

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

text
----

For `<text>`, if it contains a single value, `dy` defines a shift along the y-axis for all glyphs.

If there are multiple values, `dy` defines a shift along the y-axis for each individual glyph relative to the preceding glyph. If there are less values than glyphs, the remaining glyphs use a value of `0`. If there are more values than glyphs, extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of
 **<length>** |
| Default value | *none* |
| Animatable | Yes |

### Example
```

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

```html
<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Horizontal lines -->
  <line x1="0" x2="100%" y1="30" y2="30" />
  <line x1="0" x2="100%" y1="40" y2="40" />
  <line x1="0" x2="100%" y1="50" y2="50" />
  <line x1="0" x2="100%" y1="60" y2="60" />

  <!-- Vertical lines -->
  <line x1="10" x2="10" y1="0" y2="100%" />
  <line x1="50" x2="50" y1="0" y2="100%" />
  <line x1="90" x2="90" y1="0" y2="100%" />

  <!-- Behaviors change based on the number of values in the attributes -->
  <text dy="20" x="10" y="30">SVG</text>
  <text dy="0 10" x="50" y="30">SVG</text>
  <text dy="0 10 20" x="90" y="30">SVG</text>
</svg>
```

```css
line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}
```

tref
----

**Warning:** As of SVG2 `<tref>` is deprecated and shouldn't be used.

For `<tref>`, if it contains a single value, `dy` defines a shift along the y-axis for all glyphs.

If there are multiple values, `dy` defines a shift along the y-axis for each individual glyph relative to the preceding glyph. If there are less values than glyphs, the remaining glyphs use a value of `0`. If there are more values than glyphs, extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of
 **<length>** |
| Default value | *none* |
| Animatable | Yes |

tspan
-----

For `<tspan>`, if it contains a single value, `dy` defines a shift along the y-axis for all alternate glyph.

If there are multiple values, `dy` defines a shift along the y-axis for each individual glyph relative to the preceding glyph. If there are less values than glyphs, the remaining glyphs use a value of `0`. If there are more values than glyphs, extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of
 **<length>** |
| Default value | *none* |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dy |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dy |
| Scalable Vector Graphics (SVG) 2 # TextElementDYAttribute |


flood-color - SVG: Scalable Vector Graphics

flood-color
===========

The **`flood-color`** attribute indicates what color to use to flood the current filter primitive subregion.

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

You can use this attribute with the following SVG elements:

* `<feFlood>`
* `<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="skyblue" x="0" y="0" width="200" height="200" />
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" 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 | `color` |
| Initial value | `black` |
| Animatable | Yes |

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

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

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

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

See also
--------

* `flood-opacity`


accent-height - SVG: Scalable Vector Graphics

accent-height
=============

**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 **`accent-height`** attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system.

You can use this attribute with the following SVG elements:

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

For `<font-face>`, `accent-height` defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system.

|  |  |
| --- | --- |
| Value | <number> |
| Default value | Value of `ascent` |
| Animatable | No |

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

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

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

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

See also
--------

* `cap-height`
* `x-height`


stop-opacity - SVG: Scalable Vector Graphics

stop-opacity
============

The **`stop-opacity`** attribute defines the opacity of a given color gradient stop.

The opacity value used for the gradient calculation is the product of the value of `stop-opacity` and the opacity of the value of the `stop-color` attribute. For `stop-color` values that don't include explicit opacity information, the opacity is treated as `1`.

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

You can use this attribute with the following SVG elements:

* `<stop>`
Usage notes
-----------

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

`<opacity-value>`

This value is either a `<number>` between `0` and `1` or a `<percentage>` value specifying the opacity of the color gradient stop.

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

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

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

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

See also
--------

* `stop-color`


kernelUnitLength - SVG: Scalable Vector Graphics

kernelUnitLength
================

**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 **`kernelUnitLength`** attribute has two meanings based on the context it's used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for `<feConvolveMatrix>`, it indicates the intended distance between successive columns and rows in the kernel matrix.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
feConvolveMatrix
----------------

For the `<feConvolveMatrix>`, `kernelUnitLength` indicates the intended distance in current filter units (i.e., units as determined by the value of `primitiveUnits` attribute) between successive columns and rows, respectively, in the `kernelMatrix`. By specifying value(s) for `kernelUnitLength`, the kernel becomes defined in a scalable, abstract coordinate system. If the attribute is not specified, the default value is one pixel in the offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.

If a negative or zero value is specified the default value will be used instead.

|  |  |
| --- | --- |
| Value | `<number-optional-number>` |
| Default value | *Pixel in offscreen bitmap* |
| Animatable | Yes |

`<number-optional-number>`

The first number is the x value. The second number is the y value. If the x value is not specified, it defaults to the same value as x.

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

For the `<feDiffuseLighting>`, `kernelUnitLength` indicates the intended distance in current filter units (i.e., units as determined by the value of attribute `primitiveUnits`) for the x and y coordinate, respectively, in the surface normal calculation formulas.

The first number is the x value. The second number is the y value. If the y value is not specified, it defaults to the same value as x. By specifying value(s) for `kernelUnitLength`, the kernel becomes defined in a scalable, abstract coordinate system. If the attribute is not specified, the x and y values represent very small deltas relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.

If a negative or zero value is specified the default value will be used instead.

|  |  |
| --- | --- |
| Value | `<number-optional-number>` |
| Default value | *Pixel in offscreen bitmap* |
| Animatable | Yes |

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

For the `<feSpecularLighting>`, `kernelUnitLength` indicates the intended distance in current filter units (i.e., units as determined by the value of attribute `primitiveUnits`) for the x and y coordinate, respectively, in the surface normal calculation formulas.

The first number is the x value. The second number is the y value. If the y value is not specified, it defaults to the same value as x. By specifying value(s) for `kernelUnitLength`, the kernel becomes defined in a scalable, abstract coordinate system. If the attribute is not specified, the x and y values represent very small deltas relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.

If a negative or zero value is specified the default value will be used instead.

|  |  |
| --- | --- |
| Value | `<number-optional-number>` |
| Default value | *Pixel in offscreen bitmap* |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fespecularlighting-kernelunitlength |
| Filter Effects Module Level 1 # element-attrdef-fediffuselighting-kernelunitlength |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-kernelunitlength |


arabic-form - SVG: Scalable Vector Graphics

arabic-form
===========

**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 **`arabic-form`** attribute indicates which of the four possible forms an Arabic glyph represents.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `initial` | `medial` | `terminal` |
 `isolated` |
| Default value | `isolated` |
| Animatable | No |

`initial`

This value indicates that the glyph represents the initial form.

`medial`

This value indicates that the glyph represents the medial form.

`terminal`

This value indicates that the glyph represents the terminal form.

`isolated`

This value indicates that the glyph represents the isolated form.

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

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

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

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

See also
--------

* Wikipedia page on the Arabic alphabet


divisor - SVG: Scalable Vector Graphics

divisor
=======

The **`divisor`** attribute specifies the value by which the resulting number of applying the `kernelMatrix` of a `<feConvolveMatrix>` element to the input image color value is divided to yield the destination color value.

A divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the result.

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 2 0 0 0 0 0 0 -1" divisor="1" />
  </filter>
  <filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="1 2 0 0 0 0 0 0 -1" divisor="8" />
  </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 | `<number>` |
| Default value |
 Sum of all values in `kernelMatrix` or
 `1` if sum is 0
  |
| Animatable | Yes |

`<number>`

This value defines the divisor. If the specified divisor is `0` then the default value will be used instead.

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

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

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

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


xlink:arcrole - SVG: Scalable Vector Graphics

xlink:arcrole
=============

**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:arcrole`** attribute specifies a contextual role for the element and corresponds to the RDF Primer notion of a property.

This contextual role can differ from the meaning of the resource when taken outside the context of this particular arc. For example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter."

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<cursor>`
* `<feImage>`
* `<filter>`
* `<font-face-uri>`
* `<glyphRef>`
* `<image>`
* `<linearGradient>`
* `<mpath>`
* `<pattern>`
* `<radialGradient>`
* `<script>`
* `<set>`
* `<textPath>`
* `<tref>`
* `<use>`
Usage notes
-----------

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

`<iri>`

This value specifies an IRI reference that identifies some resource that describes the intended property.

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

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

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

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

See also
--------

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


baseFrequency - SVG: Scalable Vector Graphics

baseFrequency
=============

The **`baseFrequency`** attribute represents the base frequency parameter for the noise function of the `<feTurbulence>` filter primitive.

You can use this attribute with the following SVG elements:

* `<feTurbulence>`
Example
-------

### Example 1
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.05" />
  </filter>

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

### Example 2

```html
<svg
 width="200"
 height="200"
 viewBox="0 0 220 220"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence
 type="turbulence"
 baseFrequency="0.05"
 numOctaves="2"
 result="turbulence" />
    <feDisplacementMap
 in2="turbulence"
 in="SourceGraphic"
 scale="50"
 xChannelSelector="R"
 yChannelSelector="G" />
  </filter>

  <circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)" />
</svg>
```

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

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

`<number-optional-number>`

If two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one the base frequency in the vertical direction. If one number is provided, then that value is used for both x and y.

Negative values are forbidden.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feturbulence-basefrequency |

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

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


image-rendering - SVG: Scalable Vector Graphics

image-rendering
===============

The **`image-rendering`** attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.

The resampling is always done in a truecolor (e.g., 24-bit) color space even if the original data and/or the target device is indexed color.

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

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `auto` | `optimizeSpeed` |
 `optimizeQuality` |
| Default value | `auto` |
| Animatable | Yes |

`auto`

Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.

`optimizeSpeed`

Indicates that the user agent shall emphasize rendering speed over quality.

`optimizeQuality`

Indicates that the user agent shall emphasize quality over rendering speed.

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |
| Scalable Vector Graphics (SVG) 2 # ImageRendering |

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

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

See also
--------

* `CSS image-rendering`


azimuth - SVG: Scalable Vector Graphics

azimuth
=======

The **`azimuth`** attribute specifies the direction angle for the light source on the XY plane (clockwise), in degrees from the x axis.

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 azimuth="0" />
    </feDiffuseLighting>
  </filter>
  <filter id="distantLight2">
    <feDiffuseLighting>
      <feDistantLight azimuth="240" />
    </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-azimuth |

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

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


additive - SVG: Scalable Vector Graphics

additive
========

The **`additive`** attribute controls whether or not an animation is additive.

It is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `replace` | `sum` |
| Default value | `replace` |
| Animatable | No |

sum

Specifies that the animation will add to the underlying value of the attribute and other lower priority animations.

replace

Specifies that the animation will override the underlying value of the attribute and other lower priority animations. This is the default, however the behavior is also affected by the animation value attributes `by` and `to`, as described in SMIL Animation: How from, to and by attributes affect additive behavior.

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

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

See also
--------

* SMIL Animation specification


bbox - SVG: Scalable Vector Graphics

bbox
====

**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 **`bbox`** attribute defines the maximal bounding box of a font.

You can use this attribute with the following SVG elements:

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

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

`<string>`

A comma-separated list of exactly four numbers specifying, in order, the lower left x, lower left y, upper right x, and upper right y of the bounding box for the complete font.

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

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

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

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


font-stretch - SVG: Scalable Vector Graphics

font-stretch
============

The **`font-stretch`** attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text.

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

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | Error: could not find syntax for this item |
| Default value | `normal` |
| Animatable | Yes |

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-stretch-prop |

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

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

See also
--------

* `CSS font-stretch`


orient - SVG: Scalable Vector Graphics

orient
======

The **`orient`** attribute indicates how a marker is rotated when it is placed at its position on the shape.

You can use this attribute with the following SVG elements:

* `<marker>`
Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <marker
 id="dataArrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="-65deg">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>

  <polyline
 points="10,10 10,90 90,90"
 fill="none"
 stroke="black"
 marker-start="url(#arrow)"
 marker-end="url(#arrow)" />

  <polyline
 points="15,80 29,50 43,60 57,30 71,40 85,15"
 fill="none"
 stroke="grey"
 marker-start="url(#dataArrow)"
 marker-mid="url(#dataArrow)"
 marker-end="url(#dataArrow)" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `auto` | `auto-start-reverse` |
 `<angle>` | `<number>` |
| Default value | `0` |
| Animatable | Yes (non-additive) |

`auto`

This value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.

`auto-start-reverse`

If placed by `marker-start`, the marker is oriented 180° different from the orientation that would be used if `auto` were specified. For all other markers, `auto-start-reverse` means the same as `auto`.

**Note:** This allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. which points outwards from both ends.

`<angle>`

This value indicates that the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.

**Note:** For example, if a value of `45` is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system.

`<number>`

This value indicates an angle in degrees. The marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.

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

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

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

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


numOctaves - SVG: Scalable Vector Graphics

numOctaves
==========

The **`numOctaves`** attribute defines the number of octaves for the noise function of the `<feTurbulence>` primitive.

 An octave is a noise function defined by its frequency and amplitude. A turbulence is built by accumulating several octaves with increasing frequencies and decreasing amplitudes.
 The higher the number of octaves, the more natural the noise looks. Though more octaves also require more calculations, resulting in a negative impact on performance.

You can use this attribute with the following SVG elements:

* `<feTurbulence>`
Example
-------

### Example 1
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" numOctaves="1" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" numOctaves="3" />
  </filter>

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

### Example 2

```html
<svg
 width="200"
 height="200"
 viewBox="0 0 220 220"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence baseFrequency="0.05" numOctaves="3" result="turbulence" />
    <feDisplacementMap
 in2="turbulence"
 in="SourceGraphic"
 scale="50"
 xChannelSelector="R"
 yChannelSelector="G" />
  </filter>

  <circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)" />
</svg>
```

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

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

`<integer>`

Defines the number of octaves. Negative values are forbidden.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feturbulence-numoctaves |

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

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

See also
--------

* Understanding Perlin Noise
* `baseFrequency`


target - SVG: Scalable Vector Graphics

target
======

The **`target`** attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an HTML or XHTML document, or is viewed with a tabbed browser. This attribute specifies the name of the browsing context (e.g., a browser tab or an (X)HTML iframe or object element) into which a document is to be opened when the link is activated:

You can use this attribute with the following SVG elements:

* `<a>`
Example
-------
```

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

text {
  font:
    20px Arial,
    Helvetica,
    sans-serif;
  fill: blue;
  text-decoration: underline;
}
```

```html
<svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
  <a href="https://developer.mozilla.org" target="\_self">
    <text x="0" y="20">Open link within iframe</text>
  </a>
  <a href="https://developer.mozilla.org" target="\_blank">
    <text x="0" y="60">Open link in new tab or window</text>
  </a>
  <a href="https://developer.mozilla.org" target="\_top">
    <text x="0" y="100">Open link in this tab or window</text>
  </a>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `_self` | `_parent` | `_top` |
 `_blank` | `<XML-Name>` |
| Default value | `_self` |
| Animatable | Yes |

`_replace`
Deprecated

The current SVG image is replaced by the linked content in the same rectangular area in the same frame as the current SVG image.

**Note:** This value was never well implemented, and the distinction between `_replace` and `_self` has been made redundant by changes in the HTML definition of browsing contexts. Use `_self` to replace the current SVG document.

`_self`

The current SVG image is replaced by the linked content in the same browsing context as the current SVG image.

`_parent`

The immediate parent browsing context of the SVG image is replaced by the linked content, if it exists and can be securely accessed from this document.

`_top`

The content of the full active window or tab is replaced by the linked content, if it exists and can be securely accessed from this document

`_blank`

A new un-named window or tab is requested for the display of the linked content, if this document can securely do so. If the user agent does not support multiple windows/tabs, the result is the same as \_top.

`<XML-Name>`

Specifies the name of the browsing context (tab, inline frame, object, etc.) for display of the linked content. If a context with this name already exists, and can be securely accessed from this document, it is re-used, replacing the existing content. If it does not exist, it is created (the same as '\_blank', except that it now has a name). The name must be a valid XML Name [XML11], and should not start with an underscore (U+005F LOW LINE character), to meet the requirements of a valid browsing context name from HTML.

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

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

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

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


SVG Styling Attributes - SVG: Scalable Vector Graphics

SVG Styling Attributes
======================

The SVG styling attributes are all the attributes that can be specified on any SVG element to apply CSS styling effects.

* `class`
* `style`
Attributes
----------

`class`

 Assigns a class name or set of class names to an element. It functions identically to the `class` attribute in HTML.
 *Value*: Any valid ID string; *Animatable*: **Yes**

`style`

 It specifies style information for its element. It functions identically to the `style` attribute in HTML.
 *Value*: Any valid style string; *Animatable*: **No**

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

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


stroke - SVG: Scalable Vector Graphics

stroke
======

The **`stroke`** attribute is a presentation attribute defining the color (*or any SVG paint servers like gradients or patterns*) used to paint the outline of the shape;

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color stroke -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- Stroke a circle with a gradient -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>

  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `none` |
| Animatable | Yes |

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

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

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

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


overflow - SVG: Scalable Vector Graphics

overflow
========

The **`overflow`** attribute sets what to do when an element's content is too big to fit in its block formatting context. **This feature is not widely implemented yet**.

This attribute has the same parameter values and meaning as the `CSS overflow property`, however, the following additional points apply:

* If it has a value of `visible`, the attribute has no effect (i.e., a clipping rectangle is not created).
* If the `overflow` property has the value `hidden` or `scroll`, a clip of the exact size of the SVG viewport is applied.
* When `scroll` is specified on an `<svg>` element, a scrollbar or panner is normally shown for the SVG viewport whether or not any of its content is clipped.
* Within SVG content, the value `auto` implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip.

**Note:** Although the initial value for overflow is `auto`, it is overwritten in the User Agent style sheet for the `<svg>` element when it is not the root element of a stand-alone document, the `<pattern>` element, and the `<marker>` element to be hidden by default.

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

You can use this attribute with the following SVG elements:

* `<foreignObject>`
* `<iframe>`
* `<image>`
* `<marker>`
* `<pattern>`
* `<symbol>`
* `<svg>`
* `<text>`
Example
-------
```

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

```html
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto">
  <text y="20">
    This text is wider than the SVG, so there should be a scrollbar shown.
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `visible` | `hidden` | `scroll` |
 `auto` |
| Default value | `visible` |
| Animatable | Yes |

For a description of the values, please see the `CSS overflow` property.

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

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

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

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

See also
--------

* `CSS overflow`


href - SVG: Scalable Vector Graphics

href
====

The **`href`** attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.

**Note:** Specifications before SVG 2 defined an `xlink:href` attribute, which is now rendered obsolete by the `href` attribute. If you need to support earlier browser versions, the deprecated `xlink:href` attribute can be used as a fallback in addition to the `href` attribute, e.g. `<use href="some-id" xlink:href="some-id" x="5" y="5" />`.

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<feImage>`
* `<image>`
* `<linearGradient>`
* `<mpath>`
* `<pattern>`
* `<radialGradient>`
* `<script>`
* `<set>`
* `<textPath>`
* `<use>`
Example
-------
```

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

```html
<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
  <a href="https://developer.mozilla.org/">
    <text x="10" y="25">MDN Web Docs</text>
  </a>
</svg>
```

In SVG
------

### a

For `<a>`, `href` defines the location of the referenced object, expressed as a URL reference.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |

### animate, animateMotion, animateTransform, set

For the `<animate>`, `<animateMotion>`, `<animateTransform>`, and `<set>`, `href` defines a URL referring to the element which is the target of this animation element and which therefore will be modified over time.

The URL must point to exactly one target element which is capable of being the target of the given animation element. If the URL points to multiple target elements, if the given target element is not capable of being a target of the given animation element, or if the given target element is not part of the current document, then the animation element will not affect any target element. However, the animation element will still operate normally with regard to its timing properties. Specifically, TimeEvents are dispatched and the animation element can be used as syncbase in an identical fashion to when the URL refers to a valid target element.

If the `href` attribute or the deprecated `xlink:href` attribute is not provided, then the target element will be the immediate parent element of the current animation element. If both `xlink:href` and `href` are specified, the value of the latter attribute is used.

Refer to the descriptions of the individual animation elements for any restrictions on what types of elements can be targets of particular types of animations.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: Specifying the animation target.

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

### feImage

For `<feImage>`, `href` defines a URL referring to an image resource or to an element. If both, the `xlink:href` and the `href` attribute are specified, the latter overrides the former.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |

### image

For `<image>`, `href` defines a URL referring to the image to render.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <image href="fxlogo.png" x="0" y="0" height="100" width="100" />
</svg>
```

### linearGradient

For `<linearGradient>`, `href` defines URL referring to a template gradient element; to be valid, the reference must be to a different `<linearGradient>` or `<radialGradient>` element.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |

### mpath

For `<mpath>`, `href` defines a URL referring to the `<path>` element or basic shape which defines the motion path.

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

### pattern

For `<pattern>`, `href` defines a URL referring to a different `<pattern>` element within the current SVG document. Any attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no children, and the referenced element does (possibly due to its own `href` attribute), then this element inherits the children from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attributes or children due to its own `href` attribute, then the current element can inherit those attributes or children. On the `<pattern>` element, the `href` attribute is animatable.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |

### radialGradient

For `<radialGradient>`, `href` defines URL referring to a template gradient element; to be valid, the reference must be to a different `<linearGradient>` or `<radialGradient>` element.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |

### script

For `<script>`, `href` defines a URL referring to an external resource containing the script code.

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

### textPath

For `<textPath>`, `href` defines a URL referring to the `<path>` element or basic shape onto which the text will be rendered if no `path` attribute is provided. On the `<textPath>` element, the `href` attribute is animatable.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |

### use

For `<use>`, `href` defines a URL referring to an element or fragment within an SVG document to be cloned.

The `<use>` element can reference an entire SVG document by specifying an `href` value without a fragment. Such references are taken to be referring to the root element of the referenced document.

|  |  |
| --- | --- |
| Value | `<url>` |
| Default value | *None* |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feimage-href |
| SVG Animations Level 2 # DiscardElementHrefAttribute |
| SVG Animations Level 2 # HrefAttribute |
| SVG Animations Level 2 # MPathElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # ImageElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # AElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # PatternElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # ScriptElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # UseElementHrefAttribute |
| Scalable Vector Graphics (SVG) 2 # TextPathElementHrefAttribute |

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

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

See also
--------

* `xlink:href`


amplitude - SVG: Scalable Vector Graphics

amplitude
=========

The **`amplitude`** attribute controls the amplitude of the gamma function of a component transfer element when its `type` attribute is `gamma`.

You can use this attribute with the following SVG elements:

* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
Usage notes
-----------

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

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

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

See also
--------

* `<feComponentTransfer>`


string - SVG: Scalable Vector Graphics

string
======

**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 **`string`** attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent `<font-face-uri>` element supports.

You can use this attribute with the following SVG elements:

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

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

`<anything>`

This value specifies a list of formats that are supported by the font referenced by the parent `<font-face-uri>` element.

The available types are: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, and `"svg"`. See the `src` descriptor of the `@font-face` at-rule for more information.

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

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

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

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


specularConstant - SVG: Scalable Vector Graphics

specularConstant
================

The **`specularConstant`** attribute controls the ratio of reflection of the specular lighting. It represents the ks value in the Phong lighting model. The bigger the value the stronger the reflection.

You can use this attribute with the following SVG elements:

* `<feSpecularLighting>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="specularLighting1" x="0" y="0" width="100%" height="100%">
    <feSpecularLighting in="SourceGraphic" specularConstant="1.2">
      <fePointLight x="60" y="60" z="20" />
    </feSpecularLighting>
  </filter>
  <filter id="specularLighting2" x="0" y="0" width="100%" height="100%">
    <feSpecularLighting in="SourceGraphic" specularConstant="0.8">
      <fePointLight x="60" y="60" z="20" />
    </feSpecularLighting>
  </filter>

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

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

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fespecularlighting-specularconstant |

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

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

See also
--------

* Description of Phong reflection model on Wikipedia


patternContentUnits - SVG: Scalable Vector Graphics

patternContentUnits
===================

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

**Note:** That this attribute has no effect if attribute `viewBox` is specified on the `<pattern>` element.

You can use this attribute with the following SVG elements:

* `<pattern>`
Example
-------
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!--
 A pattern tile that content coordinates and values are
 computed against the current coordinate user space.
 Note that the size of the tile is computed against
 the bounding box of the target element
 -->
  <pattern
 id="p1"
 width="20%"
 height="20%"
 patternContentUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!--
 A pattern tile that content coordinates and values are
 computed against the bounding box of the target element.
 Note that the size of the tile is also computed against
 the bounding box of the target element
 -->
  <pattern
 id="p2"
 width="20%"
 height="20%"
 patternContentUnits="objectBoundingBox">
    <circle cx=".1" cy=".1" r=".1" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>
```

pattern
-------

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

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

`userSpaceOnUse`

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

`objectBoundingBox`

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

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

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

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

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


origin - SVG: Scalable Vector Graphics

origin
======

The **`origin`** attribute specifies the origin of motion for an animation. It has no effect in SVG.

You can use this attribute with the following SVG elements:

* `<animateMotion>`
Context notes
-------------

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

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

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

See also
--------

* Definition of `origin` in SMIL Animation specification