width

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

Elements

You can use this attribute with the SVG elements described in the sections below.

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

Examples

This example includes three <rect> elements with varied width attribute values. The first <rect> has a width="0" set. SVG elements with a width of 0 or less are not rendered.

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"
    fill="red"
    stroke-width="5"
    stroke="black" />
  <rect
    x="0"
    y="100"
    width="60"
    height="90"
    fill="red"
    stroke-width="5"
    stroke="black" />
  <rect
    x="0"
    y="200"
    width="100%"
    height="90"
    fill="red"
    stroke-width="5"
    stroke="black" />
</svg>

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