SVGSVGElement: preserveAspectRatio property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The preserveAspectRatio
read-only property of the SVGSVGElement
interface reflects the preserveAspectRatio
attribute of the given element. It defines how the SVG element's content should be scaled to fit the given space, preserving its aspect ratio.
Value
An SVGAnimatedPreserveAspectRatio
object.
Example
Given the following SVG, we can use the preserveAspectRatio
property to retrieve the scaling behavior for the SVG element:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
preserveAspectRatio="xMidYMid meet">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
We can access the preserveAspectRatio
attribute:
const svgElement = document.querySelector("svg");
console.log(svgElement.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1}
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__preserveAspectRatio |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
preserveAspectRatio |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support