recursal/MDN huggingface dataset:
refY
====

The **`refY`** attribute defines the y coordinate of an element's reference point.

You can use this attribute with the following SVG elements:

* `<marker>`
* `<symbol>`
marker
------

For `<marker>`, `refY` defines the y coordinate of the marker's reference point, which is to be placed exactly at the marker's position on the shape.

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
 `<number>` | `top` | `center` |
 `bottom` |
| Default value | `0` |
| Animatable | Yes |

`<length-percentage>`

Lengths are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

Percentage values are interpreted as being a percentage of the `viewBox` height.

`<number>`

Numbers are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

`top`

The reference point of the marker is placed at the top edge of the shape.

`center`

The reference point of the marker is placed at the vertical center of the shape.

`bottom`

The reference point of the marker is placed at the bottom edge of the shape.

symbol
------

For `<symbol>`, `refY` defines the y coordinate of the symbol, which is defined by the cumulative effect of the `y` attribute and any transformations on the `<symbol>` and its host `<use>` element.

Unlike other positioning attributes, `refY` is interpreted as being in the coordinate system of the symbol contents, after application of the `viewBox` and `preserveAspectRatio` attributes. If the attribute is not specified, no vertical adjustment is made, and the top side of the symbol's rectangular viewport region (regardless of the `viewBox` coordinate) is positioned at the y coordinate.

**Note:** For backwards compatibility, the behavior when `refY` is not specified on a `<symbol>` element is different from when it is specified with a value of `0`, and therefore different from the behavior when an equivalent attribute is not specified on a `<marker>` element.


|  |  |
| --- | --- |
| Value | `<length>` | `top` | `center` |
 `bottom` |
| Default value | None |
| Animatable | Yes |

`<length-percentage>`

Lengths are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

Percentage values are interpreted as being a percentage of the `viewBox` height.

`<number>`

Numbers are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

`top`

The reference point of the marker is placed at the top edge of the shape.

`center`

The reference point of the marker is placed at the vertical center of the shape.

`bottom`

The reference point of the marker is placed at the bottom edge of the shape.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # MarkerElementRefYAttribute |
| Scalable Vector Graphics (SVG) 2 # SymbolElementRefYAttribute |

See also
--------

* `refX`
markerHeight
============

The **`markerHeight`** attribute represents the height 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 height of the marker.
 Relative values refer to the height specified via the `viewBox` and `preserveAspectRatio` attributes.


`<number>`

This value defines the height 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 # MarkerHeightAttribute |

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

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

See also
--------

* `<marker>`
* `markerWidth`
* `markerUnits`
* `viewBox`
* `preserveAspectRatio`
v-alphabetic
============

**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-alphabetic`** attribute defines indicates the alignment coordinate for glyphs to achieve alphabetic baseline alignment. 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 |

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

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

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

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

See also
--------

* `alphabetic`
r
=

The **`r`** attribute defines the radius of a circle.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>
```

circle
------

For `<circle>`, `r` defines the radius of the circle and therefor its size. With a value lower or equal to zero the circle won't be drawn at all.

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

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

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

For `<radialGradient>`, `r` defines the radius of the end circle for the radial gradient.

The gradient will be drawn such that the **100%** gradient stop is mapped to the perimeter of this end circle. A value of lower or equal to zero will cause the area to be painted as a single color using the color and opacity of the last gradient `<stop>`.

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # R |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |
color-profile
=============

**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 **`color-profile`** attribute is used to define which color profile a raster image included through the `<image>` element should use.

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

You can use this attribute with the following SVG elements:

* `<image>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `auto` | `sRGB` | `<name>` |
 `<iri>` |
| Default value | `auto` |
| Animatable | Yes |

`auto`

All colors are presumed to be defined in the sRGB color space unless a more precise embedded profile is specified within content data. For images that do have a profile built into their data, that profile is used. For images that do not have a profile, the sRGB profile is used.

`sRGB`

The source profile is assumed to be sRGB. This differs from auto in that it overrides an embedded profile inside an image.

`<name>`

A name corresponding to a defined color profile that is in the browser's color profile description database. The browser searches the color profile description database for a color profile description entry whose name descriptor matches `<name>` and uses the last matching entry that is found. If a match is found, the corresponding profile overrides an embedded profile inside an image. If no match is found, then the embedded profile inside the image is used.

`<iri>`

An IRI reference to the source color profile. The referenced color profile overrides an embedded profile inside the image.

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

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

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

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

The **`dur`** attribute indicates the simple duration of an animation.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Example
-------
```

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



```html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="indefinite" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="3s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<clock-value>`
 | `media` | `indefinite` |
| Default value | `indefinite` |
| Animatable | No |

`<clock-value>`

This value specifies the length of the simple duration. The value must be greater than 0 and can be expressed with hours (`h`), minutes (`m`), seconds (`s`) or milliseconds (`ms`). It's possible to combine those time representations to create some complex durations like `hh:mm:ss.iii` or `mm:ss.iii`.

`media`

 This value specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media.
 (For animation elements the attribute will be ignored if `media` is specified.)


`indefinite`

This value specifies the simple duration as indefinite.


**Note:** the interpolation will not work if the simple duration is indefinite (although this may still be useful for `<set>` elements).

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

| Specification |
| --- |
| SVG Animations Level 2 # DurAttribute |

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

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

**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 **`hanging`** attribute indicates the alignment coordinate for glyphs to achieve hanging 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) # FontFaceElementHangingAttribute |

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

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

« SVG Attribute reference home

The `clip-rule` attribute only applies to graphics elements that are contained within a `<clipPath>` element. The `clip-rule` attribute basically works as the `fill-rule` attribute, except that it applies to `<clipPath>` definitions.

