recursal/MDN huggingface dataset:
systemLanguage
==============

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

You can use this attribute with the following SVG elements:

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

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

`<language-tags>`

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

circle
------

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

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

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

ellipse
-------

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

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

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

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

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

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

### Example
```

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



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

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

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

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

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

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

See also
--------

* `cx`
* `r`
type
====

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

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

You can use this attribute with the following SVG elements:

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

### For the <animateTransform> elements

SVG element: `<animateTransform>`

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

### For the <feColorMatrix> element

SVG element: `<feColorMatrix>`

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

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

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

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

### For the <feTurbulence> element

SVG element: `<feTurbulence>`

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

line
----

For `<line>`, `y2` defines the y coordinate of the ending point of the line.

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

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



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

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

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

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

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



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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

`none`

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

`<marker-ref>`

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

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

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

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

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

See also
--------

* `<marker>`
* `marker-end`
* `marker-mid`
text-rendering
==============

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

`auto`

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

`optimizeSpeed`

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

`optimizeLegibility`

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

`geometricPrecision`

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

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

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

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

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

See also
--------

* `CSS text-rendering`
zoomAndPan
==========

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

The **`zoomAndPan`** attribute specifies whether the SVG document can be magnified and panned.

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

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



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

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

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

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

`left`

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

`right`

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

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

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

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

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

The `values` attribute has different meanings, depending upon the context where it's used, either it defines a sequence of values used over the course of an animation, or it's a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<feColorMatrix>`
animate, animateMotion, animateTransform
----------------------------------------

For `<animate>`, `<animateMotion>`, and `<animateTransform>`, `values` is a list of values defining the sequence of values over the course of the animation. If this attribute is specified, any `from`, `to`, and `by` attribute values set on the element are ignored.

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

`<list-of-values>`

The value holds a semicolon-separated list of one or more values. The type of the values is defined by the `href` and `attributeName` attributes.

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

For the `<feColorMatrix>` element, `values` is a list of numbers interpreted differently depending on the value of the `type` attribute.

|  |  |
| --- | --- |
| Value | `<list-of-numbers>` |
| Default value | *If `type="matrix"`, identity matrix,if
`type="saturate"`, `1`, resulting in identity
matrix,if `type="hueRotate"`, `0`,
resulting in identity matrix* |
| Animatable | Yes |

`<list-of-numbers>`

The value is a list of numbers, which is interpreted differently depending on the value of the `type` attribute:

* For `type="matrix"`, `values` is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 … a34), separated by whitespace and/or a comma.
* For `type="saturate"`, `values` is a single real number value (0 to 1).
* For `type="hueRotate"`, `values` is a single one real number value (degrees).
* For `type="luminanceToAlpha"`, `values` is not applicable.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecolormatrix-values |
| SVG Animations Level 2 # ValuesAttribute |
ascent
======

**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 **`ascent`** attribute defines the maximum unaccented height of the font within the font coordinate system.

If the attribute is not specified, the effect is as if the attribute were set to the difference between the `units-per-em` value and the `vert-origin-y` value for the corresponding font.

You can use this attribute with the following SVG elements:

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

For `<font-face>`, `ascent` defines the maximum unaccented height of the font within the font coordinate system.

|  |  |
| --- | --- |
| Value | <number> |
| Default value | 
 Difference between `units-per-em` and
 `vert-origin-y` |
| Animatable | No |

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

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

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

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