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.

<feColorMatrix>

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

<feComponentTransfer>

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

<feComposite>

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

<feConvolveMatrix>

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

<feDiffuseLighting>

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

<feDisplacementMap>

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

<feDropShadow>

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

<feFlood>

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

<feGaussianBlur>

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

<feImage>

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

<feMerge>

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

<feMorphology>

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

<feOffset>

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

<feSpecularLighting>

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

<feTile>

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

<feTurbulence>

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

<filter>

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

<foreignObject>

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

<image>

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

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

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

<rect>

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

<svg>

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

<use>

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

Examples

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

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.

<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

• Filter Effects Module Level 1
,
• Filter Effects Module Level 1
,
• CSS Masking Module Level 1
,
• Scalable Vector Graphics (SVG) 2
,
• Scalable Vector Graphics (SVG) 2

See also

• CSS width property