recursal/MDN huggingface dataset:
<tref>
======

**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 textual content for a `<text>` SVG element can be either character data directly embedded within the `<text>` element or the character data content of a referenced element, where the referencing is specified with a **`<tref>`** element.

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

|  |  |
| --- | --- |
| Categories | Text content element, Text content child element |
| Permitted content | Any number of the following elements, in any order:Descriptive elements`<animate>`, `<set>` |

Attributes
----------

### Global attributes

* Conditional processing attributes
* Core attributes
* Graphical event attributes
* Presentation attributes
* Xlink attributes
* `class`
* `style`
### Specific attributes

* `xlink:href` 
Deprecated
DOM Interface
-------------

This element implements the `SVGTRefElement` interface.

Example
-------


```xml
<svg width="100%" height="100%" viewBox="0 0 1000 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <text id="ReferencedText">
      Referenced character data
    </text>
  </defs>

  <text x="100" y="100" font-size="45" >
    Inline character data
  </text>

  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="#ReferencedText"/>
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
 fill="none" stroke-width="2" />
</svg>
```

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

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

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

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

See also
--------

* `<text>`
<font-face-name>
================

**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 **`<font-face-name>`** element points to a locally installed copy of this font, identified by its name.

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

|  |  |
| --- | --- |
| Categories | None |
| Permitted content | Empty |

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

* `name` 
Deprecated
DOM Interface
-------------

This element implements the `SVGFontFaceNameElement` interface.

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

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

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

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

See also
--------

* `<font-face-src>`
* SVG tutorial: SVG fonts
<feMerge>
=========

The **`<feMerge>`** SVG element allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the `result` attribute and then accessing it in a `<feMergeNode>` child.

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

|  |  |
| --- | --- |
| Categories | Filter primitive element |
| Permitted content | Any number of the following elements, in any order:`<feMergeNode>` |

Example
-------

### SVG


```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="feOffset" x="-40" y="-20" width="100" height="200">
    <feOffset in="SourceGraphic" dx="60" dy="60" />
    <feGaussianBlur stdDeviation="5" result="blur2" />
    <feMerge>
      <feMergeNode in="blur2" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <rect
 x="40"
 y="40"
 width="100"
 height="100"
 style="stroke: #000000; fill: green; filter: url(#feOffset);" />
</svg>
```

### Result

Attributes
----------

### Global attributes

* Core attributes
* Presentation attributes
* Filter primitive attributes
* `class`
* `style`
### Specific attributes

None.

DOM Interface
-------------

This element implements the `SVGFEMergeElement` interface.

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

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

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

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

See also
--------

* `<filter>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects
<feMergeNode>
=============

The `feMergeNode` takes the result of another filter to be processed by its parent `<feMerge>`.

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

|  |  |
| --- | --- |
| Categories | None |
| Permitted content | Any number of the following elements, in any order:`<animate>`, `<set>` |

Example
-------


```html
<svg
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="feOffset" x="-40" y="-20" width="100" height="200">
    <feOffset in="SourceGraphic" dx="60" dy="60" />
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" />
    <feMerge>
      <feMergeNode in="blur2" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <rect
 x="40"
 y="40"
 width="100"
 height="100"
 style="stroke: #000000; fill: green; filter: url(#feOffset);" />
  <rect
 x="40"
 y="40"
 width="100"
 height="100"
 style="stroke: #000000; fill: green;" />
</svg>
```

### Result

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

* `in`
DOM Interface
-------------

This element implements the `SVGFEMergeNodeElement` interface.

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

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

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

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

See also
--------

* `<filter>`
* `<animate>`
* `<set>`
* `<feMerge>`
* SVG tutorial: Filter effects
<title> — the SVG accessible name element
=========================================

The **`<title>`** element provides an accessible, short-text description of any SVG container element or graphics element.

Text in a `<title>` element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an `aria-labelledby` attribute rather than using the `<title>` element.

**Note:** For backward compatibility with SVG 1.1, `<title>` elements should be the first child element of their parent.

Example
-------
```

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



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <title>I'm a circle</title>
  </circle>

  <rect x="11" y="1" width="8" height="8">
    <title>I'm a square</title>
  </rect>
