width
=====

The **`width`** attribute defines the horizontal length of an element in the user coordinate system.

You can use this attribute with the following SVG elements:

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
Example
-------
```

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



```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <!-- With a width of 0 or less, nothing will be rendered -->
  <rect x="0" y="0" width="0" height="90" />
  <rect x="0" y="100" width="60" height="90" />
  <rect x="0" y="200" width="100%" height="90" />
</svg>
```

feBlend
-------

For `<feBlend>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feColorMatrix
-------------

For `<feColorMatrix>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feComponentTransfer
-------------------

For `<feComponentTransfer>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feComposite
-----------

For `<feComposite>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feConvolveMatrix
----------------

For `<feConvolveMatrix>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feDiffuseLighting
-----------------

For `<feDiffuseLighting>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feDisplacementMap
-----------------

For `<feDisplacementMap>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feDropShadow
------------

For `<feDropShadow>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feFlood
-------

For `<feFlood>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feGaussianBlur
--------------

For `<feGaussianBlur>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feImage
-------

For `<feImage>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feMerge
-------

For `<feMerge>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feMorphology
------------

For `<feMorphology>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feOffset
--------

For `<feOffset>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feSpecularLighting
------------------

For `<feSpecularLighting>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feTile
------

For `<feTile>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

feTurbulence
------------

For `<feTurbulence>`, `width` defines the horizontal length for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `100%` |
| Animatable | Yes |

filter
------

For `<filter>`, `width` defines the horizontal length for the rendering area of the filter.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `120%` |
| Animatable | Yes |

foreignObject
-------------

For `<foreignObject>`, `width` defines the horizontal length for the rendering area for the referenced document.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

**Note:** Starting with SVG2, `width` is a *Geometry Property* meaning this attribute can also be used as a CSS property for `<foreignObject>`.

image
-----

For `<image>`, `width` defines the horizontal length for the image.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as the intrinsic width of the image) |
| Animatable | Yes |

**Note:** Starting with SVG2, `width` is a *Geometry Property* meaning this attribute can also be used as a CSS property for images.

mask
----

For `<mask>`, `width` defines the horizontal length of its area of effect. The exact effect of this attribute is influenced by the `maskUnits` attribute.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `120%` |
| Animatable | Yes |

pattern
-------

For `<pattern>`, `width` defines the horizontal length of the tile pattern. The exact effect of this attribute is influenced by the `patternUnits` and `patternTransform` attributes.

|  |  |
| --- | --- |
| Value | **<length>** |
| Default value | `0` |
| Animatable | Yes |

rect
----

For `<rect>`, `width` defines the horizontal length for the rectangle.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

**Note:** Starting with SVG2, `width` is a *Geometry Property* meaning this attribute can also be used as a CSS property for rectangles.

svg
---

For `<svg>`, `width` defines the horizontal length for the rendering area of the SVG viewport.

**Note:** In an HTML document if both the `viewBox` and `width` attributes are omitted, the svg element will be rendered with a width of `300px`


|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `100%`) |
| Animatable | Yes |

**Note:** Starting with SVG2, `width` is a *Geometry Property* meaning this attribute can also be used as a CSS property for `<svg>`.

use
---

For `<use>`, `width` defines the horizontal length for the referenced element.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

**Note:** `width` has 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, `width` is a *Geometry Property* meaning this attribute can also be used as a CSS property for used elements.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-width |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-width |
| CSS Masking Module Level 1 # element-attrdef-mask-width |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementWidthAttribute |