<svg> - SVG: Scalable Vector Graphics

<svg>
=====

The `svg` element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.

**Note:** The `xmlns` attribute is only required on the outermost `svg` element of *SVG documents*, or inside HTML documents with XML serialization. It is unnecessary for inner `svg` elements or inside HTML documents with HTML serialization.

Examples
--------

### Nested `svg` element

This example shows that nested `svg` elements do not need the `xmlns` attribute.
```

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

```html
<svg
 viewBox="0 0 300 100"
 xmlns="http://www.w3.org/2000/svg"
 stroke="red"
 fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>
```

### Using dynamic viewport units

In this example, the `height` and `width` attributes on the `svg` element are set using the dynamic viewport value `60vmin`, equivalent to 60% of the viewport's width or height, whichever is smaller.
```

<div class="resizer">
  <iframe
    class="resized"
    srcdoc="
```

```html
<svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='60vmin' width='60vmin'>
  <rect x='0' y='0' width='50%' height='50%' fill='tomato' opacity='0.75' />
  <rect x='25%' y='25%' width='50%' height='50%' fill='slategrey' opacity='0.75' />
  <rect x='50%' y='50%' width='50%' height='50%' fill='olive' opacity='0.75' />
  <rect x='0' y='0' width='100%' height='100%' stroke='cadetblue' stroke-width='0.5%' fill='none' />
</svg>
```

```
  "></iframe>
</div>
```

```
.resizer {
  display: flex;
  margin: 1rem;
  padding: 0;
  resize: both;
  overflow: hidden;
  border: 5px dotted red;
  height: 400px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
}
```

To change the iframe's dimensions try resizing the dotted red border from bottom right corner.

Attributes
----------

`baseProfile`
Deprecated

 The minimum SVG language profile that the document requires.
 *Value type*: **<string>** ; *Default value*: none; *Animatable*: **no**

`height`

 The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`preserveAspectRatio`

 How the `svg` fragment must be deformed if it is displayed 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**

`version`
Deprecated

 Which version of SVG is used for the inner content of the element.
 *Value type*: **<number>** ; *Default value*: none; *Animatable*: **no**

`viewBox`

 The SVG viewport coordinates for the current SVG fragment.
 *Value type*: **<list-of-numbers>** ; *Default value*: none; *Animatable*: **yes**

`width`

 The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`x`

 The displayed x coordinate of the svg container. No effect on outermost `svg` elements.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`y`

 The displayed y coordinate of the svg container. No effect on outermost `svg` elements.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

**Note:** Starting with SVG2, `x`, `y`, `width`, and `height` are *Geometry Properties*, meaning these attributes can also be used as CSS properties.

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

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

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


<switch> - SVG: Scalable Vector Graphics

<switch>
========

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

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

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

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

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

Attributes
----------

### Global attributes

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

This element implements the `SVGSwitchElement` interface.

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

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

### HTML

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

### Result

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

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

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

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


<fePointLight> - SVG: Scalable Vector Graphics

<fePointLight>
==============

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

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

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

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

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

This element implements the `SVGFEPointLightElement` interface.

Example
-------

### SVG

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

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

### Result

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

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

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

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

See also
--------

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


<use> - SVG: Scalable Vector Graphics

<use>
=====

 The **`<use>`** element takes nodes from within the SVG document, and duplicates them somewhere else.
 The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the `use` element is, much like cloned template elements.

Example
-------

 The following example shows how to use the `use` element to draw a circle with a different fill and stroke color.
 In the last circle, `stroke="red"` will be ignored because stroke was already set on `myCircle`.
```

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

```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>
```

Attributes
----------

`href`

The URL to an element/fragment that needs to be duplicated. See Usage notes for details on common pitfalls.
*Value type*: **`<URL>`** ; *Default value*: none; *Animatable*: **yes**

`xlink:href`
Deprecated

An `<IRI>` reference to an element/fragment that needs to be duplicated. If both `href` and `xlink:href` are present, the value given by `href` is used.
*Value type*: **`<IRI>`** ; *Default value*: none; *Animatable*: **yes**

`x`

The x coordinate of an additional final offset transformation applied to the `<use>` element.
*Value type*: **`<coordinate>`** ; *Default value*: `0`; *Animatable*: **yes**

`y`

The y coordinate of an additional final offset transformation applied to the `<use>` element.
*Value type*: **`<coordinate>`** ; *Default value*: `0`; *Animatable*: **yes**

`width`

The width of the use element.
*Value type*: **`<length>`** ; *Default value*: `0`; *Animatable*: **yes**

`height`

The height of the use element.
*Value type*: **`<length>`** ; *Default value*: `0`; *Animatable*: **yes**

**Note:** `width`, and `height` have no effect on `use` elements, unless the element referenced has a viewBox - i.e. they only have an effect when `use` refers to a `svg` or `symbol` element.

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

Presentation Attributes

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

ARIA Attributes

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

XLink Attributes
`xlink:href`
Deprecated
, `xlink:title`
Usage notes
-----------

 Most attributes on `use` are ignored if the corresponding attribute is already defined on the element *referenced* by `use`. (This differs from how CSS style attributes override those set 'earlier' in the cascade).
 **Only** the attributes `x`, `y`, `width`, `height` and `href` on the `use` element will or may have some effect, described later, if the referenced element has already defined the corresponding attribute. However, *any other attributes* not set on the referenced element **will** be applied to the `use` element.

Since the cloned nodes are not exposed, care must be taken when using CSS to style a `use` element and its cloned descendants. CSS properties are not guaranteed to be inherited by the cloned DOM unless you explicitly request them using CSS inheritance.

For security reasons, browsers may apply the same-origin policy on `use` elements and may refuse to load a cross-origin URL in the `href` attribute. There is currently no defined way to set a cross-origin policy for `use` elements.

**Warning:** Loading resources with data URIs in the `href` attribute is deprecated for security reasons.
 This applies to `<use href="data:...` and also when setting `href` by using the `set` or `setAttribute` method.
 See "Load from data: URI" in the Browser compatibility table to check support in different browser versions.

**Warning:** Since SVG 2, the `xlink:href` attribute is deprecated in favor of `href`. See `xlink:href` page for more information.

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

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

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

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

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


<image> - SVG: Scalable Vector Graphics

<image>
=======

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

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

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

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

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

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

Attributes
----------

### Global attributes

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

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

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

Example
-------

Basic rendering of a PNG image in SVG:

### SVG

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

### Result

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

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

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

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


<feDisplacementMap> - SVG: Scalable Vector Graphics

<feDisplacementMap>
===================

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

The formula for the transformation looks like this:

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

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

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

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

Attributes
----------

### Global attributes

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

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

This element implements the `SVGFEDisplacementMapElement` interface.

Example
-------

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

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

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

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

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

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

See also
--------

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


<feFuncB> - SVG: Scalable Vector Graphics

<feFuncB>
=========

The **`<feFuncB>`** SVG filter primitive defines the transfer function for the blue 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 `SVGFEFuncBElement` interface.

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

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

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

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

See also
--------

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


<set> - SVG: Scalable Vector Graphics

<set>
=====

The SVG **`<set>`** element provides a simple means of just setting the value of an attribute for a specified duration.

It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. For attributes that can be reasonably be interpolated, the `<animate>` is usually preferred.

**Note:** The `<set>` element is non-additive. The `additive` and `accumulate` attributes are not allowed, and will be ignored if specified.

Example
-------
```

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

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
 rect {
 cursor: pointer;
 }
 .round {
 rx: 5px;
 fill: green;
 }
 </style>

  <rect id="me" width="10" height="10">
    <set attributeName="class" to="round" begin="me.click" dur="2s" />
  </rect>
</svg>
```

Attributes
----------

`to`

 This attribute defines the value to be applied to the target attribute for the duration of the animation. The value must match the requirements of the target attribute.
 *Value type*: **<anything>**; *Default value*: none; *Animatable*: **no**

### Animation Attributes

Animation timing attributes
`begin`, `dur`, `end`, `min`, `max`, `restart`, `repeatCount`, `repeatDur`, `fill`
Other Animation attributes

Most notably: `attributeName`

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

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

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

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

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

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

See also
--------

* `<animate>`


<tspan> - SVG: Scalable Vector Graphics

<tspan>
=======

The SVG **`<tspan>`** element defines a subtext within a `<text>` element or another `<tspan>` element. It allows for adjustment of the style and/or position of that subtext as needed.

Example
-------
```

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

```html
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
  <style>
 text {
 font: italic 12px serif;
 }
 tspan {
 font: bold 10px sans-serif;
 fill: red;
 }
 </style>

  <text x="10" y="30" class="small">
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>
```

Attributes
----------

`x`

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

`y`

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

`dx`

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

`dy`

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

`rotate`

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

`lengthAdjust`

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

`textLength`

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

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

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

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `dominant-baseline`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `text-anchor`, `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 | Text content element, Text content child element |
| Permitted content | Character data and any number of the following elements, in any order:Descriptive elements`<a>`, `<animate>`, `<set>`, `<tref>`, `<tspan>` |

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

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

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

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


<feDropShadow> - SVG: Scalable Vector Graphics

<feDropShadow>
==============

The SVG **`<feDropShadow>`** filter primitive creates a drop shadow of the input image. It can only be used inside a `<filter>` element.

**Note:** The drop shadow color and opacity can be changed by using the `flood-color` and `flood-opacity` presentation attributes.

Example
-------
```

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

```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
    </filter>
    <filter id="shadow3">
      <feDropShadow
 dx="-0.8"
 dy="-0.8"
 stdDeviation="0"
 flood-color="pink"
 flood-opacity="0.5" />
    </filter>
  </defs>

  <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />

  <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);" />

  <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
</svg>
```

Attributes
----------

`dx`

 This attribute defines the x offset of the drop shadow.
 *Value type*: **<number>**; *Default value*: `2`; *Animatable*: **yes**

`dy`

 This attribute defines the y offset of the drop shadow.
 *Value type*: **<number>**; *Default value*: `2`; *Animatable*: **yes**

`stdDeviation`

 This attribute defines the standard deviation for the blur operation in the drop shadow.
 *Value type*: **<number>**; *Default value*: `2`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Filter primitive attributes
`height`, `in`, `result`, `x`, `y`, `width`
Presentation Attributes

Most notably: `flood-color`, `flood-opacity`

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

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

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

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

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

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


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

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

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

The **`<font-face-src>`** SVG element corresponds to the `src` descriptor in CSS `@font-face` rules. It serves as container for `<font-face-name>`, pointing to locally installed copies of this font, and `<font-face-uri>`, utilizing remotely defined fonts.

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

|  |  |
| --- | --- |
| Categories | Font element |
| Permitted content | One or more of the following elements, in any order:`<font-face-name>`, `<font-face-uri>` |

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

None.

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

This element implements the `SVGFontFaceSrcElement` interface.

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

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

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

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

See also
--------

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


<feDistantLight> - SVG: Scalable Vector Graphics

<feDistantLight>
================

The **`<feDistantLight>`** filter primitive defines a distant light source that can be used within a lighting filter primitive: `<feDiffuseLighting>` or `<feSpecularLighting>`.

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

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

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

* `azimuth`
* `elevation`
DOM Interface
-------------

This element implements the `SVGFEDistantLightElement` interface.

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

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

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

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

See also
--------

* `<filter>`
* `<animate>`
* `<set>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
* `<fePointLight>`
* `<feSpotLight>`
* SVG tutorial: Filter effects


<feFuncG> - SVG: Scalable Vector Graphics

<feFuncG>
=========

The **`<feFuncG>`** SVG filter primitive defines the transfer function for the green 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 `SVGFEFuncGElement` interface.

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

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

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

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

See also
--------

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


<pattern> - SVG: Scalable Vector Graphics

<pattern>
=========

The **`<pattern>`** element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.

The `<pattern>` is referenced by the `fill` and/or `stroke` attributes on other graphics elements to fill or stroke those elements with the referenced pattern.

Example
-------
```

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

```html
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

  <circle cx="50" cy="50" r="50" fill="url(#star)" />
  <circle
 cx="180"
 cy="50"
 r="40"
 fill="none"
 stroke-width="20"
 stroke="url(#star)" />
</svg>
```

Attributes
----------

`height`

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

`href`

 This attribute reference a template pattern that provides default values for the `<pattern>` attributes.
 *Value type*: **<URL>**; *Default value*: *none*; *Animatable*: **yes**

`patternContentUnits`

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

**Note:** This attribute has no effect if a `viewBox` attribute is specified on the `<pattern>` element.

`patternTransform`

 This attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.
 *Value type*: **<transform-list>**; *Default value*: *none*; *Animatable*: **yes**

`patternUnits`

 This attribute defines the coordinate system for attributes `x`, `y`, `width`, and `height`.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox`; *Default value*: `objectBoundingBox`; *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**

`viewBox`

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

`width`

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

`x`

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

`xlink:href`
Deprecated

 This attribute references a template pattern that provides default values for the `<pattern>` attributes.
 *Value type*: **<URL>**; *Default value*: *none*; *Animatable*: **yes**

**Note:** For browsers implementing `href`, if both `href` and `xlink:href` are set, `xlink:href` will be ignored and only `href` will be used.

`y`

 This attribute determines the y coordinate shift of the pattern tile.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *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`

XLink Attributes

Most notably: `xlink:title`

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

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

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


<linearGradient> - SVG: Scalable Vector Graphics

<linearGradient>
================

The **`<linearGradient>`** element lets authors define linear gradients to apply to other SVG elements.

Example
-------
```

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

```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

Attributes
----------

`gradientUnits`

 This attribute defines the coordinate system for attributes `x1`, `x2`, `y1`, `y2`
*Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `objectBoundingBox`; *Animatable*: **yes**

`gradientTransform`

 This attribute provides additional transformation to the gradient coordinate system.
 *Value type*: **<transform-list>** ; *Default value*: *identity transform*; *Animatable*: **yes**

`href`

 This attribute defines a reference to another `<linearGradient>` element that will be used as a template.
 *Value type*: **<URL>** ; *Default value*: none; *Animatable*: **yes**

`spreadMethod`

 This attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.
 *Value type*: `pad`|`reflect`|`repeat` ; *Default value*: `pad`; *Animatable*: **yes**

`x1`

 This attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn.
 *Value type*: `<length-percentage>` | `<number>`; *Default value*: `0%`; *Animatable*: **yes**

`x2`

 This attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn.
 *Value type*: `<length-percentage>` | `<number>`; *Default value*: `100%`; *Animatable*: **yes**

`xlink:href`
Deprecated

 An <IRI> reference to another `<linearGradient>` element that will be used as a template.
 *Value type*: **<IRI>** ; *Default value*: none; *Animatable*: **yes**

`y1`

 This attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn.
 *Value type*: `<length-percentage>` | `<number>`; *Default value*: `0%`; *Animatable*: **yes**

`y2`

 This attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn.
 *Value type*: `<length-percentage>` | `<number>`; *Default value*: `0%`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

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`

XLink Attributes
`xlink:href`
Deprecated
, `xlink:title`
Usage notes
-----------

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

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

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

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

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


<hkern> - SVG: Scalable Vector Graphics

<hkern>
=======

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

The **`<hkern>`** SVG element allows to fine-tweak the horizontal distance between two glyphs. This process is known as kerning.

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

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

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

* `u1`
Deprecated
* `g1`
Deprecated
* `u2`
Deprecated
* `g2`
Deprecated
* `k`
Deprecated
DOM Interface
-------------

This element implements the `SVGHKernElement` interface.

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

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

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

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

See also
--------

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


<metadata> - SVG: Scalable Vector Graphics

<metadata>
==========

The **`<metadata>`** SVG element adds metadata to SVG content. Metadata is structured information about data. The contents of `<metadata>` should be elements from other XML namespaces such as RDF, FOAF, etc.

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

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

Attributes
----------

### Global attributes

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

None.

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

This element implements the `SVGMetadataElement` interface.

Example
-------

```html
<svg
 width="400"
 viewBox="0 0 400 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <metadata>
    <rdf:RDF
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-RDF#">
      <rdf:Description about="#CableA">
        <connect:ends rdf:resource="#socket1" />
        <connect:ends rdf:resource="#ComputerA" />
      </rdf:Description>
      <rdf:Description about="#CableB">
        <connect:ends rdf:resource="#socket2" />
        <connect:ends rdf:resource="#ComputerB" />
      </rdf:Description>
      <rdf:Description about="#CableN">
        <connect:ends rdf:resource="#socket5" />
        <connect:ends>Everything</connect:ends>
      </rdf:Description>
      <rdf:Description about="#Hub">
        <connect:ends rdf:resource="#socket1" />
        <connect:ends rdf:resource="#socket2" />
        <connect:ends rdf:resource="#socket3" />
        <connect:ends rdf:resource="#socket4" />
        <connect:ends rdf:resource="#socket5" />
      </rdf:Description>
    </rdf:RDF>
  </metadata>
  <title>Network</title>
  <desc>An example of a computer network based on a hub.</desc>

  <style>
 svg {
 /\* Default styles to be inherited \*/
 fill: white;
 stroke: black;
 }
 text {
 fill: black;
 stroke: none;
 }
 path {
 fill: none;
 }
 </style>

  <!-- Define symbols used in the SVG -->
  <defs>
    <!-- hubPlug symbol. Used by hub symbol -->
    <symbol id="hubPlug">
      <desc>A 10BaseT/100baseTX socket</desc>
      <path d="M0,10 h5 v-9 h12 v9 h5 v16 h-22 z" />
    </symbol>

    <!-- hub symbol -->
    <symbol id="hub">
      <desc>A typical 10BaseT/100BaseTX network hub</desc>
      <text x="0" y="15">Hub</text>
      <g transform="translate(0 20)">
        <rect width="253" height="84" />
        <rect width="229" height="44" x="12" y="10" />
        <circle fill="red" cx="227" cy="71" r="7" />
        <!-- five groups each using the defined socket -->
        <g id="sock1et" transform="translate(25 20)">
          <title>Socket 1</title>
          <use href="#hubPlug" />
        </g>
        <g id="socket2" transform="translate(70 20)">
          <title>Socket 2</title>
          <use href="#hubPlug" />
        </g>
        <g id="socket3" transform="translate(115 20)">
          <title>Socket 3</title>
          <use href="#hubPlug" />
        </g>
        <g id="socket4" transform="translate(160 20)">
          <title>Socket 4</title>
          <use href="#hubPlug" />
        </g>
        <g id="socket5" transform="translate(205 20)">
          <title>Socket 5</title>
          <use href="#hubPlug" />
        </g>
      </g>
    </symbol>

    <!-- computer symbol -->
    <symbol id="computer">
      <desc>A common desktop PC</desc>
      <g id="monitorStand" transform="translate(40 121)">
        <title>Monitor stand</title>
        <desc>
          One of those cool swivelling monitor stands that sit under the monitor
        </desc>
        <path d="m0,0 S 10 10 40 12" />
        <path d="m80,0 S 70 10 40 12" />
        <path d="m0,20 L 10 10 S 40 12 70 10 L 80 20z" />
      </g>
      <g id="monitor">
        <title>Monitor</title>
        <desc>A very fancy monitor</desc>
        <rect width="160" height="120" />
        <rect fill="lightgrey" width="138" height="95" x="11" y="12" />
      </g>
      <g id="processor" transform="translate(0 142)">
        <title>The computer</title>
        <desc>A desktop computer - broad flat box style</desc>
        <rect width="160" height="60" />
        <g id="discDrive" transform="translate(70 8)">
          <title>disc drive</title>
          <desc>A built-in disc drive</desc>
          <rect width="58" height="3" x="12" y="8" />
          <rect width="8" height="2" x="12" y="15" />
        </g>
        <circle cx="135" cy="40" r="5" />
      </g>
    </symbol>
  </defs>

  <text x="0" y="15">Network</text>

  <!-- Use the hub symbol. -->
  <g id="Hub" transform="translate(80 45)">
    <title>Hub</title>
    <use href="#hub" transform="scale(0.75)" />
  </g>

  <!-- Use the computer symbol. -->
  <g id="ComputerA" transform="translate(20 170)">
    <title>Computer A</title>
    <use href="#computer" transform="scale(0.5)" />
  </g>

  <!-- Use the same computer symbol. -->
  <g id="ComputerB" transform="translate(300 170)">
    <title>Computer B</title>
    <use href="#computer" transform="scale(0.5)" />
  </g>

  <!-- Draw Cable A. -->
  <g id="CableA" transform="translate(107 88)">
    <title>Cable A</title>
    <desc>10BaseT twisted pair cable</desc>
    <path d="M0,0c100,140 50,140 -8,160" />
  </g>

  <!-- Draw Cable B. -->
  <g id="CableB" transform="translate(142 88)">
    <title>Cable B</title>
    <desc>10BaseT twisted pair cable</desc>
    <path d="M0,0c100,180 110,160 159,160" />
  </g>

  <!-- Draw Cable N. -->
  <g id="CableN" transform="translate(242 88)">
    <title>Cable N</title>
    <desc>10BaseT twisted pair cable</desc>
    <path d="M0,0c0,-70 20,-50 60,-50" />
  </g>
</svg>
```

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

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

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

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


<vkern> - SVG: Scalable Vector Graphics

<vkern>
=======

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

The **`<vkern>`** SVG element allows to fine-tweak the vertical distance between two glyphs in top-to-bottom fonts. This process is known as kerning.

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

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

Attributes
----------

### Global attributes

* Core attributes
### Specific attributes

* `u1`
Deprecated
* `g1`
Deprecated
* `u2`
Deprecated
* `g2`
Deprecated
* `k`
Deprecated
DOM Interface
-------------

This element implements the `SVGVKernElement` interface.

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

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

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

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

See also
--------

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


<style> - SVG: Scalable Vector Graphics

<style>
=======

The SVG **`<style>`** element allows style sheets to be embedded directly within SVG content.

**Note:** SVG's `style` element has the same attributes as the corresponding element in HTML (see HTML's `<style>` element).

Example
-------
```

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

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
 circle {
 fill: gold;
 stroke: maroon;
 stroke-width: 2px;
 }
 </style>

  <circle cx="5" cy="5" r="4" />
</svg>
```

Attributes
----------

`type`

 This attribute defines type of the style sheet language to use as a media type string.
 *Value type*: **<string>**; *Default value*: `text/css`; *Animatable*: **no**

`media`

 This attribute defines to which `media` the style applies.
 *Value type*: **`<string>`**; *Default value*: `all`; *Animatable*: **no**

`title`

 This attribute the title of the style sheet which can be used to switch between alternate style sheets.
 *Value type*: **`<string>`**; *Default value*: *none*; *Animatable*: **no**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

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

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

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

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

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

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

See also
--------

* <style> element in HTML


<feDiffuseLighting> - SVG: Scalable Vector Graphics

<feDiffuseLighting>
===================

The **`<feDiffuseLighting>`** SVG filter primitive lights an image using the alpha channel as a bump map. The resulting image, which is an RGBA opaque image, depends on the light color, light position and surface geometry of the input bump map.

The light map produced by this filter primitive can be combined with a texture image using the multiply term of the `arithmetic` operator of the `<feComposite>` filter primitive. Multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.

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

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

Attributes
----------

### Global attributes

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

* `in`
* `surfaceScale`
* `diffuseConstant`
* `kernelUnitLength`
DOM Interface
-------------

This element implements the `SVGFEDiffuseLightingElement` interface.

Example
-------

The following example show the effect of the `<feDiffuseLighting>` element on a circle with each light source available. Each time, the light comes from the upper left corner.

```html
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
  <!-- No light is applied -->
  <text text-anchor="middle" x="60" y="22">No Light</text>
  <circle cx="60" cy="80" r="50" fill="green" />

  <!-- the light source is a fePointLight element -->
  <text text-anchor="middle" x="170" y="22">fePointLight</text>
  <filter id="lightMe1">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <fePointLight x="150" y="60" z="20" />
    </feDiffuseLighting>

    <feComposite
 in="SourceGraphic"
 in2="light"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>

  <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" />

  <!-- the light source is a feDistantLight element -->
  <text text-anchor="middle" x="280" y="22">feDistantLight</text>
  <filter id="lightMe2">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <feDistantLight azimuth="240" elevation="20" />
    </feDiffuseLighting>

    <feComposite
 in="SourceGraphic"
 in2="light"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>

  <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" />

  <!-- the light source is a feSpotLight source -->
  <text text-anchor="middle" x="390" y="22">feSpotLight</text>
  <filter id="lightMe3">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <feSpotLight
 x="360"
 y="5"
 z="30"
 limitingConeAngle="20"
 pointsAtX="390"
 pointsAtY="80"
 pointsAtZ="0" />
    </feDiffuseLighting>

    <feComposite
 in="SourceGraphic"
 in2="light"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>

  <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
</svg>
```

Expected rendering:

![Expected rendering for the example](/en-US/docs/Web/SVG/Element/feDiffuseLighting/fediffuselighting.png)

Live rendering:

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

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

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


<a> - SVG: Scalable Vector Graphics

<a>
===

The **<a>** SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's `<a>` element.

SVG's `<a>` element is a container, which means you can create a link around text (like in HTML) but also around any shape.

Example
-------
```

@namespace svg url(http://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle"><circle></text>
  </a>
</svg>
```

```css
/\* As SVG does not provide a default visual style for links,
 it's considered best practice to add some \*/

@namespace svg url(http://www.w3.org/2000/svg);
/\* Necessary to select only SVG <a> elements, and not also HTML's.
 See warning below \*/

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /\* Even for text, SVG uses fill over color \*/
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}
```

**Warning:** Since this element shares its tag name with HTML's `<a>` element, selecting `a` with CSS or `querySelector` may apply to the wrong kind of element. Try the `@namespace` rule to distinguish the two.

Attributes
----------

`download`

 Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.
 *Value type*: **<string>** ; *Default value*: *none*; *Animatable*: **no**

`href`

 The URL or URL fragment the hyperlink points to.
 *Value type*: **<URL>** ; *Default value*: *none*; *Animatable*: **yes**

`hreflang`

 The human language of the URL or URL fragment that the hyperlink points to.
 *Value type*: **<string>** ; *Default value*: *none*; *Animatable*: **yes**

`ping`
Experimental

 A space-separated list of URLs to which, when the hyperlink is followed, `POST` requests with the body `PING` will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see `Navigator.sendBeacon()`.
 *Value type*: **<list-of-URLs>** ; *Default value*: *none*; *Animatable*: **no**

`referrerpolicy`

 Which referrer to send when fetching the URL.
 *Value type*: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; *Default value*: *none*; *Animatable*: **no**

`rel`

 The relationship of the target object to the link object.
 *Value type*: **<list-of-Link-Types>** ; *Default value*: *none*; *Animatable*: **yes**

`target`

 Where to display the linked URL.
 *Value type*: `_self`|`_parent`|`_top`|`_blank`|**<name>** ; *Default value*: `_self`; *Animatable*: **yes**

`type`

 A MIME type for the linked URL.
 *Value type*: **<string>** ; *Default value*: *none*; *Animatable*: **yes**

`xlink:href`
Deprecated

 The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers.
 *Value type*: **<URL>** ; *Default value*: *none*; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`, `lang`, `tabindex`

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

Most notably: `requiredExtensions`, `systemLanguage`

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`

XLink Attributes

Most notably: `xlink:title`

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

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

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


<feFuncR> - SVG: Scalable Vector Graphics

<feFuncR>
=========

The **`<feFuncR>`** SVG filter primitive defines the transfer function for the red 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 `SVGFEFuncRElement` interface.

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

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

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

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

See also
--------

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


<stop> - SVG: Scalable Vector Graphics

<stop>
======

The SVG **`<stop>`** element defines a color and its position to use on a gradient. This element is always a child of a `<linearGradient>` or `<radialGradient>` element.

Example
-------
```

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

```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

Attributes
----------

`offset`

 This attribute defines where the gradient stop is placed along the gradient vector.
 *Value type*: **<number>**|**<percentage>**; *Default value*: `0`; *Animatable*: **yes**

`stop-color`

 This attribute defines the color of the gradient stop. It can be used as a CSS property.
 *Value type*: `currentcolor`|**<color>**|**<icccolor>**; *Default value*: `black`; *Animatable*: **yes**

`stop-opacity`

 This attribute defines the opacity of the gradient stop. It can be used as a CSS property.
 *Value type*: **<opacity>**; *Default value*: `1`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

Presentation Attributes

Most notably: `color`, `display`, `stop-color`, `stop-opacity`, `visibility`

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

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

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

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

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

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


<radialGradient> - SVG: Scalable Vector Graphics

<radialGradient>
================

The **`<radialGradient>`** element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.

**Note:** Don't be confused with CSS `radial-gradient()` as CSS gradients can only apply to HTML elements where SVG gradient can only apply to SVG elements.

Example
-------
```

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

```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

Attributes
----------

`cx`

 This attribute defines the x coordinate of the end circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: `50%`; *Animatable*: **yes**

`cy`

 This attribute defines the y coordinate of the end circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: `50%`; *Animatable*: **yes**

`fr`

 This attribute defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% `<stop>` is mapped to the perimeter of the start circle.
 *Value type*: **<length>** ; *Default value*: `0%`; *Animatable*: **yes**

`fx`

 This attribute defines the x coordinate of the start circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: Same as `cx`; *Animatable*: **yes**

`fy`

 This attribute defines the y coordinate of the start circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: Same as `cy`; *Animatable*: **yes**

`gradientUnits`

 This attribute defines the coordinate system for attributes `cx`, `cy`, `r`, `fx`, `fy`, `fr`
*Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `objectBoundingBox`; *Animatable*: **yes**

`gradientTransform`

 This attribute provides additional transformation to the gradient coordinate system.
 *Value type*: **<transform-list>** ; *Default value*: *identity transform*; *Animatable*: **yes**

`href`

 This attribute defines a reference to another `<radialGradient>` element that will be used as a template.
 *Value type*: **<URL>** ; *Default value*: none; *Animatable*: **yes**

`r`

 This attribute defines the radius of the end circle of the radial gradient. The gradient will be drawn such that the 100% `<stop>` is mapped to the perimeter of the end circle.
 *Value type*: **<length>** ; *Default value*: `50%`; *Animatable*: **yes**

`spreadMethod`

 This attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.
 *Value type*: `pad`|`reflect`|`repeat` ; *Default value*: `pad`; *Animatable*: **yes**

`xlink:href`
Deprecated

 An <IRI> reference to another `<radialGradient>` element that will be used as a template.
 *Value type*: **<IRI>** ; *Default value*: none; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global 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`

XLink Attributes
`xlink:href`
Deprecated
, `xlink:title`
Usage notes
-----------

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

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

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

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

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


<line> - SVG: Scalable Vector Graphics

<line>
======

The **`<line>`** element is an SVG basic shape used to create a line connecting two points.

Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- If you do not specify the stroke
 color the line will not be visible -->
</svg>
```

Attributes
----------

`x1`

 Defines the x-axis coordinate of the line starting point.
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *Default value*: `0`; *Animatable*: **yes**

`x2`

 Defines the x-axis coordinate of the line ending point.
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *Default value*: `0`; *Animatable*: **yes**

`y1`

 Defines the y-axis coordinate of the line starting point.
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *Default value*: `0`; *Animatable*: **yes**

`y2`

 Defines the y-axis coordinate of the line ending point.
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *Default value*: `0`; *Animatable*: **yes**

`pathLength`

 Defines the total path length 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 # LineElement |

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>`, `<polygon>`, **`<polyline>`**, `<rect>`


<clipPath> - SVG: Scalable Vector Graphics

<clipPath>
==========

The **`<clipPath>`** SVG element defines a clipping path, to be used by the `clip-path` property.

A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.

Example
-------
```

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

```html
<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
 Everything outside the circle will be
 clipped and therefore invisible.
 -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
 id="heart"
 d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
 Only the portion of the red heart
 inside the clip circle is visible.
 -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>
```

```css
/\* With a touch of CSS for browsers who \*
 \* implemented the r Geometry Property. \*/

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}
```

A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the *rendering* of an element, but not the element's *inherent geometry*. The bounding box of a clipped element (meaning, an element which references a `<clipPath>` element via a `clip-path` property, or a child of the referencing element) must remain the same as if it were not clipped.

By default, `pointer-events` are not dispatched on clipped regions. For example, a circle with a radius of `10` which is clipped to a circle with a radius of `5` will not receive "click" events outside the smaller radius.

Attributes
----------

`clipPathUnits`

 Defines the coordinate system for the contents of the `<clipPath>` element.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `userSpaceOnUse`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

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

Most notably: `requiredExtensions`, `systemLanguage`

Presentation Attributes

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

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

|  |  |
| --- | --- |
| Categories | None |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elementsShape elements`<text>`, `<use>` |

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

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

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

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

Related
-------

* Other clipping and masking SVG elements: `<mask>`
* Some CSS properties: `clip-path`, `pointer-events`


<rect> - SVG: Scalable Vector Graphics

<rect>
======

The **`<rect>`** element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.

Example
-------
```

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

```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>
```

Attributes
----------

`x`

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

`y`

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

`width`

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

`height`

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

`rx`

 The horizontal corner radius of the rect. Defaults to `ry` if it is specified.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`ry`

 The vertical corner radius of the rect. Defaults to `rx` if it is specified.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`pathLength`

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

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

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

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

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

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

Aria Attributes

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

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

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

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

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

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

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

See also
--------

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


<glyphRef> - SVG: Scalable Vector Graphics

<glyphRef>
==========

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

The `glyphRef` element provides a single possible glyph to the referencing `<altGlyph>` substitution.

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

|  |  |
| --- | --- |
| Categories | Text content element |
| Permitted content | Empty |

Attributes
----------

### Global attributes

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

* `x`
Deprecated
* `y`
Deprecated
* `dx`
Deprecated
* `dy`
Deprecated
* `glyphRef`
Deprecated
* `format`
Deprecated
* `xlink:href`
Deprecated
DOM Interface
-------------

This element implements the `SVGGlyphRefElement` interface.

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

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

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

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


Basic transformations - SVG: Scalable Vector Graphics

Basic transformations
=====================

* « Previous
* Next »

Now we're ready to start distorting our beautiful images. But first, let's formally introduce the `<g>` element. With this helper, you can assign properties to a complete set of elements. Actually, that's its only purpose.

Example
-------

```html
<svg width="30" height="10">
  <g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
  </g>
</svg>
```

All following transformations are summed up in an element's `transform` attribute. Transformations can be chained by concatenating them, separated by whitespace.

Translation
-----------

It may be necessary to move an element around, even though you can position it with the according attributes. For this purpose, the `translate()` transformation stands ready.

```html
<svg width="40" height="50" style="background-color:#bff;">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>
```

The example will render a rectangle, translated to the point (30,40) instead of (0,0).

If the second value is not given, it is assumed to be *0*.

Rotation
--------

Rotating an element is quite a common task. Use the `rotate()` transformation for this:

```html
<svg width="31" height="31">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>
```

This example shows a square that is rotated by 45 degrees. The value for `rotate()` is given in degrees.

Multiple transformations
------------------------

Transformations can be concatenated easily just by separating them with spaces. For example, `translate()` and `rotate()` are common used transformations.

```html
<svg width="40" height="50" style="background-color:#bff;">
  <rect
 x="0"
 y="0"
 width="10"
 height="10"
 transform="translate(30,40) rotate(45)" />
</svg>
```

This example shows again the small square shown above that this time is also rotated by 45 degrees.

Skewing
-------

To make a rhombus out of our rectangle, the `skewX()` and `skewY()` transformations are available. Each one takes an angle that determines how far the element will be skewed.

Scaling
-------

`scale()` changes the size of an element. It takes two numbers, the first being the *x* scale factor and the second being the *y* scale factor. The factors are taken as the ratio of the transformed dimension to the original. For example, *0.5 shrinks by 50%. If the second number is omitted, it is assumed to be equal to the first.*

Complex transformations with `matrix()`
---------------------------------------

All the above transformations can be expressed by a 2x3 transformation matrix. To combine several transformations, one can set the resulting matrix directly with the `matrix(a, b, c, d, e, f)` transformation which maps coordinates from a previous coordinate system into a new coordinate system by

{

x

newCoordSys

=
a

x

prevCoordSys

+
c

y

prevCoordSys

+
e

y

newCoordSys

=
b

x

prevCoordSys

+
d

y

prevCoordSys

+
f

\left{ \begin{matrix} x\*{\mathrm{prevCoordSys}} = a x\*{\mathrm{newCoordSys}} + c y\*{\mathrm{newCoordSys}} + e \ y\*{\mathrm{prevCoordSys}} = b x\*{\mathrm{newCoordSys}} + d y\*{\mathrm{newCoordSys}} + f \end{matrix} \right.

See a concrete example on the SVG transform documentation. Detailed information about this property can be found in the SVG Recommendation.

Effects on Coordinate Systems
-----------------------------

When using transformations you establish a new coordinate system inside the element the transformations apply to. That means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation.

```html
<svg width="100" height="100">
  <g transform="scale(2)">
    <rect width="50" height="50" />
  </g>
</svg>
```

The resulting rectangular in the above example will be 100x100px. The more intriguing effects arise, when you rely on attributes like `userSpaceOnUse` and the such.

Embedding SVG in SVG
--------------------

In contrast to HTML, SVG allows you to embed other `svg` elements seamlessly. This way you can also create new coordinate systems by utilizing the `viewBox`, `width` and `height` of the inner `svg` element.

```html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>
```

The example above has basically the same effect as the one above, namely that the rect will be twice as large as specified.

* « Previous
* Next »