files/en-us/web/api/svgelement/viewportelement/index.md
{{APIRef("SVG")}}
The viewportElement property of the {{DOMxRef("SVGElement")}} interface represents the SVGElement which established the current viewport. Often the nearest ancestor {{SVGElement("svg")}} element. null if the given element is the outermost <svg> element.
An {{DOMxRef("SVGElement")}}.
viewportElement<svg id="outerSvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<svg id="innerSvg" x="10" y="10" width="100" height="100">
<circle id="circle" cx="50" cy="50" r="40" fill="blue"></circle>
</svg>
</svg>
const circle = document.getElementById("circle");
const innerSvg = document.getElementById("innerSvg");
const outerSvg = document.getElementById("outerSvg");
console.log(circle.viewportElement); // Output: <svg id="innerSvg">...</svg>
console.log(innerSvg.viewportElement); // Output: <svg id="outerSvg">...</svg>
console.log(outerSvg.viewportElement); // Output: null
{{Specifications}}
{{Compat}}
<svg> element for the current SVG element.