<font-face-format> - SVG: Scalable Vector Graphics

<font-face-format>
==================

**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-format>`** SVG element describes the type of font referenced by its parent `<font-face-uri>`.

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

|  |  |
| --- | --- |
| Categories | Font element |
| Permitted content | Empty |

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

`string`
Deprecated
DOM Interface
-------------

This element implements the `SVGFontFaceFormatElement` interface.

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

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

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

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

See also
--------

* `<font-face-uri>`
* SVG tutorial: SVG fonts


<feSpotLight> - SVG: Scalable Vector Graphics

<feSpotLight>
=============

 The **`<feSpotLight>`** SVG filter primitive defines a light source that can be used to create a spotlight effect.
 It is 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`
* `pointsAtX`
* `pointsAtY`
* `pointsAtZ`
* `specularExponent`
* `limitingConeAngle`
DOM Interface
-------------

This element implements the `SVGFESpotLightElement` interface.

Example
-------

### HTML

```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="4"
 lighting-color="#FFF">
        <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" />
      </feSpecularLighting>
      <feComposite
 in="SourceGraphic"
 in2="spotlight"
 operator="out"
 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 # feSpotLightElement |

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>`
* `<fePointLight>`
* SVG tutorial: Filter effects


<feBlend> - SVG: Scalable Vector Graphics

<feBlend>
=========

The **`<feBlend>`** SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the `mode` attribute.

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`
* `mode`
DOM Interface
-------------

This element implements the `SVGFEBlendElement` 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">
      <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="green"
 flood-opacity="1" />
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
    </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 # feBlendElement |

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

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

See also
--------

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


<symbol> - SVG: Scalable Vector Graphics

<symbol>
========

The **`<symbol>`** element is used to define graphical template objects which can be instantiated by a `<use>` element.

The use of `<symbol>` elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as Braille, and thus promote accessibility.

Example
-------
```

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

```html
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- A grid to materialize our symbol positioning -->
  <path
 d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
 fill="none"
 stroke="pink" />

  <!-- All instances of our symbol -->
  <use href="#myDot" x="5" y="5" style="opacity:1.0" />
  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>
```

Attributes
----------

`height`

 This attribute determines the height of the symbol.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`preserveAspectRatio`

 This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
 *Value type*: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; *Default value*: `xMidYMid meet`; *Animatable*: **yes**

`refX`

 This attribute determines the x coordinate of the reference point of the symbol.
 *Value type*: **<length>**|**<percentage>**|`left`|`center`|`right` ; *Default value*: None; *Animatable*: **yes**

`refY`

 This attribute determines the y coordinate of the reference point of the symbol.
 *Value type*: **<length>**|**<percentage>**|`top`|`center`|`bottom` ; *Default value*: None; *Animatable*: **yes**

`viewBox`

 This attribute defines the bound of the SVG viewport for the current symbol.
 *Value type*: **<list-of-numbers>** ; *Default value*: none; *Animatable*: **yes**

`width`

 This attribute determines the width of the symbol.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`x`

 This attribute determines the x coordinate of the symbol.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`y`

 This attribute determines the y coordinate of the symbol.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

Aria Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

|  |  |
| --- | --- |
| Categories | Container element, Structural 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>` |

**Note:** A `<symbol>` element itself is not meant to be rendered. Only instances of a `<symbol>` element (i.e., a reference to a `<symbol>` by a `<use>` element) are rendered. That means that some browsers could refuse to directly display a `<symbol>` element even if the CSS `display` property tells otherwise.

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

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

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

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


<animate> - SVG: Scalable Vector Graphics

<animate>
=========

The SVG **`<animate>`** element provides a way to animate an attribute of an element over time.

Example
-------
```

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

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
 attributeName="rx"
 values="0;5;0"
 dur="10s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Attributes
----------

### Animation Attributes

Animation timing attributes
`begin`, `dur`, `end`, `min`, `max`, `restart`, `repeatCount`, `repeatDur`, `fill`
Animation value attributes
`calcMode`, `values`, `keyTimes`, `keySplines`, `from`, `to`, `by`
Other Animation attributes

Most notably: `attributeName`, `additive`, `accumulate`

Animation event attributes

Most notably: `onbegin`, `onend`, `onrepeat`

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

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

This element implements the `SVGAnimateElement` interface.

Accessibility concerns
----------------------

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query or equivalent User Agent client hint `Sec-CH-Prefers-Reduced-Motion` to create a complimentary experience for users who have expressed a preference for no animated experiences.

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
Specifications
--------------

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

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

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


<g> - SVG: Scalable Vector Graphics

<g>
===

The **`<g>`** SVG element is a container used to group other SVG elements.

Transformations applied to the `<g>` element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the `<use>` element.

Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Using g to inherit presentation attributes -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>
```

Attributes
----------

This element only includes global attributes

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

Aria Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

|  |  |
| --- | --- |
| Categories | Container element, Structural 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>` |

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

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

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

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


<font-face-uri> - SVG: Scalable Vector Graphics

<font-face-uri>
===============

**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-uri>`** SVG element points to a remote definition of the current font.

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

|  |  |
| --- | --- |
| Categories | Font element |
| Permitted content | Any number of the following elements, in any order:`<font-face-format>` |

Attributes
----------

### Global attributes

* Core attributes
* XLink attributes
### Specific attributes

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

This element implements the `SVGFontFaceUriElement` interface.

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

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

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


<desc> - SVG: Scalable Vector Graphics

<desc>
======

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

Text in a `<desc>` element is not rendered as part of the graphic. If the element can be described by visible text, it is possible to reference that text with the `aria-describedby` attribute. If `aria-describedby` is used, it will take precedence over `<desc>`.

The hidden text of a `<desc>` element can also be concatenated with the visible text of other elements using multiple IDs in an `aria-describedby` value. In that case, the `<desc>` element must provide an ID for reference.

Example
-------
```

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

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <desc>
      I'm a circle and that description is here to demonstrate how I can be
      described, but is it really necessary to describe a simple circle like me?
    </desc>
  </circle>
</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 # DescriptionAndTitleElements |

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

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

See also
--------

* `<title>`


<view> - SVG: Scalable Vector Graphics

<view>
======

A view is a defined way to view the image, like a zoom level or a detail view.

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

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

Attributes
----------

### Global attributes

* Aria attributes
* Core attributes
* Global event attributes
### Specific attributes

* `viewBox`
* `preserveAspectRatio`
* `zoomAndPan`
Deprecated

Non-standard
Example
-------

### SVG

```svg
<svg viewBox="0 0 300 100" width="300" height="100"
 xmlns="http://www.w3.org/2000/svg">

  <view id="one" viewBox="0 0 100 100" />
  <circle cx="50" cy="50" r="40" fill="red" />

  <view id="two" viewBox="100 0 100 100" />
  <circle cx="150" cy="50" r="40" fill="green" />

  <view id="three" viewBox="200 0 100 100" />
  <circle cx="250" cy="50" r="40" fill="blue" />
</svg>
```

### HTML

```html
<img src="example.svg" alt="three circles" width="300" height="100" />
<br />
<img src="example.svg#three" alt="blue circle" width="100" height="100" />
```

### Result

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

This element implements the `SVGViewElement` interface.

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

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

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

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


<mask> - SVG: Scalable Vector Graphics

<mask>
======

The **`<mask>`** element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the `mask` property.

Example
-------
```

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

```html
<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path
 d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
 fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>
```

Attributes
----------

`height`

 This attribute defines the height of the masking area.
 *Value type*: **<length>** ; *Default value*: `120%`; *Animatable*: **yes**

`maskContentUnits`

 This attribute defines the coordinate system for the contents of the `<mask>`.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `userSpaceOnUse`; *Animatable*: **yes**

`maskUnits`

 This attribute defines the coordinate system for attributes `x`, `y`, `width` and `height` on the `<mask>`.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `objectBoundingBox`; *Animatable*: **yes**

`x`

 This attribute defines the x-axis coordinate of the top-left corner of the masking area.
 *Value type*: **<coordinate>** ; *Default value*: `-10%`; *Animatable*: **yes**

`y`

 This attribute defines the y-axis coordinate of the top-left corner of the masking area.
 *Value type*: **<coordinate>** ; *Default value*: `-10%`; *Animatable*: **yes**

`width`

 This attribute defines the width of the masking area.
 *Value type*: **<length>** ; *Default value*: `120%`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

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

|  |  |
| --- | --- |
| Categories | Container 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>` |

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

| Specification |
| --- |
| CSS Masking Module Level 1 # MaskElement |

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

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

See also
--------

* Other clipping and masking SVG elements: `<clipPath>`
* Clipping and masking CSS properties: `mask`, `mask-image`, `mask-mode`, `mask-repeat`, `mask-position`, `mask-clip`, `mask-origin`, `mask-composite`, `mask-size`, `pointer-events`


<text> - SVG: Scalable Vector Graphics

<text>
======

