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

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

See also

• CSS width property