Web/API/SVGLength

SVG length interface

The SVGLength interface correspond to the <length> basic data type.

An SVGLength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

Interface overview

Also implement	None
Methods	void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) void convertToSpecifiedUnits(in unsigned short unitType)
Properties	readonly unsigned short unitType float value float valueInSpecifiedUnits DOMString valueAsString
Constants	SVG_LENGTHTYPE_UNKNOWN = 0 SVG_LENGTHTYPE_NUMBER = 1 SVG_LENGTHTYPE_PERCENTAGE = 2 SVG_LENGTHTYPE_EMS = 3 SVG_LENGTHTYPE_EXS = 4 SVG_LENGTHTYPE_PX = 5 SVG_LENGTHTYPE_CM = 6 SVG_LENGTHTYPE_MM = 7 SVG_LENGTHTYPE_IN = 8 SVG_LENGTHTYPE_PT = 9 SVG_LENGTHTYPE_PC = 10
Normative document	SVG 1.1 (2nd Edition)

Example

<svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript"><![CDATA[
function start() {
  var rect = document.getElementById("myRect");
  var val  = rect.x.baseVal;
  
  // read x in pixel and cm units
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits: " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);

  // set x = 20pt and read it out in pixel and pt units
  val.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT, 20);
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);

  
  // convert x = 20pt to inches and read out in pixel and inch units
  val.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);
}
]]></script>
  <rect id="myRect" 
        x="1cm" y="1cm"
        fill="green" stroke="black" stroke-width="1"
        width="1cm" height="1cm"
  />
</svg>

Results on a desktop monitor (pixel units will be dpi-dependent):

value: 37.7952766418457, valueInSpecifiedUnits: 6: 1, valueAsString: 1cm
value: 26.66666603088379, valueInSpecifiedUnits 9: 20, valueAsString: 20pt
value: 26.66666603088379, valueInSpecifiedUnits 8: 0.277777761220932, valueAsString: 0.277778in

Constants

Name	Value	Description
SVG_LENGTHTYPE_UNKNOWN	0	The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_LENGTHTYPE_NUMBER	1	No unit type was provided (i.e., a unitless value was specified), which indicates a value in user units.
SVG_LENGTHTYPE_PERCENTAGE	2	A percentage value was specified.
SVG_LENGTHTYPE_EMS	3	A value was specified using the em units defined in CSS2.
SVG_LENGTHTYPE_EXS	4	A value was specified using the ex units defined in CSS2.
SVG_LENGTHTYPE_PX	5	A value was specified using the px units defined in CSS2.
SVG_LENGTHTYPE_CM	6	A value was specified using the cm units defined in CSS2.
SVG_LENGTHTYPE_MM	7	A value was specified using the mm units defined in CSS2.
SVG_LENGTHTYPE_IN	8	A value was specified using the in units defined in CSS2.
SVG_LENGTHTYPE_PT	9	A value was specified using the pt units defined in CSS2.
SVG_LENGTHTYPE_PC	10	A value was specified using the pc units defined in CSS2.

Properties

Name	Type	Description
unitType	unsigned short	The type of the value as specified by one of the SVG_LENGTHTYPE_* constants defined on this interface.
value	float	The value as a floating point value, in user units. Setting this attribute will cause valueInSpecifiedUnits and valueAsString to be updated automatically to reflect this setting. Exceptions on setting: a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the length corresponds to a read only attribute or when the object itself is read only.
valueInSpecifiedUnits	float	The value as a floating point value, in the units expressed by unitType. Setting this attribute will cause value and valueAsString to be updated automatically to reflect this setting. Exceptions on setting: a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the length corresponds to a read only attribute or when the object itself is read only.
valueAsString	DOMString	The value as a string value, in the units expressed by unitType. Setting this attribute will cause value, valueInSpecifiedUnits, and unitType to be updated automatically to reflect this setting. Exceptions on setting: a DOMException with code SYNTAX_ERR is raised if the assigned string cannot be parsed as a valid <length>. a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the length corresponds to a read only attribute or when the object itself is read only.

Methods

Name & Arguments	Return	Description
newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)	void	Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object. Exceptions: a DOMException with code NOT_SUPPORTED_ERR is raised if unitType is SVG_LENGTHTYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants defined on this interface). a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the length corresponds to a read only attribute or when the object itself is read only.
convertToSpecifiedUnits(in unsigned short unitType)	void	Preserve the same underlying stored value, but reset the stored unit identifier to the given unitType. Object attributes unitType, valueInSpecifiedUnits, and valueAsString might be modified as a result of this method. For example, if the original value were "0.5cm" and the method was invoked to convert to millimeters, then the unitType would be changed to SVG_LENGTHTYPE_MM, valueInSpecifiedUnits would be changed to the numeric value 5 and valueAsString would be changed to "5mm".

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
SVGLength	Chrome Full support Yes	Edge Full support ≤18	Firefox Full support Yes	IE ?	Opera Full support Yes	Safari Full support Yes	WebView Android No support No	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

SVGLength by Mozilla Contributors is licensed under CC-BY-SA 2.5.