local-name - XPath

local-name
==========

The `local-name` function returns a string representing the local name of the first node in a given node-set.

### Syntax
```

local-name( [node-set] )
```

### Arguments

`node-set` (optional)

The local name of the first node in this node-set will be returned. If this argument is omitted, the current context node will be used.

### Returns

A string.

### Notes

* The local name is the local part of an expanded-name.
### Defined

XPath 1.0 4.1

### Gecko support

Supported.


system-property - XPath

system-property
===============

The `system-property` function returns an object representing the given system-property.

### Syntax
```

system-property(name)
```

### Arguments

`name` (optional)

The name of the system property. The argument must evaluate to a string that is a QName. The QName is expanded into a name using the namespace declarations in scope for the expression. The system-property function returns an object representing the value of the system property identified by the name. If there is no such system property, the empty string should be returned.

### Returns

An object representing the given system-property.

### Notes

* xsl:version, a number giving the version of XSLT implemented by the processor; for XSLT processors implementing the version of XSLT specified by this document, this is the number 1.0
* xsl:vendor, a string identifying the vendor of the XSLT processor
* xsl:vendor-url, a string containing a URL identifying the vendor of the XSLT processor; typically this is the host page (home page) of the vendor's website.
### Defined

XSLT 1.0 12.4

### Gecko support

Supported.


SVG animation with SMIL - SVG: Scalable Vector Graphics

SVG animation with SMIL
=======================

Synchronized Multimedia Integration Language (SMIL) is an extension of SVG allowing to animating SVG elements. SMIL allows you to:

* animate the numeric attributes of an element (x, y, …)
* animate transform attributes (translation or rotation)
* animate color attributes
* follow a motion path

This is done adding an SVG element like `<animate>` inside the SVG element to animate. Below are examples for the four different ways.

Animating attributes of an element
----------------------------------

The following example animates the **cx** attribute of a circle. To do so, we add an `<animate>` element inside the `<circle>` element. The important attributes for `<animate>` are:

**attributeName**

The name of the attribute to animate.

from

The initial value of the attribute.

to

The final value.

dur

The duration of the animation (for example, write '5s' for 5 seconds).

If you want to animate more attributes inside the same element, just add more `<animate>` elements.

```html
<svg width="300" height="100">
  <title>Attribute Animation with SMIL</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animate
 attributeName="cx"
 from="0"
 to="500"
 dur="5s"
 repeatCount="indefinite" />
  </circle>
</svg>
```

Animating the transform attributes
----------------------------------

The `<animateTransform>` element let you animate **transform** attributes. This new element is necessary because we are not animating a simple attribute like **x** which is just a number. Rotation attributes look like this: `rotation(theta, x, y)`, where `theta` is the angle in degrees, and `x` and `y` are absolute positions. In the example below, we animate the center of the rotation and the angle.

```html
<svg width="300" height="100">
  <title>SVG SMIL Animate with transform</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
 x="0"
 y="50"
 width="15"
 height="34"
 fill="blue"
 stroke="black"
 stroke-width="1">
    <animateTransform
 attributeName="transform"
 begin="0s"
 dur="20s"
 type="rotate"
 from="0 60 60"
 to="360 100 60"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Animation following a path
--------------------------

The `<animateMotion>` element lets you animate an element position and rotation according to a path. The path is defined the same way as in `<path>`. You can set the attribute to define whether the object rotates following the tangent of the path.

### Example 1: Linear motion

In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the `<animateMotion>` element. In this case, we're establishing a path consisting of a **MoveTo** command to establish the starting point for the animation, then the **Horizontal-line** command to move the circle 300 pixels to the right, followed by the **Z command**, which closes the path, establishing a loop back to the beginning. By setting the value of the **repeatCount** attribute to `indefinite`, we indicate that the animation should loop forever, as long as the SVG image exists.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>
```

View live sample

### Example 2: Curved motion

Same example as before with a curved path and following the direction of the path.

```html
<svg width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
 x="0"
 y="0"
 width="20"
 height="20"
 fill="blue"
 stroke="black"
 stroke-width="1">
    <animateMotion
 path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
 dur="3s"
 repeatCount="indefinite"
 rotate="auto" />
  </rect>
</svg>
```

See also
--------

* SVG
* SVG Animation Specification
* SMIL Specification


Specification deviations - SVG: Scalable Vector Graphics

Specification deviations
========================

There are a few places where we have consciously decided to make Gecko deviate from or extend the SVG specification. This page lists those deviations/extensions and our reasoning for them.

### The 'class' and 'style' attributes

Unlike HTML and MathML, the SVG specification does not specify the 'style' and 'class' attributes on all SVG elements. Nevertheless, to allow Mozilla to more cleanly share internal 'class' and 'style' related code, we will implement these attributes on all SVG elements as of Firefox 3. In general this change will not be visible to SVG authors (the elements for which the SVG specification does not define the 'class' and 'style' attribute are elements that are not displayed directly). However, there are two exceptions.

Extending the 'class' attribute to apply to all SVG elements will allow SVG authors to use the Selectors API to select *any* SVG element based on class. This seems like a good thing. Requiring SVG authors to know which elements can and cannot take a 'class' attribute would just put an extra burden on them.

Extending the 'style' attribute to apply to all SVG elements should only really be visible to SVG authors if they call ViewCSS.getComputedStyle on the element or one of its descendants. Since these elements and their descendants are not displayed, it seems unlikely that anyone will either specify 'style' or call getComputedStyle on them. Note that this extension does not mean that we add a css::CSSStyleDeclaration 'style' property to the DOM of elements that do not implement the SVGStylable interface.


Scripting - SVG: Scalable Vector Graphics

Scripting
=========

One can override default browser behaviors with the `evt.preventDefault()` method, add event listeners to objects with the syntax `element.addEventListener(event, function, useCapture)`, and set element properties with syntax like `svgElement.style.setProperty("fill-opacity", "0.0", "")`. Note the existence of all three arguments setting properties.

### Preventing default behavior in event code

When writing drag and drop code, sometimes you'll find that text on the page gets accidentally selected while dragging. Or if you want to use the backspace key in your code, you want to override the browser's default behavior when the backspace key is pressed, which is to go back to the previous page. The `evt.preventDefault()` method lets you do this.

### Using `eventListeners` with objects

The methods `addEventListener()` and `removeEventListener()` are very useful when writing interactive SVG. You can pass an object that implements the `handleEvent` interface as the second parameter to these methods.

```js
function myRect(x, y, w, h, message) {
  this.message = message;

  this.rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  this.rect.setAttributeNS(null, "x", x);
  this.rect.setAttributeNS(null, "y", y);
  this.rect.setAttributeNS(null, "width", w);
  this.rect.setAttributeNS(null, "height", h);
  document.documentElement.appendChild(this.rect);

  this.rect.addEventListener("click", this, false);

  this.handleEvent = (evt) => {
    switch (evt.type) {
      case "click":
        alert(this.message);
        break;
    }
  };
}
```

### Inter-document scripting: referencing embedded SVG

When using SVG within HTML, Adobe's SVG Viewer 3.0 automatically includes a window property called `svgDocument` that points to the SVG document. This is not the case for Mozilla's native SVG implementation; therefore, using `window.svgDocument` does not work in Mozilla. Instead, you can use

```js
const svgDoc = document.embeds["name\_of\_svg"].getSVGDocument();
```

to get a reference to an embedded SVG document instead.

The best way to get access to the `Document` representing an SVG document is to look at `HTMLIFrameElement.contentDocument` (if the document is presented in an `<iframe>`) or `HTMLObjectElement.contentDocument` (if the document is presented in an `<object>` element), like this:

```js
const svgDoc = document.getElementById("iframe\_element").contentDocument;
```

In addition, the `<iframe>`, `<embed>`, and `<object>` elements offer a method, `getSVGDocument()`, which returns the `XMLDocument` representing the element's embedded SVG or `null` if the element doesn't represent an SVG document.

You can also use `document.getElementById("svg_elem_name").getSVGDocument()`, which gives the same result.

