HTML <svg> width Attribute

The width attribute on an <svg> tag sets the width of the svg element. The width is specified in pixels -- without the ‘px‘ unit.

Example

#

A width attribute on an <svg> element.
The width attribute overrides the original svg width.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="steelblue" 
          stroke-width="2" fill="lightblue" />
</svg>

Using width

The width attribute is used to specify the horizontal length of the SVG element.

The width is defined in pixels, without the 'px' unit.

To define the width in % or another unit, use the CSS width property.


Syntax

<svg width="pixels">

Values

#

Value Description
pixels Numeric value. The image width in pixels (e.g. 200).

Browser support

Here is when width support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.0 Jun 2008
IE/Edge
9.0 Mar 2011
Opera
10.1 Jun 2010
Safari
3.2 Nov 2008

You may also like

 Back to <svg>
Guides