files/en-us/web/api/svgsvgelement/getelementbyid/index.md
{{APIRef("SVG")}}
The getElementById() method of the {{domxref("SVGSVGElement")}} interface searches the SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an {{domxref("Element")}} whose id property matches the specified string.
getElementById(id)
id
An {{domxref("Element")}} object describing the DOM element object matching the specified ID, or null if no matching element was found in the SVG document fragment.
<svg
id="exampleSVG"
width="200"
height="200"
xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="100" cy="100" r="50" fill="blue" />
</svg>
<button id="getElementButton">Get Element</button>
<p id="elementDisplay"></p>
const svgElement = document.getElementById("exampleSVG");
const getElementButton = document.getElementById("getElementButton");
const elementDisplay = document.getElementById("elementDisplay");
getElementButton.addEventListener("click", () => {
const circleElement = svgElement.getElementById("circle1");
if (circleElement) {
elementDisplay.textContent = `Element found: ${circleElement.tagName}`;
} else {
elementDisplay.textContent = "Element not found.";
}
});
{{Specifications}}
{{Compat}}