recursal/MDN huggingface dataset:
scale
=====

The **`scale`** attribute defines the displacement scale factor to be used on a `<feDisplacementMap>` filter primitive. The amount is expressed in the coordinate system established by the `primitiveUnits` attribute on the `<filter>` element.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 480 220" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence
 type="turbulence"
 baseFrequency="0.05"
 numOctaves="2"
 result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" />
  </filter>
  <filter id="displacementFilter2" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence
 type="turbulence"
 baseFrequency="0.05"
 numOctaves="2"
 result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" />
  </filter>

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

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

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

`<number>`

This value defines the scale factor for the displacement.

When the value of this attribute is `0`, this operation has no effect on the source image.

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

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

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

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

The **`bias`** attribute shifts the range of the filter. After applying the `kernelMatrix` of the `<feConvolveMatrix>` element to the input image to yield a number and applied the `divisor` attribute, the `bias` attribute is added to each component. This allows representation of values that would otherwise be clamped to 0 or 1.

You can use this attribute with the following SVG elements:

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

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

One application of bias is when it is desirable to have 0.5 gray value be the zero response of the filter.

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
clip-path
=========

The **`clip-path`** presentation attribute defines or associates a clipping path with the element it is related to.

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

You can use this attribute with the following SVG elements:

* `<a>`
* `<circle>`
* `<clipPath>`
* `<ellipse>`
* `<g>`
* `<glyph>`
* `<image>`
* `<line>`
* `<marker>`
* `<mask>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<svg>`
* `<symbol>`
* `<text>`
* `<use>`
Example
-------
```

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



```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>

  <!-- Top-left: Apply a custom defined clipping path -->
  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 stroke="green"
 clip-path="url(#myClip)" />

  <!-- Top-right: Apply a CSS basic shape on a fill-box
 geometry. This is the same as having a custom clipping
 path with a clipPathUnits set to objectBoundingBox -->
  <rect
 x="11"
 y="1"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() fill-box" />

  <!-- Bottom-left -->
  <rect
 x="1"
 y="11"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() stroke-box" />

  <!-- Bottom-right: Apply a CSS basic shape on a view-box
 geometry. This is the same as having a custom clipping
 path with a clipPathUnits set to userSpaceOnUse -->
  <rect
 x="11"
 y="11"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() view-box" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `url()` | [ `<basic-shape>` ||
 `<geometry-box>` ] | `none` |
| Default value | `none` |
| Animatable | Yes |

<geometry-box>

An extra information to tell how a `<basic-shape>` is applied to an element: `fill-box` indicates to use the object bounding box; `stroke-box` indicates to use the object bounding box extended with the stroke; `view-box` indicates to use the nearest SVG viewport as the reference box.


**Note:** For more details on the clip-path syntax, see the CSS property `clip-path` reference page.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |

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

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

See also
--------

* The CSS `clip-path` property
version
=======

**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 **`version`** attribute is used to indicate what specification a SVG document conforms to. It is only allowed on the root `<svg>` element. It is purely advisory and has no influence on rendering or processing.

While it is specified to accept any number, the only two valid choices are currently `1.0` and `1.1`.

You can use this attribute with the following SVG elements:

* `<svg>`


```html
<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" />
</svg>
```

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

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

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

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

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

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

The **`to`** attribute indicates the final value of the attribute that will be modified during the animation.

The value of the attribute will change between the `from` attribute value and this value.

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 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="width"
 fill="freeze"
 from="100"
 to="150"
 dur="3s" />
  </rect>
</svg>
```

animate, animateMotion, animateTransform
----------------------------------------

For `<animate>`, `<animateMotion>`, and `<animateTransform>`, `to` specifies the ending value of the animation.

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

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

If a list of values is defined via the `values` attribute, the `to` attribute is ignored.

set
---

For the `<set>` element, `to` specifies the value for the attribute during the duration of the element.

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

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

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

| Specification |
| --- |
| SVG Animations Level 2 # SetElementToAttribute |
| SVG Animations Level 2 # ToAttribute |
horiz-adv-x
===========

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

The **`horiz-adv-x`** attribute indicates the horizontal advance after rendering a glyph in horizontal orientation.

You can use this attribute with the following SVG elements:

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

For `<font>` elements, `horiz-adv-x` specifies the default horizontal advance of a glyph in horizontal orientation.

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

`<number>`

This value indicates the horizontal advance of the glyph.

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

For `<glyph>` and `<missing-glyph>` elements, `horiz-adv-x` specifies the horizontal advance of the glyph in horizontal orientation.

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

`<number>`

This value indicates the horizontal advance of the glyph.

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

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

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

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

See also
--------

* `vert-adv-y`
unicode-range
=============

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

The **`unicode-range`** attribute defines the range of ISO 10646 characters possibly covered by the glyphs in a font.

You can use this attribute with the following SVG elements:

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

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

`<urange>#`