The SVG **`<text>`** element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to `<text>`, like any other SVG graphics element.

If text is included in SVG not inside of a `<text>` element, it is not rendered. This is different than being hidden by default, as setting the `display` property won't show the text.

Example
-------
```

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

```html
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
 .small {
 font: italic 13px sans-serif;
 }
 .heavy {
 font: bold 30px sans-serif;
 }

 /\* Note that the color of the text is set with the \*
 \* fill property, the color property is for HTML only \*/
 .Rrrrr {
 font: italic 40px serif;
 fill: red;
 }
 </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
```

Attributes
----------

`x`

 The x coordinate of the starting point of the text baseline.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`y`

 The y coordinate of the starting point of the text baseline.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`dx`

 Shifts the text position horizontally from a previous text element.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

`dy`

 Shifts the text position vertically from a previous text element.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

`rotate`

 Rotates orientation of each individual glyph. Can rotate glyphs individually.
 *Value type*: **<list-of-number>** ; *Default value*: none; *Animatable*: **yes**

`lengthAdjust`

 How the text is stretched or compressed to fit the width defined by the `textLength` attribute.
 *Value type*: `spacing`|`spacingAndGlyphs`; *Default value*: `spacing`; *Animatable*: **yes**

`textLength`

 A width that the text should be scaled to fit.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`, `font-family`, `font-size`, `font-size-adjust`, `font-stretch`, `font-style`, `font-variant`, `font-weight`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `dominant-baseline`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `text-anchor`, `transform`, `vector-effect`, `visibility`

Aria Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

|  |  |
| --- | --- |
| Categories | Graphics element, Text content element |
| Permitted content | Character data and any number of the following elements, in any order:Animation elementsDescriptive elementsText content child elements`<a>` |

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

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

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

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

Related
-------

* Other SVG text related elements: **`<tspan>`**, `<tref>`


<feConvolveMatrix> - SVG: Scalable Vector Graphics

<feConvolveMatrix>
==================

The **`<feConvolveMatrix>`** SVG filter primitive applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.

A matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value. Each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels. The basic convolution formula which is applied to each color value for a given pixel is:

 COLORX,Y = (
 SUM I=0 to [orderY-1] {
 SUM J=0 to [orderX-1] {
 SOURCE X-targetX+J, Y-targetY+I \* kernelMatrixorderX-J-1, orderY-I-1
 }
 }
 ) / divisor + bias \* ALPHAX,Y

where "orderX" and "orderY" represent the X and Y values for the 'order' attribute, "targetX" represents the value of the 'targetX' attribute, "targetY" represents the value of the 'targetY' attribute, "kernelMatrix" represents the value of the 'kernelMatrix' attribute, "divisor" represents the value of the 'divisor' attribute, and "bias" represents the value of the 'bias' attribute.

Note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.

To illustrate, suppose you have an input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows:
```

0    20  40 235 235
100 120 140 235 235
200 220 240 235 235
225 225 255 255 255
225 225 255 255 255
```

and you define a 3-by-3 convolution kernel as follows:
```

1 2 3
4 5 6
7 8 9
```

Let's focus on the color value at the second row and second column of the image (source pixel value is 120). Assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes 'divisor', 'targetX' and 'targetY', then resulting color value will be:
```

(9*0   + 8*20  + 7*40 +
 6*100 + 5*120 + 4*140 +
 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
```

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`
* `order`
* `kernelMatrix`
* `divisor`
* `bias`
* `targetX`
* `targetY`
* `edgeMode`
* `kernelUnitLength`
* `preserveAlpha`
DOM Interface
-------------

This element implements the `SVGFEConvolveMatrixElement` interface.

Example
-------

### SVG

```html
<svg
 width="200"
 height="200"
 viewBox="0 0 200 200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="emboss">
      <feConvolveMatrix
 kernelMatrix="3 0 0
 0 0 0
 0 0 -3" />
    </filter>
  </defs>

  <image
 href="mdn.svg"
 x="0"
 y="0"
 height="200"
 width="200"
 style="filter:url(#emboss);" />
</svg>
```

### Result

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

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

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>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects


<font-face> - SVG: Scalable Vector Graphics

<font-face>
===========

**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>`** SVG element corresponds to the CSS `@font-face` rule. It defines a font's outer properties.

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

|  |  |
| --- | --- |
| Categories | Font element |
| Permitted content | Any number of descriptive elements » and at most one `<font-face>` element, in any order. |

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

