recursal/MDN huggingface dataset:
font-size-adjust
================

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

`none`

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

`<number>`

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

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

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

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

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

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

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

See also
--------

* `CSS font-size-adjust`
pointsAtZ
=========

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

See also
--------

* `CSS text-decoration`
color-interpolation
===================

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

`auto`

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

`sRGB`

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

`linearRGB`

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

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

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

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

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

See also
--------

* sRGB specification
* `color-interpolation-filters`
* Computer color is broken - popular demonstration of linearRGB
horiz-origin-y
==============

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

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

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

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

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

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

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

See also
--------

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

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

You can use this attribute with the following SVG elements:

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

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



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

line
----

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

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

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



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

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

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

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

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



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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value indicates the alignment coordinate for the glyphs.

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

mask
----

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

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

`userSpaceOnUse`

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

`objectBoundingBox`

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

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

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

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

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

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

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

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

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

You can use this attribute with any SVG element.

Example
-------


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

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

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

`<language-tag>`

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

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

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

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

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

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

See also
--------

* RFC 5646: Tags for Identifying Languages (also known as BCP 47)
v-ideographic
=============

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value indicates the alignment coordinate for the glyphs.

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

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

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

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

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

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

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

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

You can use this attribute with any SVG element.

Example
-------
```

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



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

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

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

`default`

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

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

`preserve`

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

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

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

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

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

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