**Note:** You may find documentation referring to an `SVGDocument` interface. Prior to SVG 2, SVG documents were represented using that interface. However, SVG documents are now represented using the `XMLDocument` interface instead.

### Inter-document scripting: calling JavaScript functions

When calling a JavaScript function that resides in the HTML file from an SVG file that is embedded in an HTML document, you should use `parent.functionname()` to reference the function. Although the Adobe SVG viewer plugin allows the use of `functionname()`, it's not the preferred way to do things.

**Note:** According to the SVG wiki the `"parent"` JS variable is broken in Adobe's SVG version 6 preview plugin. The suggested workaround is to use `"top"` instead of `"parent"`. Since it is a beta version of their plugin, we can probably safely ignore this.

More information and some examples can be found on the SVG wiki inter-document scripting page.

### `setProperty` has three parameters

The function `svgElement.style.setProperty("fill-opacity", "0.0")` throws a DOMException - `SYNTAX ERR` in Mozilla. This behavior is specified by the W3C in the DOM Level 2 Style Specification. The function `setProperty` is defined as a function with three parameters. The above can be replaced with `'svgElement.style.setProperty("fill-opacity", "0.0", "")'`, which is standards compliant.

### Links

SVG wiki on Scripting and Programming


SVG as an Image - SVG: Scalable Vector Graphics

SVG as an Image
===============

SVG images can be used as an image format, in a number of contexts. Browsers support SVG images in:

* HTML `<img>` or `<svg>` elements
* CSS `background-image`
* CSS `list-style-image`
* CSS `content`
* SVG `<image>` element
* SVG `<feImage>` element
* Canvas `drawImage` function
### Restrictions

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

* JavaScript is disabled.
* External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through data: Ls.
* `:visited`-link styles aren't rendered.
* Platform-native widget styling (based on OS theme) is disabled.

Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the `<iframe>`, `<object>`, or `<embed>` elements.

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-image |


Namespaces crash course - SVG: Scalable Vector Graphics

Namespaces crash course
=======================

As an XML dialect, SVG is namespaced. It is important to understand the concept of namespaces and how they are used if you plan to author SVG content. Namespaces are essential to user agents that support multiple XML dialects; browsers must be very strict. Taking the time to understand namespaces now will save you from future headaches.

### Background

A long-standing goal of the various W3C specifications is to make it possible for different types of XML-based content to be mixed together in the same XML or HTML file. For example, SVG and MathML might be incorporated directly into an HTML based scientific document. Being able to mix content types like this has many advantages, but it also required a very real problem to be solved.

Naturally, each XML dialect defines the meaning of the markup element names described in its specification. The problem with mixing content from different XML dialects in a single document is that the elements defined by one dialect may have the same name as elements defined by another. For example, both HTML and SVG have a `<title>` element. How does the user agent distinguish between the two? How do CSS styles distinguish between the two? In fact, how does the user agent tell when content is something it knows about, and not just a meaningless undefined HTML custom element or an XML file containing arbitrary element names unknown to it?

Contrary to popular opinion, the answer to this question is not "it can tell from the `DOCTYPE` declaration". DTDs were never designed with mixed content in mind, and past attempts to create mixed content DTDs are now considered to have failed. XML, and some XML dialects (SVG and HTML included), don't require a `DOCTYPE` declaration. SVG 1.2 doesn't even have one. The fact that `DOCTYPE` declarations (usually) match the content in single content-type files is merely coincidental. DTDs are for validation only, not identification of content. Any user agent that identifies XML content using its `DOCTYPE` declaration is unreliable.

The real answer to the question is that XML content tells the user agent which dialect the element names belong to by giving them explicit "namespace declarations".

### Declaring namespaces

So what do these namespace declarations look like, and where do they go? Here is a short example.

```svg
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- more tags here -->
</svg>
```

The namespace declaration is provided by the `xmlns` parameter. This parameter says that the `<svg>` element and its child elements belong to whichever XML dialect has the namespace name `http://www.w3.org/2000/svg` which is, of course, SVG. Note that the namespace declaration is only provided once on a root element (and is implied if omitted). The declaration defines the *default* namespace, so the user agent knows that all the `<svg>` element's descendants also belong to the same namespace. User agents check to see if they recognize the namespace name to determine if they know how to handle the markup.

Note that namespace names are just strings, so the fact that the SVG namespace name also looks like a URI isn't important. URIs are commonly used because they are unique, but the intention is not to "link" somewhere. (In fact, URIs are used so frequently that the term "namespace URI" is commonly used instead of "namespace name".)

#### Redeclaring the default namespace

If all the descendants of the root element are also defined to be in the default namespace, how do you mix in content from another namespace? To include the SVG namespace in HTML, you include `<svg>`. In XML, you declare a namespace. Here's a short example.

```xml
<report xmlns="https://www.acme.org/reports">
  <title>Some stats</title>
  <summary>...</summary>
  <statTable xmlns="https://www.acme.org/tables">
    <content>...</content>
    <!-- redeclaring root's default namespace -->
    <summary xmlns="https://www.acme.org/reports">...</summary>
  </statTable>
</report>
```

In this example, the `xmlns` attribute on the root `<report>` element declares the default namespace to be `https://www.acme.org/reports`, or `reports`. As a result, it and all its child elements are interpreted by the user agent as belonging to `reports`, except for the `<content>` element, which exists in the `https://www.acme.org/tables`, or `tables`, namespace. The `<summary>` element has its own `xmlns` parameter, and by redeclaring the `reports` namespace, this tells the user agent that the `<summary>` element and its descendants (unless they also redeclare an alternative namespace) belong to `reports`.

With HTML, `http://www.w3.org/1999/xhtml` is the implied namespace. With SVG, it is `http://www.w3.org/2000/svg`. MathML is `http://www.w3.org/1998/Math/MathML`.

#### Declaring namespace prefixes

XML dialects not only define their own elements, but they also declare their own parameters.

By default, parameters don't have a namespace at all. They are only known to be unique because they appear on an element that itself has a unique name. However, sometimes it is necessary to define parameters so that they can be reused on many different elements and still be considered to be the same parameter, independently of the element with which they are used. A very good example of this is the `href` parameter defined by the XLink specification. This parameter is commonly used by other XML dialects as a means to link to external resources. But how do you tell the user agent which dialect the parameter belongs to, in this case `XLink`? Consider the following example.

```xml
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="cool-script.js" type="text/javascript" />
</svg>
```

This example has the rather unusual-looking parameter `xmlns:xlink`. As you may guess from the first `xmlns` part, this is another namespace declaration. However, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". In this case, we have chosen to use the prefix `xlink` (the second part) since the prefix will be used to tell the user agent about attributes that belong to `XLink`.

As their name suggests, namespace prefixes are used to prefix parameter and element names. This is done by putting the namespace prefix and a colon before the parameter name as shown on the `<script>` element in the example above. This tells the user agent that the particular parameter belongs to the namespace assigned to the namespace prefix (`XLink`), and is a parameter that can be used with the same meaning on other elements.

Note that, in XML, it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the `xmlns:xlink` parameter in the example above is required for the `xlink:href` parameter to not cause an error. This XLink parameter is also frequently used in SVG on the `<a>`, `<use>` and `<image>` elements among others, so it's a good idea to always include the XLink declaration in your documents.

As an aside, it's useful to know that namespace prefixes can also be used for element names. This tells the user agent that the particular element (but not its children this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across markup like in the following example:

```html
<html
 lang="en"
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
  <body>
    <h1>SVG embedded inline in XHTML</h1>
    <svg:svg width="300px" height="200px">
      <svg:circle cx="150" cy="100" r="50" fill="#ff0000" />
    </svg:svg>
  </body>
</html>
```

Note that because a namespace prefix is used for the `<svg:svg>` element and its child `<svg:circle>`, it wasn't necessary to redeclare the default namespace. In general, it is better to redeclare the default namespace rather than prefix lots of elements in this way.

### Scripting in namespaced XML

Namespaces affect markup and scripting (and even CSS). If you write scripts for namespaced XML such as SVG, read on.