</svg>
```

Attributes
----------

This element only includes global attributes

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

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

|  |  |
| --- | --- |
| Categories | Descriptive element |
| Permitted content | Any elements or character data |

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

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

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

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

See also
--------

* `<desc>`
<glyph>
=======

**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.

A **`<glyph>`** defines a single glyph in an SVG font.

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

|  |  |
| --- | --- |
| Categories | Text content element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elementsShape elementsStructural elementsGradient elements`<a>`, `<clipPath>`, `<color-profile>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>` |

Attributes
----------

### Global attributes

* Core attributes
* Presentation attributes
* `class`
* `style`
### Specific attributes

* `d` 
Deprecated
* `horiz-adv-x` 
Deprecated
* `vert-origin-x` 
Deprecated
* `vert-origin-y` 
Deprecated
* `vert-adv-y` 
Deprecated
* `unicode` 
Deprecated
* `glyph-name` 
Deprecated
* `orientation` 
Deprecated
* `arabic-form` 
Deprecated
* `lang` 
Deprecated
DOM Interface
-------------

This element implements the `SVGGlyphElement` interface.

Example
-------

### SVG


```html
<svg
 width="400px"
 height="300px"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <!-- Example copied from https://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
  <defs>
    <font id="Font1" horiz-adv-x="1000">
      <font-face
 font-family="Super Sans"
 font-weight="bold"
 font-style="normal"
 units-per-em="1000"
 cap-height="600"
 x-height="400"
 ascent="700"
 descent="300"
 alphabetic="0"
 mathematical="350"
 ideographic="400"
 hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Bold" />
        </font-face-src>
      </font-face>

      <missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>
    </font>
  </defs>
  <text
 x="100"
 y="100"
 style="font-family: 'Super Sans', Helvetica, sans-serif;
 font-weight: bold; font-style: normal">
    Text using embedded font!
  </text>
</svg>
```

### Result

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

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

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

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

See also
--------

* `<font>`
* `<missing-glyph>`
* SVG tutorial: SVG fonts
<mpath>
=======

The **`<mpath>`** sub-element for the `<animateMotion>` element provides the ability to reference an external `<path>` element as the definition of a motion path.

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

|  |  |
| --- | --- |
| Categories | Animation element |
| Permitted content | Any number of the following elements, in any order:Descriptive elements |

Attributes
----------

### Global attributes

* Core attributes
* Xlink attributes
### Specific attributes

* `xlink:href` 
Deprecated
DOM Interface
-------------

This element implements the `SVGMPathElement` interface.

Example
-------

### SVG


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 500 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect
 x="1"
 y="1"
 width="498"
 height="298"
 fill="none"
 stroke="blue"
 stroke-width="2" />

  <!-- Draw the outline of the motion path in blue, along
 with three small circles at the start, middle and end. -->
  <path
 id="path1"
 d="M100,250 C 100,50 400,50 400,250"
 fill="none"
 stroke="blue"
 stroke-width="7.06" />
  <circle cx="100" cy="250" r="17.64" fill="blue" />
  <circle cx="250" cy="100" r="17.64" fill="blue" />
  <circle cx="400" cy="250" r="17.64" fill="blue" />

  <!-- Here is a triangle which will be moved about the motion path.
 It is defined with an upright orientation with the base of
 the triangle centered horizontally just above the origin. -->
  <path
 d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
 fill="yellow"
 stroke="red"
 stroke-width="7.06">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
      <mpath href="#path1" />
    </animateMotion>
  </path>
</svg>
```

### Result

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

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

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

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

See also
--------

* `<animateMotion>`
<script>
========

The SVG `script` element allows to add scripts to an SVG document.

