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:

Example

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