The DOM Level 1 recommendation was created before the original Namespaces in XML recommendation was released; therefore, DOM1 isn't namespace-aware. This causes problems for namespaced XML such as SVG. To resolve these problems, DOM Level 2 Core added namespace-aware equivalents of all the applicable DOM Level 1 methods. When scripting SVG, it is important to use the namespace-aware methods. The table below lists the DOM1 methods that shouldn't be used in SVG, along with their equivalent DOM2 counterparts that should be used instead.

| DOM1 (don't use) | DOM2 (use these instead!) |
| --- | --- |
| `createAttribute()` | `createAttributeNS()` |
| `createElement()` | `createElementNS()` |
| `getAttributeNode()` | `getAttributeNodeNS()` |
| `getAttribute()` | `getAttributeNS()` |
| `getElementsByTagName()` | `getElementsByTagNameNS()`
 (alsoadded to Element)
  |
| `getNamedItem()` | `getNamedItemNS()` |
| `hasAttribute()` | `hasAttributeNS()` |
| `removeAttribute()` | `removeAttributeNS()` |
| `removeNamedItem()` | `removeNamedItemNS()` |
| `setAttribute()` | `setAttributeNS()` |
| `setAttributeNode()` | `setAttributeNodeNS()` |
| `setNamedItem()` | `setNamedItemNS()` |

The first parameter for all the DOM2 namespace-aware methods must be the namespace name (also known as the namespace URI) of the element or parameter in question. For SVG **elements** this is `http://www.w3.org/2000/svg`. However, note carefully: the Namespaces in XML 1.1 recommendation states that the namespace name for parameters without a prefix does not have a value. In other words, although the parameters belong to the namespace of the element, you do not use the tag's namespace name. Instead, **you must use null as the namespace name for unqualified (prefixless) parameters**. So, to create an SVG `rect` *element* using `document.createElementNS()`, you must write:

```js
document.createElementNS("http://www.w3.org/2000/svg", "rect");
```

But to retrieve the value of the `x` *parameter* on an SVG `rect` element, you must write:

```js
rect.getAttributeNS(null, "x");
```

Note that this isn't the case for parameters *with* a namespace prefix (parameters that don't belong to the same XML dialect as the element). Parameters such as `xlink:href` require the namespace name that was assigned to that prefix (`http://www.w3.org/1999/xlink` for XLink). Hence to get the value of the `xlink:href` parameter of an `<a>` element in SVG you would write:

```js
elt.getAttributeNS("http://www.w3.org/1999/xlink", "href");
```

For setting parameters that have a namespace, it is recommended (but not required) that you also include their prefix in the second parameter so that the DOM can later be more easily converted back to XML (if, for instance, you want to send it back to the server). For example:

```js
elt.setAttributeNS(
  "http://www.w3.org/1999/xlink",
  "xlink:href",
  "otherdoc.svg",
);
```

As a final example, here's a demonstration of how you could dynamically create an `<image>` element using JavaScript:

```js
const SVG\_NS = "http://www.w3.org/2000/svg";
const XLink_NS = "http://www.w3.org/1999/xlink";
const image = document.createElementNS(SVG\_NS, "image");
image.setAttributeNS(null, "width", "100");
image.setAttributeNS(null, "height", "100");
image.setAttributeNS(XLink_NS, "xlink:href", "flower.png");
```

### Conclusion

For SVG, HTML, and MathML, the namespace is implied and therefore optional. It is required to declare the namespace for XML files. If you don't, user agents will not recognize the content and will show the XML markup or inform the user that there's an error in the XML.

When writing SVG, it is helpful to use a template that includes all the commonly used namespace declarations when creating new files. If you don't already have one, make one up starting with the following code:

```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
```

Even if you don't use all those namespaces in a particular document, there's no harm in including the namespace declarations. It may save you from some annoying errors if you end up adding content from one of the unused namespaces at a later date.

### A full example

For a full example see SVG: Namespaces Crash Course: Example.


Content type - SVG: Scalable Vector Graphics

Content type
============

SVG makes use of a number of data types. This article lists these types along with their syntax and descriptions of what they're used for.

Angle
-----

<angle>

Angles are specified in one of two ways. When used in the value of a property in a stylesheet, an <angle> is defined as follows:
```

angle ::= number (~"deg" | ~"grad" | ~"rad")?
```

where `deg` indicates degrees, `grad` indicates grads and `rad` indicates radians.

For properties defined in CSS2, an angle unit identifier must be provided. For angle values in SVG-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. If not provided, the angle value is assumed to be in degrees. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the angle identifier, if specified, must be in lower case.

When angles are used in an SVG attribute, <angle> is instead defined as follows:
```

angle ::= number ("deg" | "grad" | "rad")?
```

The unit identifiers in such <angle> values must be in lower case.

In the SVG DOM, <angle> values are represented using `SVGAngle` or `SVGAnimatedAngle` objects.

Anything
--------

<anything>

The basic type <anything> is a sequence of zero or more characters. Specifically:
```

anything ::= Char*
```

where Char is the production for a character, as defined in XML 1.0, section 2.2.

Clock-value
-----------

<clock-value>

Clock values have the same syntax as in SMIL Animation specification. The grammar for clock values is repeated here:
```

Clock-val         ::= Full-clock-val | Partial-clock-val
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]
```

For `Timecount` values, the default metric suffix is "`s`" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.

The following are examples of legal clock values:

* Full clock values:
    + `02:30:03` = 2 hours, 30 minutes and 3 seconds
    + `50:00:10.25` = 50 hours, 10 seconds and 250 milliseconds
* Partial clock value:
    + `02:33` = 2 minutes and 33 seconds
    + `00:10.5` = 10.5 seconds = 10 seconds and 500 milliseconds
* Timecount values:
    + `3.2h` = 3.2 hours = 3 hours and 12 minutes
    + `45min` = 45 minutes
    + `30s` = 30 seconds
    + `5ms` = 5 milliseconds
    + `12.467` = 12 seconds and 467 milliseconds
* Fractional values are just (base 10) floating point definitions of seconds. Thus:
    + `00.5s` = 500 milliseconds
    + `00:00.005` = 5 milliseconds

Color
-----

<color>

The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space. <color> applies to SVG's use of the `color` attribute and is a component of the definitions of attributes `fill`, `stroke`, `stop-color`, `flood-color`, and `lighting-color`, which also offer optional ICC-based color specifications.

SVG supports all of the syntax alternatives for <color> defined in CSS2 syntax and basic data types, and (depend on the implementation) in the future CSS Color Module Level 3.

A <color> is either a keyword or a numerical RGB specification.

In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in User preferences for colors (CSS2, section 18.2).

The format of an RGB value in hexadecimal notation is a "`#`" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (`#rgb`) is converted into six-digit form (`#rrggbb`) by replicating digits, not by adding zeros. For example, `#fb0` expands to `#ffbb00`. This ensures that white (`#ffffff`) can be specified with the short notation (`#fff`) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function, followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by "`)`". An RGB start-function is the case-insensitive string "`rgb(`", for example "`RGB(`" or "`rGb(`". For compatibility, the all-lowercase form "`rgb(`" is preferred. The integer value `255` corresponds to `100%`, and to `F` or `FF` in the hexadecimal notation: `rgb(255 255 255)` = `rgb(100% 100% 100%)` = `#FFF`. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards.
```

color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
              | "rgb("integer integer integer")"
              | "rgb("integer "%" integer "%" integer "%)"
              | color-keyword
hexdigit ::= [0-9A-Fa-f]
```

where `color-keyword` matches (case insensitively) one of the color keywords listed in CSS Color Module Level 3, or one of the system color keywords listed in User preferences for colors (CSS2, section 18.2).

The corresponding SVG DOM interface definitions for <color> are defined the one defined by CSS. SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface `SVGColor`.

Coordinate
----------

<coordinate>

A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.

Within the SVG DOM, a <coordinate> is represented as an `SVGLength` or an `SVGAnimatedLength`.

Frequency
---------

<frequency>

Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <number> immediately followed by a frequency unit identifier. The frequency unit identifiers are:

* `Hz`: Hertz
* `kHz`: kilo Hertz