* `font-family`
Deprecated
* `font-style`
Deprecated
* `font-variant`
Deprecated
* `font-weight`
Deprecated
* `font-stretch`
Deprecated
* `font-size`
Deprecated
* `unicode-range`
Deprecated
* `units-per-em`
Deprecated
* `panose-1`
Deprecated
* `stemv`
Deprecated
* `stemh`
Deprecated
* `slope`
Deprecated
* `cap-height`
Deprecated
* `x-height`
Deprecated
* `accent-height`
Deprecated
* `ascent`
Deprecated
* `descent`
Deprecated
* `widths`
Deprecated
* `bbox`
Deprecated
* `ideographic`
Deprecated
* `alphabetic`
Deprecated
* `mathematical`
Deprecated
* `hanging`
Deprecated
* `v-ideographic`
Deprecated
* `v-alphabetic`
Deprecated
* `v-mathematical`
Deprecated
* `v-hanging`
Deprecated
* `underline-position`
Deprecated
* `underline-thickness`
Deprecated
* `strikethrough-position`
Deprecated
* `strikethrough-thickness`
Deprecated
* `overline-position`
Deprecated
* `overline-thickness`
Deprecated
DOM Interface
-------------

This element implements the `SVGFontFaceElement` interface.

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

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

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

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

See also
--------

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


<missing-glyph> - SVG: Scalable Vector Graphics

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

The **`<missing-glyph>`** SVG element's content is rendered, if for a given character the font doesn't define an appropriate `<glyph>`.

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

|  |  |
| --- | --- |
| Categories | None |
| 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
DOM Interface
-------------

This element implements the `SVGMissingGlyphElement` interface.

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

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

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

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

See also
--------

* `<font>`
* `<glyph>`
* SVG tutorial: SVG fonts


<feTurbulence> - SVG: Scalable Vector Graphics

<feTurbulence>
==============

The **`<feTurbulence>`** SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.

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

* `baseFrequency`
* `numOctaves`
* `seed`
* `stitchTiles`
* `type`
DOM Interface
-------------

This element implements the `SVGFETurbulenceElement` 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 # feTurbulenceElement |

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>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* SVG tutorial: Filter effects


<feSpecularLighting> - SVG: Scalable Vector Graphics

<feSpecularLighting>
====================

The **`<feSpecularLighting>`** SVG filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.

This filter primitive produces an image which contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the `add` term of the arithmetic `<feComposite>` method. Multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.

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

|  |  |
| --- | --- |
| Categories | Filter primitive element |
| Permitted content | Exactly one light source element first and any number of descriptive elements in any order. |

Attributes
----------

### Global attributes

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

* `in`
* `surfaceScale`
* `specularConstant`
* `specularExponent`
* `kernelUnitLength`
DOM Interface
-------------

This element implements the `SVGFESpecularLightingElement` interface.

Example
-------

```html
<svg
 height="200"
 width="200"
 viewBox="0 0 220 220"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="filter">
    <feSpecularLighting
 result="specOut"
 specularExponent="20"
 lighting-color="#bbbbbb">
      <fePointLight x="50" y="75" z="200" />
    </feSpecularLighting>
    <feComposite
 in="SourceGraphic"
 in2="specOut"
 operator="arithmetic"
 k1="0"
 k2="1"
 k3="1"
 k4="0" />
  </filter>
  <circle cx="110" cy="110" r="100" style="filter:url(#filter)" />
</svg>
```

### Result

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

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

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>`
* `<feDistantLight>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects


<font> - SVG: Scalable Vector Graphics

<font>
======

**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>`** SVG element defines a font to be used for text layout.

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

|  |  |
| --- | --- |
| Categories | Font element |
| Permitted content | Any number of the following elements, in any order:Descriptive elements`<font-face>`, `<glyph>`, `<hkern>`, `<missing-glyph>`, `<vkern>` |

Attributes
----------

### Global attributes

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

* `horiz-origin-x`
Deprecated
* `horiz-origin-y`
Deprecated
* `horiz-adv-x`
Deprecated
* `vert-origin-x`
Deprecated
* `vert-origin-y`
Deprecated
* `vert-adv-y`
Deprecated
DOM Interface
-------------

This element implements the `SVGFontElement` interface.

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

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

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

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

See also
--------

* `<font-face>`
* `<glyph>`
* `<text>`
* SVG tutorial: SVG fonts


<path> - SVG: Scalable Vector Graphics

<path>
======

The **`<path>`** SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.

Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 d="M 10,30
 A 20,20 0,0,1 50,30
 A 20,20 0,0,1 90,30
 Q 90,60 50,90
 Q 10,60 10,30 z" />
</svg>
```

