【Python】SeleniumでSVGエレメントを取得する

SeleniumでSVGエレメントを取得する

Seleniumを使ってSVGエレメントを取得しようとした際にエラーが出てしまいました。具体的には以下のような指定でエラーが発生します。

element = driver.find_element(By.XPATH, "//div[@id='id_name']/svg"

NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//div[@id='id_name']/svg"}

今回はこのエラーを解消してSVGエレメントを取得できるようにしていきます。

SVGとはScalable Vector Graphicsの略です。サイズ変更可能な（Scalable）、ベクトル形式の（Vector）、グラフィック（Graphics）の名前の通り、画像データがベクトル形式で記述されていますので、サイズ変更が可能です。

例えば、黒い直線を引くときにPNG等の画像データでは直線部分のドットを黒く表現します。その為、サイズの小さな画像データを拡大すると、そのドットが拡大されるだけですので、直線の輪郭がギザギザになってしまいます。

一方で、SVGでは直線の始点と終点の座標で表現されますので、拡大してもギザギザになることはありません。

前述のとおり、SeleniumでSVGエレメントをBy.XPATHで取得しようとするとエラーとなってしまいます。解決方法は2通りあります。

By.XPATHではエラーとなってしまうSVGエレメントですが、By.TAG_NAMEやBy.CSS_SELECTORでは取得する事ができます。

TAG_NAMEやCSS_SELECTORだけでエレメントを特定できる場合にはこれで良いのですが、XPATHを使わないと特定できない（しづらい）時もあるかと思います。

そんな時には次の方法を使用します。

XPATHでsvgをタグ名として取得しようとするとエラーとなってしまいますが、local-name()関数を使用して以下のように記述することでSVGエレメントを取得することが可能です。

element = driver.find_element(By.XPATH, "//div[@id='id_name']/*[local-name()='svg'"]

最後のノードの部分を/svgとするのではなく、/*[local-name()=’svg’]とすることでSVGエレメントを取得する事ができます。

SVGエレメントに限らず、タグ名で上手く取得できない場合にはlocal-name()関数を試してみましょう。