Frequency values may not be negative.

FuncIRI
-------

<FuncIRI>

Functional notation for a reference. The syntax for this reference is the same as the `CSS URI`.

Integer
-------

<integer>

An <integer> is specified as an optional sign character (`+` or `-`) followed by one or more digits `0` to `9`:
```

integer ::= [+-]? [0-9]+
```

If the sign character is not present, the number is non-negative.

Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) `-2147483648` to `2147483647`.

Within the SVG DOM, an <integer> is represented as a `number` or an `SVGAnimatedInteger`.

IRI
---

<IRI>

An **I**nternationalized **R**esource **I**dentifier.

On the Internet, resources are identified using *IRIs* (Internationalized Resource Identifiers). For example, an SVG file called `someDrawing.svg` located at `http://example.com` might have the following *IRI*:
```

http://example.com/someDrawing.svg
```

An *IRI* can also address a particular element within an XML document by including an *IRI* fragment identifier as part of the *IRI*. An *IRI* which includes an *IRI* fragment identifier consists of an optional base *IRI*, followed by a "`#`" character, followed by the *IRI* fragment identifier. For example, the following *IRI* can be used to specify the element whose ID is "`Lamppost`" within file `someDrawing.svg`:
```

http://example.com/someDrawing.svg#Lamppost
```

*IRIs* are used in the `href` attribute.
 Some attributes allow both *IRIs* and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <FuncIRI> is used. This is an *IRI* delimited with a functional notation. Note: For historical reasons, the delimiters are "`url(`" and "`)`", for compatibility with the CSS specifications. The *FuncIRI* form is used in presentation attributes .

SVG makes extensive use of *IRI* references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a `<linearGradient>` element and give it an ID, as in:

```html
<linearGradient xml:id="MyGradient">...</linearGradient>
```

You then reference the linear gradient as the value of the `fill` attribute for the rectangle, as in the following example:

```html
<rect fill="url(#MyGradient)" />
```

SVG supports two types of *IRI* references:

* **local *IRI* references**, where the IRI reference does not contain an <absoluteIRI> or <relativeIRI> and thus only contains a fragment identifier (i.e., `#<elementID>` or `#xpointer(id<elementID>)`).
* **non-local *IRI* references**, where the *IRI* reference does contain an <absoluteIRI> or <relativeIRI>.
 For the full specification of IRI references in SVG, see SVG 1.1 (2nd Edition): IRI references.

Length
------

<length>

 A length is a distance measurement, given as a number along with a unit.
 The SVG2 specification aligns with CSS `<length>` data types and units for the attribute syntax and values.
 A length unit identifier must be provided and the values of the length unit identifiers are case-insensitive.
 The syntax follows the CSS `<length>` syntax:

```

length ::= <number> (<absolute-length> | <relative-length>)?
```

For SVG-specific properties defined in SVG1.1 and their corresponding presentation attributes, the unit identifiers in values are optional. If not provided, the length value represents a distance in the current user coordinate system. Length identifiers must be in lower case when used in presentation attributes for all properties whether they are defined in SVG or in CSS. This case sensitivity is relaxed in SVG2 to align with CSS.

 Note that the non-property <length> definition also allows a percentage (`%`) unit identifier.
 The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are:

* when a percentage length value represents a percentage of the viewport width or height
* when a percentage length value represents a percentage of the bounding box width or height on a given object.

In the SVG DOM, <length> values are represented using `SVGLength` or `SVGAnimatedLength` objects.

List-of-Ts
----------

<list-of-Ts>