Attributes
----------

`d`

 This attribute defines the shape of the path.
 *Value type*: **<string>** ; *Default value*: `''`; *Animatable*: **yes**

`pathLength`

 This attribute lets authors specify the total length for the path, in user units.
 *Value type*: **<number>** ; *Default value*: *none*; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

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

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

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

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

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

See also
--------

* SVG basic shapes: `<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>`, `<rect>`
* The MDN SVG "Getting Started" tutorial: Path


<feFlood> - SVG: Scalable Vector Graphics

<feFlood>
=========

The **`<feFlood>`** SVG filter primitive fills the filter subregion with the color and opacity defined by `flood-color` and `flood-opacity`.

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

* `flood-color`
* `flood-opacity`
DOM Interface
-------------

This element implements the `SVGFEFloodElement` interface.

Example
-------

### HTML

```html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <defs>
    <filter id="floodFilter" filterUnits="userSpaceOnUse">
      <feFlood
 x="50"
 y="50"
 width="100"
 height="100"
 flood-color="green"
 flood-opacity="0.5" />
    </filter>
  </defs>

  <use style="filter: url(#floodFilter);" />
</svg>
```

### Result

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

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

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>`
* `<feDisplacementMap>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects


<tref> - SVG: Scalable Vector Graphics

<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> - SVG: Scalable Vector Graphics

<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


<feComponentTransfer> - SVG: Scalable Vector Graphics

<feComponentTransfer>
=====================

The **`<feComponentTransfer>`** SVG filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.

The calculations are performed on non-premultiplied color values. The colors are modified by changing each channel (R, G, B, and A) to the result of what the children `<feFuncR>`, `<feFuncB>`, `<feFuncG>`, and `<feFuncA>` return. If more than one of the same element is provided, the last one specified is used, and if no element is supplied to modify one of the channels, the effect is the same is if an identity transformation had been given for that channel.

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

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

Attributes
----------

### Global attributes

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

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

This element implements the `SVGFEComponentTransferElement` interface.

Example
-------

### SVG

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
  <defs>
    <linearGradient
 id="rainbow"
 gradientUnits="userSpaceOnUse"
 x1="0"
 y1="0"
 x2="100%"
 y2="0">
      <stop offset="0" stop-color="#ff0000"></stop>
      <stop offset="0.2" stop-color="#ffff00"></stop>
      <stop offset="0.4" stop-color="#00ff00"></stop>
      <stop offset="0.6" stop-color="#00ffff"></stop>
      <stop offset="0.8" stop-color="#0000ff"></stop>
      <stop offset="1" stop-color="#800080"></stop>
    </linearGradient>
    <filter id="identity" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"></feFuncR>
        <feFuncG type="identity"></feFuncG>
        <feFuncB type="identity"></feFuncB>
        <feFuncA type="identity"></feFuncA>
      </feComponentTransfer>
    </filter>
    <filter id="table" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
        <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
        <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="discrete" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 1 1"></feFuncR>
        <feFuncG type="discrete" tableValues="1 1 0 0"></feFuncG>
        <feFuncB type="discrete" tableValues="0 1 1 0"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="linear" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
        <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
        <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="gamma" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
        <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
        <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <g font-weight="bold">
    <text x="0" y="20">Default</text>
    <rect x="0" y="30" width="100%" height="20"></rect>
    <text x="0" y="70">Identity</text>
    <rect
 x="0"
 y="80"
 width="100%"
 height="20"
 style="filter:url(#identity)"></rect>
    <text x="0" y="120">Table lookup</text>
    <rect
 x="0"
 y="130"
 width="100%"
 height="20"
 style="filter:url(#table)"></rect>
    <text x="0" y="170">Discrete table lookup</text>
    <rect
 x="0"
 y="180"
 width="100%"
 height="20"
 style="filter:url(#discrete)"></rect>
    <text x="0" y="220">Linear function</text>
    <rect
 x="0"
 y="230"
 width="100%"
 height="20"
 style="filter:url(#linear)"></rect>
    <text x="0" y="270">Gamma function</text>
    <rect
 x="0"
 y="280"
 width="100%"
 height="20"
 style="filter:url(#gamma)"></rect>
  </g>
