SVGViewElement: 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 ⁨July 2015⁩.

ThepreserveAspectRatio read-only property of theSVGViewElement interface reflects thepreserveAspectRatio attribute of the given<view> element. It defines how the content within theview should be scaled to fit its viewport while preserving its aspect ratio.

Value

AnSVGAnimatedPreserveAspectRatio object.

Example

Given the following SVG, we can use thepreserveAspectRatio property to retrieve the scaling behavior for aview element:

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">  <view preserveAspectRatio="xMidYMid meet"></view>  <circle cx="100" cy="100" r="80" fill="blue" /></svg>

We can access thepreserveAspectRatio attribute:

const view = document.querySelector("view");console.log(view.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1}