**Note:** While SVG's `script` element is equivalent to the HTML `<script>` element, it has some discrepancies, like it uses the `href` attribute instead of `src` and it doesn't support ECMAScript modules so far (See browser compatibility below for details)

Example
-------


```html
Click the circle to change colors.
<svg
 viewBox="0 0 10 10"
 height="120px"
 width="120px"
 xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4" />

  <script>
 // <![CDATA[
 function getColor() {
 const R = Math.round(Math.random() \* 255)
 .toString(16)
 .padStart(2, "0");

 const G = Math.round(Math.random() \* 255)
 .toString(16)
 .padStart(2, "0");

 const B = Math.round(Math.random() \* 255)
 .toString(16)
 .padStart(2, "0");

 return `#${R}${G}${B}`;
 }

 document.querySelector("circle").addEventListener("click", (e) => {
 e.target.style.fill = getColor();
 });
 // ]]>
 </script>
</svg>
```

Attributes
----------

`crossorigin`

 This attribute defines CORS settings as define for the HTML `<script>` element.
 *Value type*: **<string>**; *Default value*: `?`; *Animatable*: **yes**

`href`

 The URL to the script to load.
 *Value type*: **<URL>** ; *Default value*: *none*; *Animatable*: **no**

`type`

 This attribute defines type of the script language to use.
 *Value type*: **<string>**; *Default value*: `application/ecmascript`; *Animatable*: **no**

`xlink:href` 
Deprecated

 The URL to the script to load.
 *Value type*: **<URL>** ; *Default value*: *none*; *Animatable*: **no**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

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

|  |  |
| --- | --- |
| Categories | None |
| Permitted content | Any elements or character data |

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

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

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

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

See also
--------

* `script` element in HTML
<switch>
========

The **`<switch>`** SVG element evaluates any `requiredFeatures`, `requiredExtensions` and `systemLanguage` attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true.

Other direct children will be bypassed and therefore not rendered. If a child element is a container element, like `<g>`, then its subtree is also processed/rendered or bypassed/not rendered.

**Note:** The `display` and `visibility` properties have no effect on `<switch>` element processing. In particular, setting `display:none` on a child has no effect on the true/false testing for `<switch>` processing.

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

|  |  |
| --- | --- |
| Categories | Container element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elementsShape elements`<a>`, `<foreignObject>`, `<g>`, `<image>`, `<svg>`, `<switch>`, `<text>`, `<use>` |

Attributes
----------

### Global attributes

* Conditional processing attributes
* Core attributes
* Graphical event attributes
* Presentation attributes
* `class`
* `style`
* `transform`
DOM Interface
-------------

This element implements the `SVGSwitchElement` interface.

SVG <switch> example
--------------------

This example demonstrates showing different text content depending on the browser's language settings. The `switch` element will display the first of its child elements whose `systemLanguage` attribute matches the user's language, or the fallback element with no `systemLanguage` attribute if none of them match.

### HTML


```html
<svg viewBox="0 -20 100 50">
  <switch>
    <text systemLanguage="ar">مرحبا</text>
    <text systemLanguage="de,nl">Hallo!</text>
    <text systemLanguage="en-us">Howdy!</text>
    <text systemLanguage="en-gb">Wotcha!</text>
    <text systemLanguage="en-au">G'day!</text>
    <text systemLanguage="en">Hello!</text>
    <text systemLanguage="es">Hola!</text>
    <text systemLanguage="fr">Bonjour!</text>
    <text systemLanguage="ja">こんにちは</text>
    <text systemLanguage="ru">Привет!</text>
    <text>☺</text>
  </switch>