(Where *T* is some type.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated.

White space in lists is defined as one or more of the following consecutive characters: "space" (`U+0020`), "tab" (`U+0009`), "line feed" (`U+000A`), "carriage return" (`U+000D`), and "form-feed" (`U+000C`).

The following is a template for an EBNF grammar describing the <list-of-Ts> syntax:
```

list-of-Ts ::= T
                | T, list-of-Ts
```

Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type *T*. For example, a <list-of-lengths> is represented in the SVG DOM using an `SVGLengthList` or `SVGAnimatedLengthList` object.

Name
----

<name>

A name, which is a string where a few characters of syntactic significance are disallowed.
```

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */
```

Number
------

<number>

Real numbers are specified in one of two ways. When used in a stylesheet, a <number> is defined as follows:
```

number ::= integer
            | [+-]? [0-9]* "." [0-9]+
```

This syntax is the same as the definition in CSS (CSS2, section 4.3.1).

When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:
```

number ::= integer ([Ee] integer)?
            | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?
```

Within the SVG DOM, a <number> is represented as a float, `SVGNumber` or a `SVGAnimatedNumber`.

Number-optional-number
----------------------

<number-optional-number>

A pair of <number>s, where the second <number> is optional.
```

number-optional-number ::= number
                            | number, number
```

In the SVG DOM, a <number-optional-number> is represented using a pair of `SVGAnimatedInteger` or `SVGAnimatedNumber` objects.

Opacity value
-------------

<opacity-value>

The opacity of the color or the content the current object is filled with, as a <number>. Any values outside the range `0.0` (fully transparent) to `1.0` (fully opaque) will be clamped to this range.

Paint
-----

<paint>

 The values for properties `fill` and `stroke` define the type of paint to use when filling or stroking a given graphics element.
 The available options and syntax for <paint> are:

```

paint ::= none | <color> | <url> [none | <color>]? | context-fill | context-stroke
```

The `context-fill` and `context-stroke` values allow for inheriting values in marker and use elements.

Within the SVG DOM, <paint> values are represented using `SVGPaint` objects.

Percentage
----------

<percentage>

Percentages are specified as a number followed by a "`%`" character:
```

percentage ::= number "%"
```

Note that the definition of <number> depends on whether the percentage is specified in a stylesheet or in an attribute that is not also a presentation attribute.

Percentage values are always relative to another value (for example, a length). Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.

Within the SVG DOM, a <percentage> is represented using an `SVGNumber` or `SVGAnimatedNumber` object.

Time
----

<time>

A time value is a <number> immediately followed by a time unit identifier. The time unit identifiers are:

* `ms`: milliseconds
* `s`: seconds

Transform-list
--------------

<transform-list>

A <transform-list> is used to specify a list of coordinate system transformations. A detailed description of the possible values for a <transform-list> is given in the `transform` attribute definition.

Within the SVG DOM, a <transform-list> value is represented using an `SVGTransformList` or `SVGAnimatedTransformList` object.

URL
---

URL

A **U**niform **R**esource **L**ocator.

A URL is a sequence of Unicode characters, building an address to an internal or external resource.

Before SVG 2, the more limited IRI content type was used instead, because the URL specification was not standardized before.


Linking - SVG: Scalable Vector Graphics

Linking
=======

The `target` attribute on the SVG `<a>` element doesn't work in Mozilla Firefox 1.5. When SVG documents are embedded within a parent HTML document using the tag:

page1.html:

```html
<html lang="en">
  <body>
    <p>This is a SVG button:</p>
    <object width="100" height="50" type="image/svg+xml" data="button.svg" />
  </body>
</html>
```

button.svg:

```xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <a href="page2.html" target="\_top">
    <g>
      <!-- button graphical elements here -->
    </g>
  </a>
</svg>
```

The specification says that the browser should navigate to the HTML document page2.html when the button graphics are clicked. However, `target` does not work with Mozilla's implementation of the SVG `<a>` element in Firefox 1.5. (The problem will be fixed in Firefox 2.0.)

Anyway, the resultant behavior in Moz SVG is that page2.html will be loaded into the frame where the SVG button was (i.e. you would now have page2.html embedded inside a 100x50 pixel frame inside page1.html).

To get around this, requires a little ugly JavaScript hacking:

button.svg:

```xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g onclick="top.document.href='page2.html'" cursor="pointer">
    <!-- button graphical elements here -->
  </g>
</svg>
```

Example
-------

For an example of this solution at work see www.codedread.com.


Server configuration - SVG: Scalable Vector Graphics

Server configuration
====================

See SVG Server Settings.


Applying SVG effects to HTML content - SVG: Scalable Vector Graphics

Applying SVG effects to HTML content
====================================

Modern browsers support using SVG within CSS styles to apply graphical effects to HTML content.

You may specify SVG in styles either within the same document or an external style sheet. There are 3 properties you can use: `mask`, `clip-path`, and `filter`.

**Note:** References to SVG in external files must be to the same origin as the referencing document.

Using embedded SVG
------------------

To apply an SVG effect using CSS styles, you first need to create the CSS style that references the SVG to apply.

```html
<style>
 p {
 mask: url(#my-mask);
 }
</style>
```

In the above example, all paragraphs are masked by an SVG `<mask>` with the ID `my-mask`.

### Example: Masking

For example, you can make a gradient mask for HTML content using SVG and CSS code similar to the following, inside your HTML document:

```html
<svg height="0">
  <mask id="mask-1">
    <linearGradient id="gradient-1" y2="1">
      <stop stop-color="white" offset="0" />
      <stop stop-opacity="0" offset="1" />
    </linearGradient>
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
  </mask>
</svg>
```

```css
.target {
  mask: url(#mask-1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}
```

Note that in the CSS, the mask is specified using a URL to the ID `#mask-1`, which is the ID of the SVG mask specified below it. Everything else specifies details about the gradient mask itself.

Applying the SVG effect to HTML is accomplished by assigning the `target` class defined above to an element, like this:

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
 >
  Ut enim ad minim veniam.
</p>
```

The above example would be rendered with the mask applied to it.

### Example: Clipping

This example demonstrates using SVG to clip HTML content. Notice that even the clickable areas for links are clipped.

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
 >
  Ut enim ad minim veniam.
</p>

<button onclick="toggleRadius()">Toggle radius</button>

<svg height="0">
  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  </clipPath>
</svg>
```

```css
.target {
  clip-path: url(#clipping-path-1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}
```

This establishes a clipping area made of a circle and rectangle, assigns it the ID `#clipping-path-1`, then references it in the CSS. The clip path can be assigned to any element with the `target` class.

You can make changes to the SVG in real time and see them immediately affect the rendering of the HTML. For example, you can resize the circle in the clip path established above:

```js
function toggleRadius() {
  const circle = document.getElementById("circle");
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}
```

### Example: Filtering

This demonstrates applying a filter to HTML content using SVG. It establishes several filters, which are applied with CSS to three elements in both the normal and mouse hover states.

```html
<p class="target" style="background: lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
 >
  Ut enim ad minim veniam.
</p>
```

Any SVG filter can be applied this way. For example, to apply a blur effect, you might use:

```html
<svg height="0">
  <filter id="f1">
    <feGaussianBlur stdDeviation="3" />
  </filter>
</svg>
```

You could also apply a color matrix:

```html
<svg height="0">
  <filter id="f2">
    <feColorMatrix
 values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0 0 0 1 0" />
  </filter>
</svg>
```

And some more filters:

```html
<svg height="0">
  <filter id="f3">
    <feConvolveMatrix
 filterRes="100 100"
 style="color-interpolation-filters:sRGB"
 order="3"
 kernelMatrix="0 -1 0 -1 4 -1 0 -1 0"
 preserveAlpha="true" />
  </filter>
  <filter id="f4">
    <feSpecularLighting
 surfaceScale="5"
 specularConstant="1"
 specularExponent="10"
 lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="20000" />
    </feSpecularLighting>
  </filter>
  <filter id="f5">
    <feColorMatrix
 values="1 0 0 0 0
 0 1 0 0 0
 0 0 1 0 0
 0 1 0 0 0"
 style="color-interpolation-filters:sRGB" />
  </filter>
</svg>
```

The five filters are applied using the following CSS:

```css
p.target {
  filter: url(#f3);
}
p.target:hover {
  filter: url(#f5);
}
em.target {
  filter: url(#f1);
}
em.target:hover {
  filter: url(#f4);
}
pre.target {
  filter: url(#f2);
}
pre.target:hover {
  filter: url(#f3);
}
```

### Example: Blurred Text

In order to blur text, Webkit based browsers have a (prefixed) CSS filter called blur (see also CSS filter). You can achieve the same effect using SVG filters.

```html
<p class="blur">Time to clean my glasses</p>
<svg height="0">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>
```

You can apply the SVG and the CSS filter in the same class:

```css
.blur {
  filter: url(#wherearemyglasses);
}
```

Blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.

### Example: Text Effects

SVG effects can also be used to add a more dynamic and flexible approach to adding text compared to plain HTML text.

By creating the text using SVG elements combined with HTML you can make a variety of different text effects. You can rotate the text:

```html
<svg height="60" width="200">
  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">
    Example text
  </text>
</svg>
```

Using external references
-------------------------

SVG used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the HTML document to which it's applied.

For example, if your CSS is in a file named `default.css`, it can look like this:

```css
.target {
  clip-path: url(resources.svg#c1);
}
```

The SVG is then imported from a file named `resources.svg`, using the clip path with the ID `c1`.

See also
--------

* SVG
* `clip-path` property
* `mask` property
* Shapes in clipping and masking – and how to use them


SVG Tutorial - SVG: Scalable Vector Graphics

SVG Tutorial
============

Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics.

This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at Inkscape's documentation page. Another good introduction to SVG is provided by the W3C's SVG Primer.

Introducing SVG from Scratch
----------------------------

* Introduction
* Getting Started
* Positions
* Basic Shapes
* Paths
* Fills and Strokes
* Gradients
* Patterns
* Texts
* Basic Transformations
* Clipping and masking
* Other content in SVG
* Filter effects
* SVG fonts
* SVG Image tag
* Tools for SVG
* SVG and CSS

The following topics are more advanced and hence should get their own tutorials.

Scripting SVG with JavaScript
-----------------------------

TBD

SVG filters tutorial
--------------------

TBD

Animations with SMIL in SVG
---------------------------

TBD

Creating fonts in SVG
---------------------

TBD


SVG Attribute reference - SVG: Scalable Vector Graphics

SVG Attribute reference
=======================

SVG elements can be modified using attributes that specify details about exactly how the element should be handled or rendered.

Below is a list of all of the attributes available in SVG along with links to reference documentation to help you learn which elements support them and how they work.

SVG attributes A to Z
---------------------

### A

* `accent-height`
* `accumulate`
* `additive`
* `alignment-baseline`
* `alphabetic`
* `amplitude`
* `arabic-form`
* `ascent`
* `attributeName`
* `attributeType`
* `azimuth`
### B

* `baseFrequency`
* `baseline-shift`
* `baseProfile`
* `bbox`
* `begin`
* `bias`
* `by`
### C

* `calcMode`
* `cap-height`
* `class`
* `clip`
* `clipPathUnits`
* `clip-path`
* `clip-rule`
* `color`
* `color-interpolation`
* `color-interpolation-filters`
* `color-profile`
* `color-rendering`
* `crossorigin`
* `cursor`
* `cx`
* `cy`
### D

* `d`
* `decelerate`
* `descent`
* `diffuseConstant`
* `direction`
* `display`
* `divisor`
* `dominant-baseline`
* `dur`
* `dx`
* `dy`
### E

* `edgeMode`
* `elevation`
* `enable-background`
* `end`
* `exponent`
### F

* `fill`
* `fill-opacity`
* `fill-rule`
* `filter`
* `filterUnits`
* `flood-color`
* `flood-opacity`
* `font-family`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `format`
* `from`
* `fr`
* `fx`
* `fy`
### G

* `g1`
* `g2`
* `glyph-name`
* `glyph-orientation-horizontal`
* `glyph-orientation-vertical`
* `glyphRef`
* `gradientTransform`
* `gradientUnits`
### H

* `hanging`
* `height`
* `href`
* `hreflang`
* `horiz-adv-x`
* `horiz-origin-x`
### I

* `id`
* `ideographic`
* `image-rendering`
* `in`
* `in2`
* `intercept`
### K

* `k`
* `k1`
* `k2`
* `k3`
* `k4`
* `kernelMatrix`
* `kernelUnitLength`
* `kerning`
* `keyPoints`
* `keySplines`
* `keyTimes`
### L

* `lang`
* `lengthAdjust`
* `letter-spacing`
* `lighting-color`
* `limitingConeAngle`
* `local`
### M

* `marker-end`
* `marker-mid`
* `marker-start`
* `markerHeight`
* `markerUnits`
* `markerWidth`
* `mask`
* `maskContentUnits`
* `maskUnits`
* `mathematical`
* `max`
* `media`
* `method`
* `min`
* `mode`
### N

* `name`
* `numOctaves`
### O

* `offset`
* `opacity`
* `operator`
* `order`
* `orient`
* `orientation`
* `origin`
* `overflow`
* `overline-position`
* `overline-thickness`
### P

* `panose-1`
* `paint-order`
* `path`
* `pathLength`
* `patternContentUnits`
* `patternTransform`
* `patternUnits`
* `ping`
* `pointer-events`
* `points`
* `pointsAtX`
* `pointsAtY`
* `pointsAtZ`
* `preserveAlpha`
* `preserveAspectRatio`
* `primitiveUnits`
### R

* `r`
* `radius`
* `referrerPolicy`
* `refX`
* `refY`
* `rel`
* `rendering-intent`
* `repeatCount`
* `repeatDur`
* `requiredExtensions`
* `requiredFeatures`
* `restart`
* `result`
* `rotate`
* `rx`
* `ry`
### S

* `scale`
* `seed`
* `shape-rendering`
* `slope`
* `spacing`
* `specularConstant`
* `specularExponent`
* `speed`
* `spreadMethod`
* `startOffset`
* `stdDeviation`
* `stemh`
* `stemv`
* `stitchTiles`
* `stop-color`
* `stop-opacity`
* `strikethrough-position`
* `strikethrough-thickness`
* `string`
* `stroke`
* `stroke-dasharray`
* `stroke-dashoffset`
* `stroke-linecap`
* `stroke-linejoin`
* `stroke-miterlimit`
* `stroke-opacity`
* `stroke-width`
* `style`
* `surfaceScale`
* `systemLanguage`
### T

* `tabindex`
* `tableValues`
* `target`
* `targetX`
* `targetY`
* `text-anchor`
* `text-decoration`
* `text-rendering`
* `textLength`
* `to`
* `transform`
* `transform-origin`
* `type`
### U

* `u1`
* `u2`
* `underline-position`
* `underline-thickness`
* `unicode`
* `unicode-bidi`
* `unicode-range`
* `units-per-em`
### V

* `v-alphabetic`
* `v-hanging`
* `v-ideographic`
* `v-mathematical`
* `values`
* `vector-effect`
* `version`
* `vert-adv-y`
* `vert-origin-x`
* `vert-origin-y`
* `viewBox`
* `visibility`
### W

* `width`
* `widths`
* `word-spacing`
* `writing-mode`
### X

* `x`
* `x-height`
* `x1`
* `x2`
* `xChannelSelector`
* `xlink:actuate`
* `xlink:arcrole`
* `xlink:href`
Deprecated
* `xlink:role`
* `xlink:show`
* `xlink:title`
* `xlink:type`
* `xml:base`
* `xml:lang`
* `xml:space`
### Y

* `y`
* `y1`
* `y2`
* `yChannelSelector`
### Z

* `z`
* `zoomAndPan`
SVG attributes by category
--------------------------

### Generic attributes

Core attributes

Core attributes

`id`, `lang`, `tabindex`, `xml:base`, `xml:lang`, `xml:space`

Style attributes

Style attributes

`class`, `style`

Conditional processing attributes

`requiredExtensions`, `requiredFeatures`, `systemLanguage`.

### XLink attributes

`xlink:href`
Deprecated
 , `xlink:type`, `xlink:role`, `xlink:arcrole`, `xlink:title`, `xlink:show`, `xlink:actuate`### Presentation attributes

**Note:** All SVG presentation attributes can be used as CSS properties.

* `alignment-baseline`
* `baseline-shift`
* `clip`
* `clip-path`
* `clip-rule`
* `color`
* `color-interpolation`
* `color-interpolation-filters`
* `color-profile`
* `color-rendering`
* `cursor`
* `direction`
* `display`
* `dominant-baseline`
* `enable-background`
* `fill`
* `fill-opacity`
* `fill-rule`
* `filter`
* `flood-color`
* `flood-opacity`
* `font-family`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `glyph-orientation-horizontal`
* `glyph-orientation-vertical`
* `image-rendering`
* `kerning`
* `letter-spacing`
* `lighting-color`
* `marker-end`
* `marker-mid`
* `marker-start`
* `mask`
* `opacity`
* `overflow`
* `pointer-events`
* `shape-rendering`
* `stop-color`
* `stop-opacity`
* `stroke`
* `stroke-dasharray`
* `stroke-dashoffset`
* `stroke-linecap`
* `stroke-linejoin`
* `stroke-miterlimit`
* `stroke-opacity`
* `stroke-width`
* `text-anchor`
* `text-decoration`
* `text-rendering`
* `transform`
* `transform-origin`
* `unicode-bidi`
* `vector-effect`
* `visibility`
* `word-spacing`
* `writing-mode`
### Filters attributes

Filter primitive attributes
`height`, `result`, `width`, `x`, `y`
Transfer function attributes
`type`, `tableValues`, `slope`, `intercept`, `amplitude`, `exponent`, `offset`
### Animation attributes

Animation target element attributes
`href`
Animation attribute target attributes
`attributeType`, `attributeName`
Animation timing attributes
`begin`, `dur`, `end`, `min`, `max`, `restart`, `repeatCount`, `repeatDur`, `fill`
Animation value attributes
`calcMode`, `values`, `keyTimes`, `keySplines`, `from`, `to`, `by`, `autoReverse`, `accelerate`, `decelerate`
Animation addition attributes
`additive`, `accumulate`
### Event attributes

Animation event attributes

Animation event attributes

**`onbegin`**, **`onend`**, **`onrepeat`**

Document event attributes

Document event attributes

**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**

Global event attributes

Global event attributes

**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**

Graphical event attributes

Graphical event attributes

**`onactivate`**, **`onfocusin`**, **`onfocusout`**

See also
--------

* SVG element reference
* SVG Tutorial
* SVG interface reference


SVG element reference - SVG: Scalable Vector Graphics

SVG element reference
=====================

SVG drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams. Here you'll find reference documentation for each of the SVG elements.

SVG elements A to Z
-------------------

### A

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
### C

* `<circle>`
* `<clipPath>`
### D

* `<defs>`
* `<desc>`
### E

* `<ellipse>`
### F

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDistantLight>`
* `<feDropShadow>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpecularLighting>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
### G

* `<g>`
### H

* `<hatch>`
* `<hatchpath>`
### I

* `<image>`
### L

* `<line>`
* `<linearGradient>`
### M

* `<marker>`
* `<mask>`
* `<metadata>`
* `<mpath>`
### P

* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
### R

* `<radialGradient>`
* `<rect>`
### S

* `<script>`
* `<set>`
* `<stop>`
* `<style>`
* `<svg>`
* `<switch>`
* `<symbol>`
### T

* `<text>`
* `<textPath>`
* `<title>`
* `<tspan>`
### U

* `<use>`
### V

* `<view>`

**Note:** The SVG 2 spec requires that any unknown elements be treated as `<g>` for the purpose of rendering.

SVG elements by category
------------------------

### Animation elements

`<animate>`, `<animateMotion>`, `<animateTransform>`, `<mpath>`, `<set>`### Basic shapes

`<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>`, `<rect>`### Container elements

`<a>`, `<defs>`, `<g>`, `<marker>`, `<mask>`, `<missing-glyph>`, `<pattern>`, `<svg>`, `<switch>`, `<symbol>`### Descriptive elements

`<desc>`, `<metadata>`, `<title>`### Filter primitive elements

`<feBlend>`, `<feColorMatrix>`, `<feComponentTransfer>`, `<feComposite>`, `<feConvolveMatrix>`, `<feDiffuseLighting>`, `<feDisplacementMap>`, `<feDropShadow>`, `<feFlood>`, `<feFuncA>`, `<feFuncB>`, `<feFuncG>`, `<feFuncR>`, `<feGaussianBlur>`, `<feImage>`, `<feMerge>`, `<feMergeNode>`, `<feMorphology>`, `<feOffset>`, `<feSpecularLighting>`, `<feTile>`, `<feTurbulence>`### Font elements

`<font>`, `<font-face>`, `<font-face-format>`, `<font-face-name>`, `<font-face-src>`, `<font-face-uri>`, `<hkern>`, `<vkern>`### Gradient elements

`<linearGradient>`, `<radialGradient>`, `<stop>`### Graphics elements

`<circle>`, `<ellipse>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<use>`### Graphics referencing elements

`<use>`### Light source elements

`<feDistantLight>`, `<fePointLight>`, `<feSpotLight>`### Never-rendered elements

`<clipPath>`, `<defs>`, `<hatch>`, `<linearGradient>`, `<marker>`, `<mask>`, `<metadata>`, `<pattern>`, `<radialGradient>`, `<script>`, `<style>`, `<symbol>`, `<title>`### Paint server elements

`<hatch>`, `<linearGradient>`, `<pattern>`, `<radialGradient>`, `<solidcolor>`### Renderable elements

`<a>`, `<circle>`, `<ellipse>`, `<foreignObject>`, `<g>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<svg>`, `<switch>`, `<symbol>`, `<text>`, `<textPath>`, `<tspan>`, `<use>`

**Note:** The SVG 2 spec requires that any unknown elements be treated as `<g>` for the purpose of rendering.

### Shape elements

`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`### Structural elements

`<defs>`, `<g>`, `<svg>`, `<symbol>`, `<use>`### Text content elements

`<glyph>`, `<glyphRef>`, `<textPath>`, `<text>`, `<tref>`, `<tspan>`### Text content child elements

`<textPath>`, `<tref>`, `<tspan>`### Uncategorized elements

`<clipPath>`, `<cursor>`, `<filter>`, `<foreignObject>`, `<hatchpath>`, `<script>`, `<style>`, `<view>`Obsolete and deprecated elements
--------------------------------

**Warning:** These are old SVG elements which are deprecated and should not be used. **You should never use them in new projects, and should replace them in old projects as soon as you can.** They are listed here for informational purposes only.

### C

`<cursor>`### F

`<font>`, `<font-face>`, `<font-face-format>`, `<font-face-name>`, `<font-face-src>`, `<font-face-uri>`### G

`<glyph>`, `<glyphRef>`### H

`<hkern>`### M

`<missing-glyph>`### T

`<tref>`### V

`<vkern>`See also
--------

* SVG attribute reference
* SVG Tutorial
* SVG interface reference


<feImage> - SVG: Scalable Vector Graphics

<feImage>
=========

The **`<feImage>`** SVG filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.)

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

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

Attributes
----------

### Global attributes

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

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

This element implements the `SVGFEImageElement` interface.

Example
-------

### SVG

```html
<svg
 viewBox="0 0 200 200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200"
 height="200">
  <defs>
    <filter id="image">
      <feImage href="mdn\_logo\_only\_color.png" />
    </filter>
  </defs>

  <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);" />
</svg>
```

### Result

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

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

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

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

See also
--------

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


<foreignObject> - SVG: Scalable Vector Graphics

<foreignObject>
===============

The **`<foreignObject>`** SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.

Example
-------
```

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

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
 div {
 color: white;
 font: 18px serif;
 height: 100%;
 overflow: auto;
 }
 </style>

  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
 In the context of SVG embedded in an HTML document, the XHTML
 namespace could be omitted, but it is mandatory in the
 context of an SVG document
 -->
    <div xmlns="http://www.w3.org/1999/xhtml">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
      imperdiet eros. Aliquam erat volutpat.
    </div>
  </foreignObject>
</svg>
```

Attributes
----------

`height`

 The height of the foreignObject.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`width`

 The width of the foreignObject.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`x`

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

`y`

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

**Note:** Starting with SVG2, `x`, `y`, `width`, and `height` 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, Document event attributes, Document element 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 | None |
| Permitted content | Any elements or character data |

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

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

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

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


<feTile> - SVG: Scalable Vector Graphics

<feTile>
========

The **`<feTile>`** SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a `<pattern>`.

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

This element implements the `SVGFETileElement` interface.

Example
-------

### SVG

```html
<svg
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>
    Tiling an MDN logo with the Mozilla mascot's head that is on the logo
  </title>
  <defs>
    <!-- Define the region of the filter to be the bounding box of the
 MDN logo being filtered. These parameters will create an output
 that covers the same region as the image. -->
    <filter id="tile" x="0" y="0" width="100%" height="100%">
      <!-- Create a tile from the central portion of the image from
 (50,50) to (150,150). This area is essentially the Mozilla
 mascot's head. -->
      <feTile in="SourceGraphic" x="50" y="50" width="100" height="100" />

      <!-- Without specifying a region, feTile defaults to the region
 of the filter. Without specifying an "in" parameter, the default
 is the result of the previous primitive. So this second feTile
 will tile the entire filter region with the mascot's head. -->
      <feTile />
    </filter>
  </defs>

  <!-- Use the MDN logo as input to the filter -->
  <image
 href="mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%"
 style="filter:url(#tile);" />
</svg>
```

### Result

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

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

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


<animateMotion> - SVG: Scalable Vector Graphics

<animateMotion>
===============

The SVG **`<animateMotion>`** element provides a way to define how an element moves along a motion path.

**Note:** To reuse an existing path, it will be necessary to use an `<mpath>` element inside the `<animateMotion>` element instead of the `path` attribute.

Example
-------
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="lightgrey"
 d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
 dur="10s"
 repeatCount="indefinite"
 path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>
```

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

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

Attributes
----------

`keyPoints`

 This attribute indicate, in the range [0,1], how far is the object along the path for each `keyTimes` associated values.
 *Value type*: **<number>**\*; *Default value*: none; *Animatable*: **no**

`path`

 This attribute defines the path of the motion, using the same syntax as the `d` attribute.
 *Value type*: **<string>**; *Default value*: none; *Animatable*: **no**

`rotate`

 This attribute defines a rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation.
 *Value type*: **<number>**|`auto`|`auto-reverse`; *Default value*: `0`; *Animatable*: **no**

**Note:** For `<animateMotion>`, the default value for the `calcMode` attribute is `paced`.

### 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 `SVGAnimateMotionElement` interface.

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

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

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

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

See also
--------

* `<mpath>`


<filter> - SVG: Scalable Vector Graphics

<filter>
========

The **`<filter>`** SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the `filter` attribute on SVG elements, or the `filter` CSS property for SVG/HTML elements.

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

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

Attributes
----------

### Global attributes

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

* `x`
* `y`
* `width`
* `height`
* `filterUnits`
* `primitiveUnits`
* `xlink:href`
Deprecated
DOM Interface
-------------

This element implements the `SVGFilterElement` interface.

Example
-------

### SVG

```html
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
  <filter id="blurMe">
    <feGaussianBlur stdDeviation="5" />
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
```

### Result

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

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

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

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

See also
--------

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


<feFuncA> - SVG: Scalable Vector Graphics

<feFuncA>
=========

The **`<feFuncA>`** SVG filter primitive defines the transfer function for the alpha component of the input graphic of its parent `<feComponentTransfer>` element.

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

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

Attributes
----------

### Global attributes

* Core attributes
* Transfer function attributes
### Specific attributes

None.

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

This element implements the `SVGFEFuncAElement` interface.

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

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

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

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

See also
--------

* `<filter>`
* `<animate>`
* `<set>`
* `<feComponentTransfer>`
* `<feFuncR>`
* `<feFuncB>`
* `<feFuncG>`
* SVG tutorial: Filter effects


<feGaussianBlur> - SVG: Scalable Vector Graphics

<feGaussianBlur>
================

The **`<feGaussianBlur>`** SVG filter primitive blurs the input image by the amount specified in `stdDeviation`, which defines the bell-curve.

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

This element implements the `SVGFEGaussianBlurElement` interface.

Example
-------

### Simple example

#### SVG

```html
<svg
 width="230"
 height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