The following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because `clip-rule` is specified on the `<path>` element that defines the clipping shape:


```html
<g>
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>
```


whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the `clip-rule` is specified on the referencing element, not on the object defining the clipping shape:


```html
<g>
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
```


As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

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

|  |  |
| --- | --- |
| Value | nonzero | evenodd | inherit |
| Default value | nonzero |
| Animatable | Yes |

nonzero

See description of `fill-rule` property.

evenodd

See description of `fill-rule` property.

Example
-------


```html
<svg
 width="100"
 viewBox="0 0 100 90"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <!-- Define star path -->
  <defs>
    <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
  </defs>

  <!-- Left: evenodd -->
  <clipPath id="emptyStar">
    <use href="#star" clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />

  <!-- Right: nonzero -->
  <clipPath id="filledStar">
    <use href="#star" clip-rule="nonzero" />
  </clipPath>
  <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
</svg>
```

Elements
--------

The following elements can use the `clip-rule` attribute, but only if they are inside a `<clipPath>` element.

* Graphical elements »
Browser compatibility
---------------------

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

See also
--------

* `<clipPath>`
SVG Core Attributes
===================

The SVG core attributes are all the common attributes that can be specified on any SVG element.

* `id`
* `lang`
* `tabindex`
* `xml:base`
* `xml:lang`
* `xml:space`
Attributes
----------

`id`

 Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
 *Value*: Any valid ID string; *Animatable*: **No**

`lang`

Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).

**Note:** SVG 2 introduced the new `lang` attributes. If both `lang` and `xml:lang` attribute are used, `xml:lang` has priority over `lang`.

*Value*: Any valid language ID; *Animatable*: **No**

`tabindex`

 The tabindex SVG 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.
 *Value type*: <integer>; *Animatable*: **No**

`xml:base`

 Specifies a base IRI other than the base IRI of the document.
 *Value type*: <IRI>; *Animatable*: **No**

`xml:lang`

It is a universal attribute allowed in all XML dialects to mark up the natural human language that an element contains. It's almost identical in usage to HTML's lang, but in conforming XML 1.0 documents, it does not allow the use of a null attribute value (`xml:lang=""`) to indicate an unknown language. Instead, use `xml:lang="und"`.

**Note:** SVG 2 introduced the new `lang` attributes. If both `lang` and `xml:lang` attribute are used, `xml:lang` has priority over `lang`.

*Value*: Any valid language ID; *Animatable*: **No**

`xml:space` 
Deprecated

SVG supports the standard XML attribute `xml:space` to specify the handling of white space characters within a given `<text>` element's character data.

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

*Value*: **`default`** | `preserve`; *Animatable*: **No**

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

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

The **`writing-mode`** attribute specifies whether the initial inline-progression-direction for a `<text>` element shall be left-to-right, right-to-left, or top-to-bottom. The `writing-mode` attribute applies only to `<text>` elements; the attribute is ignored for `<tspan>`, `<tref>`, and `<textPath>` sub-elements. (Note that the inline-progression-direction can change within a `<text>` element due to the Unicode bidirectional algorithm and properties `direction` and `unicode-bidi`.)

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

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Usage notes
-----------

|  |  |
| --- | --- |
| Default value | `horizontal-tb` |
| Value | `horizontal-tb` | `vertical-rl` |
 `vertical-lr` |
| Animatable | Yes |

`horizontal-tb`

This value defines a top-to-bottom block flow direction. Both the writing mode and the typographic mode are horizontal.

`vertical-rl`

This value defines a right-to-left block flow direction. Both the writing mode and the typographic mode are vertical.

`vertical-lr`

This value defines a left-to-right block flow direction. Both the writing mode and the typographic mode are vertical.

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |
| Scalable Vector Graphics (SVG) 2 # WritingModeProperty |

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

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

See also
--------

* `CSS writing-mode`
word-spacing
============

The **`word-spacing`** attribute specifies spacing behavior between words.

If a `<length>` is provided without a unit identifier (e.g. an unqualified number such as 128), the browser processes the <length> as a width value in the current user coordinate system.

If a <length> is provided with one of the unit identifiers (e.g. .25em or 1%), then the browser converts the <length> into a corresponding value in the current user coordinate system.

**Note:** As a presentation attribute, `word-spacing` can be used as a CSS property. See the `CSS word-spacing` 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" word-spacing="2">Bigger spacing between words</text>
  <text x="0" y="40" word-spacing="-0.5">Smaller spacing between words</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `normal` | `<length>` |
| Animatable | Yes |
| Default values | `normal` |

For a description of the values, please refer to the CSS `letter-spacing` property.

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

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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

See also
--------

* `CSS word-spacing`
patternUnits
============

The **`patternUnits`** attribute indicates which coordinate system to use for the geometry properties of the `<pattern>` element.

You can use this attribute with the following SVG elements:

* `<pattern>`
Example
-------
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- All geometry properties are relative to the current user space -->
  <pattern
 id="p1"
 x="12.5"
 y="12.5"
 width="25"
 height="25"
 patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- All geometry properties are relative to the target bounding box -->
  <pattern
 id="p2"
 x=".125"
 y=".125"
 width=".25"
 height=".25"
 patternUnits="objectBoundingBox">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>
```

pattern
-------

For `<pattern>`, `patternUnits` defines the coordinate system in use for the geometry properties (`x`, `y`, `width` and `height`) of the element.

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

`userSpaceOnUse`

This value indicates that all coordinates for the geometry properties refer to the user coordinate system as defined when the pattern was applied.

`objectBoundingBox`

This value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the pattern is applied. A bounding box could be considered the same as if the content of the `<pattern>` were bound to a "`0 0 1 1`" `viewBox`.

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

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

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

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