recursal/MDN huggingface dataset:
lighting-color
==============

The **`lighting-color`** attribute defines the color of the light source for lighting filter primitives.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="diffuseLighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" lighting-color="white">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" lighting-color="blue">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>

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

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

|  |  |
| --- | --- |
| Value | `color` |
| Default value | `white` |
| Animatable | Yes |

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

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

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

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

See also
--------

* Description of Phong reflection model on Wikipedia
yChannelSelector
================

The **`yChannelSelector`** attribute indicates which color channel from `in2` to use to displace the pixels in `in` along the y-axis.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 440 160" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 yChannelSelector="R" />
  </filter>
  <filter id="displacementFilter2">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 yChannelSelector="B" />
  </filter>

  <text x="10" y="60" font-size="50" filter="url(#displacementFilter)">
    Some displaced text
  </text>
  <text x="10" y="120" font-size="50" filter="url(#displacementFilter2)">
    Some displaced text
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `R` | `G` | `B` | `A` |
| Default value | `A` |
| Animatable | Yes |

`R`

This keyword specifies that the red color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

`G`

This keyword specifies that the green color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

`B`

This keyword specifies that the blue color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

`A`

This keyword specifies that the alpha channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

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

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

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

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

The **`tabindex`** attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.

You can use this attribute with any SVG element.

Example
-------
```

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



```html
<?xml version="1.0"?>
<svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="15" tabindex="0" />
  <circle cx="60" cy="160" r="30" tabindex="0" />
  <circle cx="160" cy="60" r="30" tabindex="0" />
  <circle cx="160" cy="160" r="60" tabindex="0" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | valid integer |
| Default value | *None* |
| Animatable | No |

valid integer

Relative order of the element for the purposes of sequential focus navigation.

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

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

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

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

See also
--------

* HTML `tabindex`
g2
==

**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 **`g2`** attribute specifies a list of glyph names which identify a set of possible second glyphs in the kerning pair.

All glyphs with the given glyph name are included in the set. 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 | `<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 second glyphs in the kerning pair.

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

ellipse
-------

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

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

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

rect
----

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

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

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

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
      <circle cx="4" cy="4" r="4" stroke="none" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-mid="url(#circle)" />
</svg>
```

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

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

`none`

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

`<marker-ref>`

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

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

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

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

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

See also
--------

* `<marker>`
* `marker-start`
* `marker-end`
class
=====

« SVG Attribute reference home

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

An element's class name serves two key roles:

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

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

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

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

Example
-------


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

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

Elements
--------

The following elements can use the `class` attribute:

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

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

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

You can use this attribute with the following SVG elements:

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

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

`<integer>`

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

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

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

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

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

See also
--------

* `targetX`
filterUnits
===========

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

You can use this attribute with the following SVG elements:

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

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

`userSpaceOnUse`

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

`objectBoundingBox`

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

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

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

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

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

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

The **`panose-1`** attribute indicates the Panose-1 number of a font face.

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

You can use this attribute with the following SVG elements:

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

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

`<integer>{10}`

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

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

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

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

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

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

See also
--------

* `CSS font-weight`
path
====

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

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

`<path-data>`

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

textPath
--------

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

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

`<path-data>`

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextPathElementPathAttribute |
| SVG Animations Level 2 # AnimateMotionElementPathAttribute |
SVG Conditional Processing Attributes
=====================================

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

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

`requiredExtensions`

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

`requiredFeatures` 
Deprecated

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

`systemLanguage`

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

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

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

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

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

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

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

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

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

See also
--------

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

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

You can use this attribute with the following SVG elements:

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

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



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

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

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

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

`<transform-list>`

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

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

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

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

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

See also
--------

* `<transform-function>`