N NextGen Virtual Academy
AD Administrator Learning Manager
← Back to Selenium Lab
SELENIUM WEBDRIVER · PRACTICE LAB

SVG Elements

Learn how to locate and interact with SVG elements used in modern dashboards, charts, icons and graphical interfaces.

SELENIUM SVG
OBJECTIVE

What You Will Practice

  • Understand SVG elements.
  • Locate SVG using XPath.
  • Locate SVG using CSS selectors.
  • Work with SVG path elements.
  • Click SVG icons.
  • Identify SVG attributes.
  • Work with SVG charts.
  • Practice real Selenium scenarios.
01

SVG Icon

Locate and click an SVG icon.

ICON
XPath //button[@id='searchSvgButton']//*[name()='svg'] CSS #searchSvgButton svg
02

SVG Path

Identify an SVG path using the name() function.

PATH
XPath //*[name()='path' and @id='targetSvgPath']
03

SVG Button

Click a button containing an SVG graphic.

CLICK
XPath //button[@id='downloadSvgButton']
04

SVG Chart

Practice locating graphical elements inside an SVG chart.

CHART
Jan Feb Mar Apr May Jun Jul
XPath //*[name()='circle' and @data-month='June']
05

SVG Attributes

Read SVG attributes such as viewBox and data values.

ATTRIBUTE
Selenium Java element.getAttribute("viewBox"); element.getAttribute("data-chart");
06

Real-World SVG Search

Locate an SVG icon using its accessible label.

REAL-TIME
XPath //button[@aria-label='Notifications']//*[name()='svg']
QUICK REFERENCE

SVG Selenium Cheat Sheet

SVG Element 
//*[name()='svg']
SVG Path 
//*[name()='path']
SVG Circle 
//*[name()='circle']
SVG Attribute 
//*[name()='circle']
[@data-month='June']
CSS SVG 
button svg
Selenium Java 
driver.findElement(
    By.xpath(
        "//*[name()='svg']"
    )
);