</svg>
```

### Result

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

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

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

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

The **`<fePointLight>`** filter primitive defines a light source which allows to create a point light effect. It that can be used within a lighting filter primitive: `<feDiffuseLighting>` or `<feSpecularLighting>`.

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

|  |  |
| --- | --- |
| Categories | Light source element |
| Permitted content | Any number of the following elements, in any order:`<animate>`, `<set>` |

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

* `x`
* `y`
* `z`
DOM Interface
-------------

This element implements the `SVGFEPointLightElement` interface.

Example
-------

### SVG


```html
<svg
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feSpecularLighting
 result="spotlight"
 specularConstant="1.5"
 specularExponent="80"
 lighting-color="#FFF">
        <fePointLight x="50" y="50" z="220" />
      </feSpecularLighting>
      <feComposite
 in="SourceGraphic"
 in2="spotlight"
 operator="arithmetic"
 k1="0"
 k2="1"
 k3="1"
 k4="0" />
    </filter>
  </defs>

  <image
 href="mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%"
 style="filter:url(#spotlight);" />
</svg>
```

### Result

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

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

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

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

See also
--------

* `<filter>`
* `<animate>`
* `<set>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
* `<feDistantLight>`
* `<feSpotLight>`
* SVG tutorial: Filter effects
<image>
=======

The **`<image>`** SVG element includes images inside SVG documents. It can display raster image files or other SVG files.

The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.

SVG files displayed with `<image>` are treated as an image: external resources aren't loaded, `:visited` styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try `<use>` with an external URL. To include SVG files and run scripts inside them, try `<object>` inside of `<foreignObject>`.

**Note:** The HTML spec defines `<image>` as a synonym for `<img>` while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVGs.

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

|  |  |
| --- | --- |
| Categories | Graphics element, Graphics referencing element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elements |

Attributes
----------

### Global attributes

* Conditional processing attributes
* Core attributes
* Graphical event attributes
* Presentation attributes
* Xlink attributes
* `class`
* `style`
* `transform`
### Specific attributes

* `x`: Positions the image horizontally from the origin.
* `y`: Positions the image vertically from the origin.
* `width`: The width the image renders at. Unlike HTML's `<img>`, this attribute is required.
* `height`: The height the image renders at. Unlike HTML's `<img>`, this attribute is required.
* `href` and `xlink:href`
Deprecated
: Points at a URL for the image file.
* `preserveAspectRatio`: Controls how the image is scaled.
* `crossorigin`: Defines the value of the credentials flag for CORS requests.
* `decoding`: Provides a hint to the browser as to whether it should perform image decoding synchronously or asynchronously.
DOM Interface
-------------

`<image>` implements the `SVGImageElement` interface.

Example
-------

Basic rendering of a PNG image in SVG:

### SVG


```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn\_logo\_only\_color.png" height="200" width="200" />
</svg>
```

### Result

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

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

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

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

The **`<feDisplacementMap>`** SVG filter primitive uses the pixel values from the image from `in2` to spatially displace the image from `in`.

The formula for the transformation looks like this:

`P'(x,y) ← P(x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))`

where `P(x,y)` is the input image, `in`, and `P'(x,y)` is the destination. `XC(x,y)` and `YC(x,y)` are the component values of the channel designated by `xChannelSelector` and `yChannelSelector`.

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

|  |  |
| --- | --- |
| Categories | Filter primitive element |
| Permitted content | Any number of the following elements, in any order:`<animate>`, `<set>` |

Attributes
----------

### Global attributes

* Core attributes
* Presentation attributes
* Filter primitive attributes
* `class`
* `style`
### Specific attributes

* `in`
* `in2`
* `scale`
* `xChannelSelector`
* `yChannelSelector`
DOM Interface
-------------

This element implements the `SVGFEDisplacementMapElement` interface.

Example
-------


```html
<svg
 width="200"
 height="200"
 viewBox="0 0 220 220"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence
 type="turbulence"
 baseFrequency="0.05"
 numOctaves="2"
 result="turbulence" />
    <feDisplacementMap
 in2="turbulence"
 in="SourceGraphic"
 scale="50"
 xChannelSelector="R"
 yChannelSelector="G" />
  </filter>

  <circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)" />
</svg>
```

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

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

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

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

See also
--------

* `<filter>`
* `<animate>`
* `<set>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects