recursal/MDN huggingface dataset:
<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>
=====

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

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

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

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

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

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.
<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`
<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.
Tools for SVG
=============

* « Previous
* Next »

Now that we covered the basics of the SVG internals, we will take a look at some tools to work with SVG files.

Inkscape
--------

URL: www.inkscape.org

One of the most important tools for a graphics format is a decent drawing program. Inkscape offers state-of-the-art vector drawing, and it's open source.

Moreover, it uses SVG as its native file format. To store Inkscape specific data, it extends the SVG file with elements and attributes in a custom namespace, but you can also choose to export as plain SVG.

Adobe Illustrator
-----------------

URL: www.adobe.com/products/illustrator/

Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.

Apache Batik
------------

URL: xmlgraphics.apache.org/batik/

Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.

Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.

Together with Apache FOP Batik can transform SVG to PDF.

### Other renderers

Several projects exist that can create a raster image from an SVG source. ImageMagick is one of the most famous command-line image processing tools. The Gnome library rsvg is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.

Snap.svg
--------

URL: snapsvg.io

A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.

Google Docs
-----------

URL: www.google.com/google-d-s/drawings/

Drawings from Google Docs can be exported as SVG.

Science
-------

The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web JSXGraph supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.

In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See carto.net for details.

More tools!
-----------

The W3C offers a list of programs that support SVG.

* « Previous
* Next »