recursal/MDN huggingface dataset:
Other content in SVG
====================

* « Previous
* Next »

Apart from graphic primitives like rectangles and circles, SVG offers a set of elements to embed other types of content in images as well.

### Embedding raster images

Much like the img element in HTML SVG has an `image` element to serve the same purpose. You can use it to embed arbitrary raster (and vector) images. The specification requests applications to support at least PNG, JPEG and SVG format files.

The embedded picture becomes a normal SVG element. This means, that you can use clips, masks, filters, rotations and all other tools of SVG on the content:


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200"
 height="200">
  <image
 x="90"
 y="-65"
 width="128"
 height="146"
 transform="rotate(45)"
 href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn\_logo\_only\_color.png" />
</svg>
```

### Embedding arbitrary XML

Since SVG is an XML application, you can of course *always* embed arbitrary XML anywhere in an SVG document. But then you have no means to define how the surrounding SVG should react on the content. Actually, in a conforming viewer it will react in no way at all, the data will be omitted. Therefore the specification adds the ``<foreignObject>`` element to SVG. Its sole purpose is to be a container for other markup and a carrier for SVG styling attributes (most prominently `width` and `height` to define the space the object will take).

The `foreignObject` element is a good way to embed XHTML in SVG. If you have longer texts, the HTML layout is more suitable and comfortable than the SVG `text` element. Another often cited use case is the embedding of formulas with MathML. For scientific applications of SVG this is a very good way to join both worlds.

**Note:** Please keep in mind, that the content of the `foreignObject` must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.

Since the `foreignObject` is an SVG element, you can, like in the case of `image`, use any SVG goodness with it, which then will be applied to its content.

* « Previous
* Next »
SVG image element
=================

* « Previous
* Next »

The SVG `<image>` element allows for raster images to be rendered within an SVG object.

In this basic example, a .jpg image referenced by an `href` attribute will be rendered inside an SVG object:


```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
```


There are some important things to take note of (referenced from the W3 specs):

* If you do not set the `x` or `y` attributes, they will be set to `0`.
* If you do not set the `height` or `width` attributes, they will be set to `0`.
* Having a `height` or `width` attribute of `0` will disable rendering of the image.
* « Previous
* Next »
SVG Filters Tutorial
====================

Filters
-------

SVG allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the results of different filters. With the filter element `<filter>` it is possible to add these effects and later on attach them to an object.

Filters act like layers. When creating them, try applying and testing the effect step by step.

This element has different attributes that help us create the clipping region. Between the filter tags, we can define the *primitives* that allow us to implement the desired effect. One of these primitives is the feGaussianBlur. The keyword SourceAlpha identifies the input for this primitive, is in this case input '`in`'. The amount of blur to be applied is done using the `stdDeviation` attribute.

### SVG filter example


```html
<defs>
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
  </filter>
</defs>

<g id="ghost" style="filter: url(#drop-shadow);">
  <!--Ghost drawing in here-->
</g>
```


The above example will not produce the desired output. Instead we need to add more filter primitives which will produce the desired rendering. By adding `feoffset` and `result`, the effect layer is defined.

`<result>` attribute is a reference that can be used later. It is quite different to an XML id and only can be referenced within the actual `filter`. **`<feoffset>`** primitive has the blur result from the Gaussian blur. **`<feMerge>`** primitive contains the nodes **`<feMergeNode>`** taking as input the result offsetBlur, this will allow it to appear below the `sourceGraphic`.

### Implementation of more primitives


```html
<defs>
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
    <feoffset in="blur" dx="4" dy="4" result="offsetBlur" />
    <feMerge>
      <feMergeNode in="offsetBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</defs>
```
letter-spacing
==============

The **`letter-spacing`** attribute controls spacing between text characters, in addition to any spacing from the `kerning` attribute.

If the attribute value is a unitless number (like `128`), the browser processes it as a `<length>` in the current user coordinate system.

If the attribute value has a unit identifier, such as `.25em` or `1%`, then the browser converts the <length> into its corresponding value in the current user coordinate system.

**Note:** As a presentation attribute, `letter-spacing` can be used as a CSS property. See the `CSS letter-spacing` property for more information.

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

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



```html
<svg viewBox="0 0 400 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" letter-spacing="2">Bigger letter-spacing</text>
  <text x="200" y="20" letter-spacing="-0.5">Smaller letter-spacing</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `normal` | `<length>` |
| Default value | `normal` |
| Animatable | Yes |

For a description of the values, please refer to the CSS `letter-spacing` property.

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

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

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

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

See also
--------

* `CSS letter-spacing`
name
====

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

The **`name`** attribute specifies either the name of a color profile or a font face.

You can use this attribute with the following SVG elements:

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

For `<font-face-name>`, `name` defines the name of the font face.

|  |  |
| --- | --- |
| Value | `<name>` |
| Default value | *None* |
| Animatable | Yes |

`<name>`

This value specifies the name of a local font. Unlike the syntax allowed between the parentheses of the `local(…)` clause in an `@font-face` rule `src` descriptor, the font name specified in this attribute is not surrounded in single or double quotes.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceNameElementNameAttribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # ColorProfileElementNameAttribute |
font-variant
============

The **`font-variant`** attribute indicates whether the text is to be rendered using variations of the font's glyphs.

**Note:** As a presentation attribute, `font-variant` can be used as a CSS property. See the `CSS font-variant` property for more information.

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

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



```html
<svg viewBox="0 0 250 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-variant="normal">Normal text</text>
  <text x="100" y="20" font-variant="small-caps">Small-caps text</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | 
`normal` | `none` | [
 `<common-lig-values>` ||
 `<discretionary-lig-values>` ||
 `<historical-lig-values>` ||
 `<contextual-alt-values>` ||
 `stylistic( <feature-value-name> )` ||
 `historical-forms` ||
 `styleset( <feature-value-name># )` ||
 `character-variant( <feature-value-name># )` ||
 `swash( <feature-value-name> )` ||
 `ornaments( <feature-value-name> )` ||
 `annotation( <feature-value-name> )` || [
 `small-caps` | `all-small-caps` |
 `petite-caps` | `all-petite-caps` |
 `unicase` | `titling-caps` ] ||
 `<numeric-figure-values>` ||
 `<numeric-spacing-values>` ||
 `<numeric-fraction-values>` || `ordinal` ||
 `slashed-zero` ||
 `<east-asian-variant-values>` ||
 `<east-asian-width-values>` || `ruby` ]
  |
| Default value | `normal` |
| Animatable | Yes |

For a description of the values, please refer to the CSS `font-variant` property.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-prop |

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

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

See also
--------

* `CSS font-variant`
glyph-orientation-horizontal
============================

**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 **`glyph-orientation-horizontal`** attribute affects the amount that the current text position advances as each glyph is rendered.

When the reference orientation direction is horizontal and the `glyph-orientation-horizontal` results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph. Otherwise, if the value of this attribute is not a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph.

This attribute is applied only to text written in a horizontal `writing-mode`.

**Note:** As a presentation attribute, `glyph-orientation-horizontal` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<textPath>`
* `<text>`
* `<tref>`
* `<tspan>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `<angle>` |
| Default value | `0deg` |
| Animatable | No |

`<angle>`

 The value of the angle is restricted to 0, 90, 180, and 270 degrees. If another angle is specified, it is rounded to the closest of the permitted values.
 A value of `0deg` indicates that all glyphs are set with the top of the glyphs oriented towards the reference orientation. A value of `90deg` indicates an orientation of 90 degrees clockwise from the reference orientation.


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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
horiz-origin-x
==============

**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 **`horiz-origin-x`** attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing horizontally oriented text.

**Note:** The origin applies to all glyphs in the font.

You can use this attribute with the following SVG elements:

