Handling Scalable Vector Graphics(svg) elements in Selenium

Scalable Vector Graphics is an XML based vector image format for two-dimensional graphics that has support for interactivity and animation Selenium as functional testing tool,needs to identify SVG graphic elements as well when we test web applications whose UI is implemented using SVG.The Tags for these svg elements in DOM are not HTML tags.

All the SVG elements may have same attribute values or the values that may change dynamically.It is not possible to identify the elements based on Tag in xpath expression(since these tags may not be identified by dom as they are not html tags.)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='300px'>
<title>Small SVG example</title>
<circle cx='120' cy='150' r='60' style='fill: gold;'> <animate attributeName='r' from='2' to='80' begin='0' dur='3' repeatCount='indefinite' /></circle>
<polyline points='120 30, 25 150, 290 150' stroke-width='4' stroke='brown' style='fill: none;' />
<polygon points='210 100, 210 200, 270 150' style='fill: lawngreen;' />
<text x='60' y='250' fill='blue'>Hello, World!</text>
</svg> The above is the SVG used to Create a Circle,polygon and Polyline as shown in the graphics above.In order to identify a circle the Xpath expression should be framed as

//*[@cx ='120']
if we specify //circle[@cx='120'] the circle tag could not be identified by Selenium. So when identifying the SVG graphics using generic Xpath expression is preferable(using * instead of identiying using tag name) Please email me if you have any issues with handling SVG graphics using selenium.