This value is a comma-separated list of ISO 10646 characters possibly covered by the glyphs in the font.

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

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

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

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

See also
--------

* ISO 10646 - Universal Coded Character Set (UCS)
stdDeviation
============

The **`stdDeviation`** attribute defines the standard deviation for the blur operation.

You can use this attribute with the following SVG elements:

* `<feGaussianBlur>`
Example
-------
```

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



```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="gaussianBlur1">
    <feGaussianBlur stdDeviation="1" />
  </filter>
  <filter id="gaussianBlur2">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <filter id="gaussianBlur3" x="-30%" y="-30%" width="160%" height="160%">
    <feGaussianBlur stdDeviation="10" />
  </filter>

  <circle cx="100" cy="100" r="50" style="filter: url(#gaussianBlur1);" />
  <circle
 cx="100"
 cy="100"
 r="50"
 style="filter: url(#gaussianBlur2); transform: translateX(140px);" />
  <circle
 cx="100"
 cy="100"
 r="50"
 style="filter: url(#gaussianBlur3); transform: translateX(280px);" />
</svg>
```

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

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

`<number-optional-number>`

If two numbers are provided, the first number represents a standard deviation value along the x-axis. The second value represents a standard deviation along the y-axis. If one number is provided, then that value is used for both X and Y.

A negative value is forbidden. A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image). If `stdDeviation` is 0 in only one of X or Y, then the effect is that the blur is only applied in the direction that has a non-zero value.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fegaussianblur-stddeviation |

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

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

The **`spacing`** attribute indicates how the user agent should determine the spacing between typographic characters that are to be rendered along a path.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `auto` | `exact` |
| Default value | `exact` |
| Animatable | Yes |

`auto`

This value indicates that the user agent should use text-on-a-path layout algorithms to adjust the spacing between typographic characters in order to achieve visually appealing results.

`exact`

This value indicates that the typographic characters should be rendered exactly according to the spacing rules as specified by the layout rules for text-on-a-path.

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



```html
<svg 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 | `<filter-primitive-reference>` |
| Default value | *None* |
| Animatable | Yes |

`<filter-primitive-reference>`

This value is a `<custom-ident>` and defines the name for the filter primitive. It is only meaningful within a given `<filter>` element and thus has only local scope. It is legal for the same `<filter-primitive-reference>` to appear multiple times within the same `<filter>` element. When referenced, this value will use the closest preceding filter primitive with the given result.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-result |
limitingConeAngle
=================

The **`limitingConeAngle`** attribute represents the angle in degrees between the spot light axis (i.e. the axis between the light source and the point to which it is pointing at) and the spot light cone. So it defines a limiting cone which restricts the region where the light is projected. No light is projected outside the cone.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="spotLight1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting diffuseConstant="2">
      <feSpotLight
 x="10"
 y="10"
 z="50"
 pointsAtX="100"
 pointsAtY="100"
 limitingConeAngle="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="spotLight2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting diffuseConstant="2">
      <feSpotLight
 x="10"
 y="10"
 z="50"
 pointsAtX="100"
 pointsAtY="100"
 limitingConeAngle="40" />
    </feDiffuseLighting>
  </filter>

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

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

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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVG Event Attributes
====================

Event attributes always have their name starting with "on" followed by the name of the event for which they are intended. They specifies some script to run when the event of the given type is dispatched to the element on which the attributes are specified.

For every event type that the browser supports, SVG supports that as an event attribute, following the same requirements as for HTML event attributes.

The global event attributes are available on *all SVG elements*. Other event attributes are available on a case by case basis for each elements.

All event attribute are *not animatable*.

Attributes
----------

### Animation Event Attributes

**`onbegin`**, **`onend`**, **`onrepeat`**

### Document Event Attributes

**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**

### Document Element Event Attributes

**`oncopy`**, **`oncut`**, **`onpaste`**

### Global Event Attributes

**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**

### Graphical Event Attributes

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

`<list of numbers>`

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

`<alpha-value>`

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

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

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

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

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

See also
--------

* `CSS opacity`