* `<font>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `0` |
| Animatable | No |

`<number>`

This value indicates the x-coordinate of the origin of a glyph for horizontally oriented text.

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

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

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

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

See also
--------

* `horiz-origin-y`
* `vert-origin-x`
* `vert-origin-y`
x-height
========

**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 **`x-height`** attribute indicates the height of lowercase glyphs in the font within the font coordinate system.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value indicates the height of lowercase glyphs.

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

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

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

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

See also
--------

* `cap-height`
* `accent-height`
order
=====

The **`order`** attribute indicates the size of the matrix to be used by a `<feConvolveMatrix>` element.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
Example
-------
```

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="emboss1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" seed="0" />
    <feConvolveMatrix kernelMatrix="3 0 0 -4" order="2" />
  </filter>
  <filter id="emboss2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" seed="0" />
    <feConvolveMatrix kernelMatrix="3 0 0 0 0 0 0 0 -4" order="3" />
  </filter>

  <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter:url(#emboss2); transform: translateX(220px);" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<number-optional-number>` |
| Default value | `3` |
| Animatable | Yes |

`<number-optional-number>`

This value indicates the number of cells in each dimension for the kernel matrix. The values provided must be `<integer>`s greater than zero. Values that are not integers will be truncated, i.e. rounded to the closest integer value towards zero. The first number, indicates the number of columns in the matrix. The second number, indicates the number of rows in the matrix. If no second number is not provided, it defaults to the first number.

It is recommended that only small values (e.g., 3) be used; higher values may result in very high CPU overhead and usually do not produce results that justify the impact on performance.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-order |

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

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

The **`refX`** attribute defines the x coordinate of an element's reference point.

You can use this attribute with the following SVG elements:

* `<marker>`
* `<symbol>`
marker
------

For `<marker>`, `refX` defines the x coordinate of the marker's reference point, which is to be placed exactly at the marker's position on the shape.

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
 `<number>` | `left` | `center` |
 `right` |
| Default value | `0` |
| Animatable | Yes |

`<length-percentage>`

Lengths are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

Percentage values are interpreted as being a percentage of the `viewBox` width.

`<number>`

Numbers are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

`left`

The reference point of the marker is placed at the left edge of the shape.

`center`

The reference point of the marker is placed at the horizontal center of the shape.

`right`

The reference point of the marker is placed at the right edge of the shape.

symbol
------

For `<symbol>`, `refX` defines the x coordinate of the symbol, which is defined by the cumulative effect of the `x` attribute and any transformations on the `<symbol>` and its host `<use>` element.

Unlike other positioning attributes, `refX` is interpreted as being in the coordinate system of the symbol contents, after application of the `viewBox` and `preserveAspectRatio` attributes. If the attribute is not specified, no horizontal adjustment is made, and the left side of the symbol's rectangular viewport region (regardless of the `viewBox` coordinate) is positioned at the x coordinate.

**Note:** For backwards compatibility, the behavior when `refX` is not specified on a `<symbol>` element is different from when it is specified with a value of `0`, and therefore different from the behavior when an equivalent attribute is not specified on a `<marker>` element.


|  |  |
| --- | --- |
| Value | `<length>` | `left` | `center` |
 `right` |
| Default value | None |
| Animatable | Yes |

`<length-percentage>`

Lengths are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

Percentage values are interpreted as being a percentage of the `viewBox` width.

`<number>`

Numbers are interpreted as being in the coordinate system of the marker contents, after application of the `viewBox` and `preserveAspectRatio` attributes.

`left`

The reference point of the marker is placed at the left edge of the shape.

`center`

The reference point of the marker is placed at the horizontal center of the shape.

`right`

The reference point of the marker is placed at the right edge of the shape.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # MarkerElementRefXAttribute |
| Scalable Vector Graphics (SVG) 2 # SymbolElementRefXAttribute |

See also
--------

* `refY`
glyph-name
==========

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

The **`glyph-name`** attribute specifies the name of a glyph.

It is recommended that glyph names be unique within a font. The glyph names can be used in situations where Unicode character numbers do not provide sufficient information to access the correct glyph, such as when there are multiple glyphs per Unicode character.

The glyph names can be referenced in kerning definitions created by `<hkern>` and `<vkern>` elements.

You can use this attribute with the following SVG elements:

* `<glyph>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `<name>#` |
| Default value | *None* |
| Animatable | No |

`<name>#`

This value specifies a comma-separated list of names for the glyph.

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

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

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

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

The **`diffuseConstant`** attribute represents the kd value in the Phong lighting model. In SVG, this can be any non-negative number.

It's used to determine the final RGB value of a given pixel. The brighter the lighting-color, the smaller this number should be.

You can use this attribute with the following SVG elements:

* `<feDiffuseLighting>`
Example
-------
```

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="diffuseLighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" diffuseConstant="1">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" diffuseConstant="2">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>

  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#diffuseLighting1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#diffuseLighting2); transform: translateX(220px);" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `1` |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fediffuselighting-diffuseconstant |

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

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

See also
--------

* Description of Phong reflection model on Wikipedia