recursal/MDN huggingface dataset:
xml:lang
========

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

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

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

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

You can use this attribute with any SVG element.

Example
-------


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

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

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

`<language-tag>`

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

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

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

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

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

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

See also
--------

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

`auto`

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

`<length>`

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

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

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

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

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

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

See also
--------

* `CSS font-kerning`
elevation
=========

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

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

The pixel composition is computed using the following formula:


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


You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

`<length-percentage>`

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


`<number>`

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

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

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

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

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

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

See also
--------

* `<marker>`
* `markerHeight`
* `markerUnits`
* `viewBox`
* `preserveAspectRatio`
flood-opacity
=============

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

`<alpha-value>`

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


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

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

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

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

See also
--------

* `flood-color`
g1
==

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

The **`g1`** attribute specifies a list of glyph names which identify a set of possible first glyphs in the kerning pair.

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

You can use this attribute with the following SVG elements:

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

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

`<name>#`

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

`new`

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

`replace`

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

`embed`

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

`other`

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

`none`

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

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

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

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

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

See also
--------

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

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

The **`orientation`** attribute indicates that the given glyph is only to be used for a particular text direction, i.e. horizontal or vertical.

You can use this attribute with the following SVG elements:

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

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

`h`

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

`v`

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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

See also
--------

* `CSS direction`
k4
==

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

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

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


You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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

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

Allowed values:

`sync`

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

`async`

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

`auto`

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

Example
-------


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

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

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

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

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

See also
--------

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