</svg>
```

### CSS

```css
rect {
  fill: url(#rainbow);
}
```

### Result

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

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

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

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

See also
--------

* `<filter>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects


<feMerge> - SVG: Scalable Vector Graphics

<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> - SVG: Scalable Vector Graphics

<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 - SVG: Scalable Vector Graphics

<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> - SVG: Scalable Vector Graphics

<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


<feComposite> - SVG: Scalable Vector Graphics

<feComposite>
=============

The **`<feComposite>`** SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: `over`, `in`, `atop`, `out`, `xor`, `lighter`, or `arithmetic`.

The table below shows each of these operations using an image of the MDN logo composited with a red circle:

| Operation | Description |
| --- | --- |
| over
 over operator
 |
 The source graphic defined by the `in` attribute
 (the MDN logo) is placed over the destination graphic defined by the
 `in2` attribute (the circle).

 This is the *default operation*, which will be used if no
 operation or an unsupported operation is specified.
  |
| in
 in operator
 |
 The parts of the source graphic defined by the `in` attribute
 that overlap the destination graphic defined in the
 `in2` attribute, replace the destination graphic.
  |
| out
 out operator
 |
 The parts of the source graphic defined by the `in` attribute
 that fall outside the destination graphic defined in the
 `in2` attribute, are displayed.
  |
| atop
 atop operator
 |
 The parts of the source graphic defined in the
 `in` attribute, which overlap the destination graphic defined
 in the `in2` attribute, replace the destination graphic. The
 parts of the destination graphic that do not overlap with the source
 graphic stay untouched.
  |
| xor
 xor operator
 |
 The non-overlapping regions of the source graphic defined in the
 `in` attribute and the destination graphic defined in the
 `in2` attribute are combined.
  |
| lighter
 lighter operator
 |
 The sum of the source graphic defined in the `in` attribute
 and the destination graphic defined in the `in2` attribute is
 displayed.
  |
|
 arithmetic

 arithmetic operator
 |
 The `arithmetic` operation is useful for combining the
 output from the `<feDiffuseLighting>` and
 `<feSpecularLighting>` filters with texture
 data. If the `arithmetic` operation is chosen, each result
 pixel is computed using the following formula:

```

result = k1*i1*i2 + k2*i1 + k3*i2 + k4
```

where:* `i1` and `i2` indicate the corresponding pixel
 channel values of the input image, which map to
 `in` and `in2` respectively
* `k1`, `k2`,
 `k3`, and `k4` indicate the
 values of the attributes with the same name.
 |

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`: First input for the given filter primitive.
* `in2`: Second input for the given filter primitive (works the same as the `in` attribute).
* `operator`: `over` | `in` | `out` | `atop` | `xor` | `lighter` | `arithmetic`
* `k1`, `k2`, `k3`, `k4`: Values used for calculating the result pixel in `arithmetic` `operator` filter primitives.
DOM Interface
-------------

This element implements the `SVGFECompositeElement` interface.

Example
-------

This example defines filters for each of the supported operations (`over`, `atop`, `lighter`, etc.), which composite an input `SourceGraphic` with an image of the MDN logo. The filters are each applied to a circle element, which is then used as the `SourceGraphic`.

**Note:** `BackgroundImage` cannot be used as a compositing source on modern browsers, so we can't define a filter that composites using whatever pixels happen to be under the filter as one of the sources. The approach taken here is a workaround because we can't use `BackgroundImage`.

### SVG

```html
<svg
 style="width:800px; height:400px; display: inline;"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageOver">
      <feImage href="mdn\_logo\_only\_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="over" />
    </filter>
    <filter id="imageIn">
      <feImage href="mdn\_logo\_only\_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>
    <filter id="imageOut">
      <feImage href="mdn\_logo\_only\_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="out" />
    </filter>
    <filter id="imageAtop">
      <feImage href="mdn\_logo\_only\_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="atop" />
    </filter>
    <filter id="imageXor">
      <feImage href="mdn\_logo\_only\_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="xor" />
    </filter>
    <filter id="imageArithmetic">
      <feImage href="mdn\_logo\_only\_color.png" x="10px" y="10px" width="160px" />
      <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="0.1"
 k2="0.2"
 k3="0.3"
 k4="0.4" />
    </filter>
    <filter id="imageLighter">
      <feImage href="mdn\_logo\_only\_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="lighter" />
    </filter>
  </defs>
  <g transform="translate(0,25)">
    <circle
 cx="90px"
 cy="80px"
 r="70px"
 fill="#c00"
 style="filter:url(#imageOver)" />
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle
 cx="90px"
 cy="80px"
 r="70px"
 fill="#c00"
 style="filter:url(#imageIn)" />
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle
 cx="90px"
 cy="80px"
 r="70px"
 fill="#c00"
 style="filter:url(#imageOut)" />
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle
 cx="90px"
 cy="80px"
 r="70px"
 fill="#c00"
 style="filter:url(#imageAtop)" />
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle
 cx="90px"
 cy="80px"
 r="70px"
 fill="#c00"
 style="filter:url(#imageXor)" />
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle
 cx="90px"
 cy="80px"
 r="70px"
 fill="#c00"
 style="filter:url(#imageArithmetic)" />
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle
 cx="90px"
 cy="80px"
 r="70px"
 fill="#c00"
 style="filter:url(#imageLighter)" />
    <text x="80" y="-5">lighter</text>
  </g>
</svg>
```

### Result

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

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

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>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects


<textPath> - SVG: Scalable Vector Graphics

<textPath>
==========

To render text along the shape of a `<path>`, enclose the text in a **`<textPath>`** element that has an `href` attribute with a reference to the `<path>` element.

Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
 id="MyPath"
 fill="none"
 stroke="red"
 d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>
```

Attributes
----------

`href`

 The URL to the path or basic shape on which to render the text. If the `path` attribute is set, `href` has no effect.
 *Value type*: **<URL>** ; *Default value*: none; *Animatable*: **yes**

`lengthAdjust`

 Where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves.
 *Value type*: `spacing`|`spacingAndGlyphs`; *Default value*: `spacing`; *Animatable*: **yes**

`method`

 Which method to render individual glyphs along the path.
 *Value type*: `align`|`stretch` ; *Default value*: `align`; *Animatable*: **yes**

`path`
Experimental

 The path on which the text should be rendered.
 *Value type*: **<path\_data>** ; *Default value*: none; *Animatable*: **yes**

`side`
Experimental

 Which side of the path the text should be rendered.
 *Value type*: `left`|`right` ; *Default value*: `left`; *Animatable*: **yes**

`spacing`

 How space between glyphs should be handled.
 *Value type*: `auto`|`exact` ; *Default value*: `exact`; *Animatable*: **yes**

`startOffset`

 How far the beginning of the text should be offset from the beginning of the path.
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *Default value*: `0`; *Animatable*: **yes**

`textLength`

 The width of the space into which the text will render.
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *Default value*: *auto*; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

XLink Attributes
`xlink:title`
Usage notes
-----------

|  |  |
| --- | --- |
| Categories | Text content element, Text content child element |
| Permitted content | Character data and any number of the following elements, in any order:Descriptive elements`<a>`, `<animate>`, `<set>`, `<tref>`, `<tspan>` |

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

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

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

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


<feColorMatrix> - SVG: Scalable Vector Graphics

<feColorMatrix>
===============

The **`<feColorMatrix>`** SVG filter element changes colors based on a transformation matrix. Every pixel's color value `[R,G,B,A]` is matrix multiplied by a 5 by 5 color matrix to create new color `[R',G',B',A']`.

**Note:** The prime symbol **`'`** is used in mathematics indicate the result of a transformation.
```

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | * | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1  |   | 1 |
```

In simplified terms, below is how each color channel in the new pixel is calculated. The last row is ignored because its values are constant.
```

R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5
```

Take the amount of red in the new pixel, or `R'`:

It is the sum of:

* `r1` times the old pixel's red `R`,
* `r2` times the old pixel's green `G`,
* `r3` times of the old pixel's blue `B`,
* `r4` times the old pixel's alpha `A`,
* plus a shift `r5`.

These specified amounts can be any real number, though the final **R'** will be clamped between 0 and 1. The same goes for **G'**, **B'**, and **A'**.
```

R'      =      r1 * R      +        r2 * G      +       r3 * B      +       r4 * A       +       r5
New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]
```

If, say, we want to make a completely black image redder, we can make the `r5` a positive real number *x*, boosting the redness on every pixel of the new image by *x*.

An **identity matrix** looks like this:
```

     R G B A W
R' | 1 0 0 0 0 |
G' | 0 1 0 0 0 |
B' | 0 0 1 0 0 |
A' | 0 0 0 1 0 |
```

In it, every new value is exactly 1 times its old value, with nothing else added. It is recommended to start manipulating the matrix from here.

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, including the `x`, `y`, `width`, `height`, and `result` attributes.
* `class`
* `style`
### Specific attributes

* `in`: Values include `SourceGraphic`, `SourceAlpha`, `BackgroundImage`, `BackgroundAlpha`, `FillPaint`, `StrokePaint`, or a reference to another filter primitive.
* `type`: Values include `matrix`, `saturate`, `hueRotate`, and `luminanceToAlpha`.
* `values`: The value for the matrix type set in the `type` attribute.
DOM Interface
-------------

This element implements the `SVGFEColorMatrixElement` interface.

Example
-------

### SVG

```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 150 500"
 preserveAspectRatio="xMidYMid meet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- ref -->
  <defs>
    <g id="circles">
      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
    </g>
  </defs>
  <use href="#circles" />
  <text x="70" y="50">Reference</text>

  <!-- identity matrix -->
  <filter id="colorMeTheSame">
    <feColorMatrix
 in="SourceGraphic"
 type="matrix"
 values="1 0 0 0 0
 0 1 0 0 0
 0 0 1 0 0
 0 0 0 1 0" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 70)"
 filter="url(#colorMeTheSame)" />
  <text x="70" y="120">Identity matrix</text>

  <!-- Combine RGB into green matrix -->
  <filter id="colorMeGreen">
    <feColorMatrix
 in="SourceGraphic"
 type="matrix"
 values="0 0 0 0 0
 1 1 1 1 0
 0 0 0 0 0
 0 0 0 1 0" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 140)"
 filter="url(#colorMeGreen)" />
  <text x="70" y="190">rgbToGreen</text>

  <!-- saturate -->
  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 210)"
 filter="url(#colorMeSaturate)" />
  <text x="70" y="260">saturate</text>

  <!-- hueRotate -->
  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 280)"
 filter="url(#colorMeHueRotate)" />
  <text x="70" y="330">hueRotate</text>

  <!-- luminanceToAlpha -->
  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
  </filter>
  <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
  <text x="70" y="400">luminanceToAlpha</text>
</svg>
```

### Result

| Screenshot | Live sample |
| --- | --- |
|  |  |

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

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

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

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

See also
--------

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


<circle> - SVG: Scalable Vector Graphics

<circle>
========

The **`<circle>`** SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.

Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>
```

Attributes
----------

`cx`

 The x-axis coordinate of the center of the circle.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`cy`

 The y-axis coordinate of the center of the circle.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`r`

 The radius of the circle. A value lower or equal to zero disables rendering of the circle.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`pathLength`

 The total length for the circle's circumference, in user units.
 *Value type*: **<number>** ; *Default value*: *none*; *Animatable*: **yes**

**Note:** Starting with SVG2, `cx`, `cy`, and `r` are *Geometry Properties*, meaning those attributes can also be used as CSS properties for that element.

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

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

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

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

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

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

See also
--------

* Other SVG basic shapes: **`<ellipse>`**, `<line>`, `<polygon>`, `<polyline>`, `<rect>`


<polyline> - SVG: Scalable Vector Graphics

<polyline>
==========

The **`<polyline>`** SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a `polyline` is used to create open shapes as the last point doesn't have to be connected to the first point. For closed shapes see the `<polygon>` element.

Example
-------
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polyline with the default fill -->
  <polyline points="0,100 50,25 50,75 100,0" />

  <!-- Example of the same polyline shape with stroke and no fill -->
  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
```

Attributes
----------

`points`

 This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline
 *Value type*: **<number>**+ ; *Default value*: `""`; *Animatable*: **yes**

`pathLength`

 This attribute lets specify the total length for the path, in user units.
 *Value type*: **<number>** ; *Default value*: *none*; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

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

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

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

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

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

See also
--------

* Other SVG basic shapes: `<circle>`, `<ellipse>`, **`<line>`**, **`<polygon>`**, `<rect>`


<mpath> - SVG: Scalable Vector Graphics

<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> - SVG: Scalable Vector Graphics

<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


<ellipse> - SVG: Scalable Vector Graphics

<ellipse>
=========

The **`<ellipse>`** element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.

**Note:** Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the `transform` attribute.

Example
-------
```

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

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

Attributes
----------

`cx`

 The x position of the center of the ellipse.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`cy`

 The y position of the center of the ellipse.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`rx`

 The radius of the ellipse on the x axis.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`ry`

 The radius of the ellipse on the y axis.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`pathLength`

 This attribute lets specify the total length for the path, in user units.
 *Value type*: **<number>** ; *Default value*: *none*; *Animatable*: **yes**

**Note:** Starting with SVG2 `cx`, `cy`, `rx` and `ry` are *Geometry Properties*, meaning those attributes can also be used as CSS properties for that element.

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

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

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

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

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

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

See also
--------

* Other SVG basic shapes: **`<circle>`**, `<line>`, `<polygon>`, `<polyline>`, `<rect>`