```

#### Result

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

### Drop shadow example

#### SVG

```html
<svg
 width="120"
 height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
    <feOffset dx="2" dy="4" />
    <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)" />
</svg>
```

#### Result

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

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

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

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


<feOffset> - SVG: Scalable Vector Graphics

<feOffset>
==========

The **`<feOffset>`** SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the `dx` and `dy` attributes.

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

This element implements the `SVGFEOffsetElement` interface.

Example
-------

### SVG

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="offset" width="180" height="180">
      <feOffset in="SourceGraphic" dx="60" dy="60" />
    </filter>
  </defs>

  <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" />
  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 stroke="black"
 fill="green"
 filter="url(#offset)" />
</svg>
```

### Result

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

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

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>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects


<defs> - SVG: Scalable Vector Graphics

<defs>
======

The **`<defs>`** element is used to store graphical objects that will be used at a later time. Objects created inside a `<defs>` element are not rendered directly. To display them you have to reference them (with a `<use>` element for example).

Graphical objects can be referenced from anywhere, however, defining these objects inside of a `<defs>` element promotes understandability of the SVG content and is beneficial to the overall accessibility of the document.

Example
-------
```

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

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" />

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>
```

Attributes
----------

### Global attributes

Core Attributes

Most notably: `id` `lang`

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`

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 # Head |

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

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


<polygon> - SVG: Scalable Vector Graphics

<polygon>
=========

The **`<polygon>`** element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.

For open shapes, see the `<polyline>` element.

Example
-------
```

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

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

  <!-- Example of the same polygon shape with stroke and no fill -->
  <polygon 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 polygon.
 *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 # PolygonElement |

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>`
    + `<polyline>`
    + `<rect>`


<animateTransform> - SVG: Scalable Vector Graphics

<animateTransform>
==================

The `animateTransform` element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.

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

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

Example
-------

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
 attributeName="transform"
 attributeType="XML"
 type="rotate"
 from="0 60 70"
 to="360 60 70"
 dur="10s"
 repeatCount="indefinite" />
  </polygon>
</svg>
```

Attributes
----------

### Global attributes

* Conditional processing attributes
* Core attributes
* Animation event attributes
* Xlink attributes
* Animation attribute target attributes
* Animation timing attributes
* Animation value attributes
* Animation addition attributes
### Specific attributes

* `by`
* `from`
* `to`
* `type`
DOM Interface
-------------

This element implements the `SVGAnimateTransformElement` interface.

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

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

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

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


<cursor> - SVG: Scalable Vector Graphics

<cursor>
========

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

**Note:** The CSS `cursor` property should be used instead of this element.

The **`<cursor>`** SVG element can be used to define a platform-independent custom cursor. A recommended approach for defining a platform-independent custom cursor is to create a PNG image and define a `cursor` element that references the PNG image and identifies the exact position within the image which is the pointer position (i.e., the hot spot).

The PNG format is recommended because it supports the ability to define a transparency mask via an alpha channel. If a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel color to indicate transparency). If the transparency mask can be determined, the mask defines the shape of the cursor; otherwise, the cursor is an opaque rectangle. Typically, the other pixel information (e.g., the R, G and B channels) defines the colors for those parts of the cursor which are not masked out. Note that cursors usually contain at least two colors so that the cursor can be visible over most backgrounds.

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

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

Attributes
----------

### Global attributes

* Conditional processing attributes
* Core attributes
* Xlink attributes
### Specific attributes

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

This element implements the `SVGCursorElement` interface.

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

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

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

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


<marker> - SVG: Scalable Vector Graphics

<marker>
========

The **`<marker>`** element defines a graphic used for drawing arrowheads or polymarkers on a given `<path>`, `<line>`, `<polyline>` or `<polygon>` element.

Markers can be attached to shapes using the `marker-start`, `marker-mid`, and `marker-end` properties.

Examples
--------

### Drawing arrowheads

 The following example shows how to draw an arrowhead on a line and on a curved path.
 For the curved path, an arrowhead is drawn at each point with a `marker-mid` marker.
```

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

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- A marker to be used as an arrowhead -->
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <!-- A line with a marker -->
  <line
 x1="10"
 y1="10"
 x2="90"
 y2="90"
 stroke="black"
 marker-end="url(#arrow)" />

  <!-- A curved path with markers -->
  <path
 d="M 110 10
 C 120 20, 130 20, 140 10
 C 150 0, 160 0, 170 10
 C 180 20, 190 20, 200 10"
 stroke="black"
 fill="none"
 marker-start="url(#arrow)"
 marker-mid="url(#arrow)"
 marker-end="url(#arrow)" />
</svg>
```

### Drawing polymarkers
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Arrowhead marker definition -->
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <!-- Dot marker definition -->
    <marker
 id="dot"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="5"
 markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>

  <!-- Coordinate axes with an arrowhead in both directions -->
  <polyline
 points="10,10 10,90 90,90"
 fill="none"
 stroke="black"
 marker-start="url(#arrow)"
 marker-end="url(#arrow)" />

  <!-- Data line with polymarkers -->
  <polyline
 points="15,80 29,50 43,60 57,30 71,40 85,15"
 fill="none"
 stroke="grey"
 marker-start="url(#dot)"
 marker-mid="url(#dot)"
 marker-end="url(#dot)" />
</svg>
```

### Using context fill and stroke

The following example shows how to use the `context-fill` and `context-stroke` values to make a marker use the same fill and stroke as the shape it is attached to.

```html
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <marker
 id="circle"
 markerWidth="6"
 markerHeight="6"
 refX="3"
 refY="3"
 markerUnits="strokeWidth">
    <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
  </marker>

  <style>
 path {
 marker: url(#circle);
 }
 </style>

  <path d="M 10,10 30,10 h 10" stroke="black" />
  <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
  <path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
  <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>
```

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

Attributes
----------

`markerHeight`

 This attribute defines the height of the marker viewport.
 *Value type*: **<length>** ; *Default value*: `3`; *Animatable*: **yes**

`markerUnits`

 This attribute defines the coordinate system for the attributes `markerWidth`, `markerHeight` and the contents of the `<marker>`.
 *Value type*: `userSpaceOnUse`|`strokeWidth` ; *Default value*: `strokeWidth`; *Animatable*: **yes**

`markerWidth`

 This attribute defines the width of the marker viewport.
 *Value type*: **<length>** ; *Default value*: `3`; *Animatable*: **yes**

`orient`

 This attribute defines the orientation of the marker relative to the shape it is attached to.
 *Value type*: `auto`|`auto-start-reverse`|**<angle>** ; *Default value*: `0`; *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 defines the x coordinate for the reference point of the marker.
 *Value type*: `left`|`center`|`right`|**<coordinate>** ; *Default value*: `0`; *Animatable*: **yes**

`refY`

 This attribute defines the y coordinate for the reference point of the marker.
 *Value type*: `top`|`center`|`bottom`|**<coordinate>** ; *Default value*: `0`; *Animatable*: **yes**

`viewBox`

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

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

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

Most notably: `requiredExtensions`, `systemLanguage`

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 |
| 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 # MarkerElement |

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

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

See also
--------

* Related marker properties: `marker-start`, `marker-mid`, and `marker-end`


<feMorphology> - SVG: Scalable Vector Graphics

<feMorphology>
==============

The **`<feMorphology>`** SVG filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.

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

This element implements the `SVGFEMorphologyElement` interface.

Examples
--------

### Filtering SVG content

#### SVG

```html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
  <text y="1em">Normal text</text>
  <text id="thin" y="2em">Thinned text</text>
  <text id="thick" y="3em">Fattened text</text>
</svg>
```

#### CSS

```css
text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}
```

### Filtering HTML content

#### SVG

```html
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
</svg>

<p>Normal text</p>
<p id="thin">Thinned text</p>
<p id="thick">Fattened text</p>
```

#### CSS

```css
p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}
```

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

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

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>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects