files/en-us/web/svg/reference/attribute/width/index.md
The width attribute defines the horizontal length of an element in the user coordinate system.
You can use this attribute with the SVG elements described in the sections below.
<feBlend>For {{SVGElement('feBlend')}}, width defines the horizontal length for the rendering area of the primitive.
<feColorMatrix>For {{SVGElement('feColorMatrix')}}, width defines the horizontal length for the rendering area of the primitive.
<feComponentTransfer>For {{SVGElement('feComponentTransfer')}}, width defines the horizontal length for the rendering area of the primitive.
<feComposite>For {{SVGElement('feComposite')}}, width defines the horizontal length for the rendering area of the primitive.
<feConvolveMatrix>For {{SVGElement('feConvolveMatrix')}}, width defines the horizontal length for the rendering area of the primitive.
<feDiffuseLighting>For {{SVGElement('feDiffuseLighting')}}, width defines the horizontal length for the rendering area of the primitive.
<feDisplacementMap>For {{SVGElement('feDisplacementMap')}}, width defines the horizontal length for the rendering area of the primitive.
<feDropShadow>For {{SVGElement('feDropShadow')}}, width defines the horizontal length for the rendering area of the primitive.
<feFlood>For {{SVGElement('feFlood')}}, width defines the horizontal length for the rendering area of the primitive.
<feGaussianBlur>For {{SVGElement('feGaussianBlur')}}, width defines the horizontal length for the rendering area of the primitive.
<feImage>For {{SVGElement('feImage')}}, width defines the horizontal length for the rendering area of the primitive.
<feMerge>For {{SVGElement('feMerge')}}, width defines the horizontal length for the rendering area of the primitive.
<feMorphology>For {{SVGElement('feMorphology')}}, width defines the horizontal length for the rendering area of the primitive.
<feOffset>For {{SVGElement('feOffset')}}, width defines the horizontal length for the rendering area of the primitive.
<feSpecularLighting>For {{SVGElement('feSpecularLighting')}}, width defines the horizontal length for the rendering area of the primitive.
<feTile>For {{SVGElement('feTile')}}, width defines the horizontal length for the rendering area of the primitive.
<feTurbulence>For {{SVGElement('feTurbulence')}}, width defines the horizontal length for the rendering area of the primitive.
<filter>For {{SVGElement('filter')}}, width defines the horizontal length for the rendering area of the filter.
<foreignObject>For {{SVGElement('foreignObject')}}, width defines the horizontal length for the rendering area for the referenced document.
[!NOTE] Starting with SVG2,
widthis a Geometry Property meaning this attribute can also be used as a CSS property for<foreignObject>.
<image>For {{SVGElement('image')}}, width defines the horizontal length for the image.
[!NOTE] Starting with SVG2,
widthis a Geometry Property meaning this attribute can also be used as a CSS property for images.
<mask>For {{SVGElement('mask')}}, width defines the horizontal length of its area of effect. The exact effect of this attribute is influenced by the {{SVGAttr('maskUnits')}} attribute.
<pattern>For {{SVGElement('pattern')}}, width defines the horizontal length of the tile pattern. The exact effect of this attribute is influenced by the {{SVGAttr('patternUnits')}} and {{SVGAttr('patternTransform')}} attributes.
<rect>For {{SVGElement('rect')}}, width defines the horizontal length for the rectangle.
[!NOTE] Starting with SVG2,
widthis a Geometry Property meaning this attribute can also be used as a CSS property for rectangles.
<svg>For {{SVGElement('svg')}}, width defines the horizontal length for the rendering area of the SVG viewport.
<table class="properties"> <tbody> <tr> <th scope="row">Value</th> <td> <code>auto</code> | <strong ><a href="/en-US/docs/Web/SVG/Guides/Content_type#length" ><length></a ></strong > | <strong ><a href="/en-US/docs/Web/SVG/Guides/Content_type#percentage" ><percentage></a ></strong > </td> </tr> <tr> <th scope="row">Default value</th> <td><code>auto</code> (treated as <code>100%</code>)</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> </tbody> </table>[!NOTE] In an HTML document if both the {{SVGAttr('viewBox')}} and
widthattributes are omitted, the svg element will be rendered with a width of300px
[!NOTE] Starting with SVG2,
widthis a Geometry Property meaning this attribute can also be used as a CSS property for<svg>.
<use>For {{SVGElement('use')}}, width defines the horizontal length for the referenced element.
[!NOTE]
widthhas no effect onuseelements, unless the element referenced has a viewBox - i.e., they only have an effect whenuserefers to asvgorsymbolelement.
[!NOTE] Starting with SVG2,
widthis a Geometry Property meaning this attribute can also be used as a CSS property for used elements.
html,
body,
svg {
height: 100%;
}
This example includes three {{SVGElement("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>
{{EmbedLiveSample("Examples", '100%', 200)}}
{{Specifications}}