width

This attribute indicates an horizontal length in the user coordinate system. The exact effect of this coordinate depends on each element. Most of the time, it represents the width of the rectangular region of the reference element (see each individual element's documentation for exceptions).

This attribute must be specified except for the <svg> element where the default value is 100% (except for root <svg> elements that have HTML parents) and the <filter> and <mask> elements where the default value is 120%.

Usage context

Categories	None
Value	<length>
Animatable	Yes
Normative document	SVG 1.1 (2nd Edition): foreignObject element SVG 1.1 (2nd Edition): image element SVG 1.1 (2nd Edition): pattern element SVG 1.1 (2nd Edition): rect element SVG 1.1 (2nd Edition): svg element SVG 1.1 (2nd Edition): use element SVG 1.1 (2nd Edition): Filter primitive SVG 1.1 (2nd Edition): mask element

<length>

A length is a distance measurement, given as a number along with a unit. Lengths are specified in one of two ways. When used in a stylesheet, a <length> is defined as follows:

length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?

See the CSS2 specification for the meanings of the unit identifiers.

For properties defined in CSS2, a length unit identifier must be provided. For length values in SVG-specific properties and their corresponding presentation attributes, the length unit identifier is optional. If not provided, the length value represents a distance in the current user coordinate system. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the length identifier, if specified, must be in lower case.

When lengths are used in an SVG attribute, a <length> is instead defined as follows:

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

The unit identifiers in such <length> values must be in lower case.

Note that the non-property <length> definition also allows a percentage unit identifier. The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are:

• when a percentage length value represents a percentage of the viewport width or height
• when a percentage length value represents a percentage of the bounding box width or height on a given object.

In the SVG DOM, <length> values are represented using SVGLength or SVGAnimatedLength objects.

Example

<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>

Elements

The following elements can use the width attribute

• Filter primitive elements »
• <filter>
• <foreignObject>
• <image>
• <pattern>
• <rect>
• <svg>
• <use>
• <mask>