MobileRead Forums - View Single Post - Clickable SVG not working in Android e-reader

avnermoshkovitz · 06-20-2021, 02:44 PM

Hi,
I want to implement a clickable dot in an eBook.

I can add a dot (via svg circle) but it is not clickable in an eBook.
I tried with several e-readers on Android such as:

Epub Reader
fbReader
Libra Reader
Kotobee

The same code does work in the browser. See in: https://codepen.io/avnerm/pen/wvJZWWG

The SVG wiki gives an example eBook Breakfast in Bridgetown.

I tried to read it in an e-reader in Android, but clicking in the interactive map doesn't work properly.
The map Portland Breakfast Places says: Touch an area to locate restaurants in that vicinity.

When I click on an area, nothing happens.
At most, if I click in an area which is on the right side the page flips to the next page, but does not navigate to the intended page.

The section "How to create an ePub Cover Image" in Ebook_Covers also gives an examples on how to create clickable SVG (the code is attached here again for clarity).
I tried running the following code and here as well, the SVG element is not clickable.

Code:

<?xml version='1.0' encoding='utf-8'?>
 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <link rel="stylesheet" href="../styles/style001.css" type="text/css" />
 
 <title></title>
 </head>
 
 <body>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
 <image width="573" height="800" xlink:href="../images/img0032.png" />
 </svg>
 </body>
 </html>

Is there an Android reader or iOS reader app that can read clickable SVG?

Thanks,
Avner

06-20-2021, 02:44 PM	#1
avnermoshkovitz Member Posts: 22 Karma: 10 Join Date: Jun 2021 Device: Any ereader for Android or iOS	Clickable SVG not working in Android e-reader Hi, I want to implement a clickable dot in an eBook. I can add a dot (via svg circle) but it is not clickable in an eBook. I tried with several e-readers on Android such as: Epub Reader fbReader Libra Reader Kotobee The same code does work in the browser. See in: https://codepen.io/avnerm/pen/wvJZWWG The SVG wiki gives an example eBook Breakfast in Bridgetown. I tried to read it in an e-reader in Android, but clicking in the interactive map doesn't work properly. The map Portland Breakfast Places says: Touch an area to locate restaurants in that vicinity. When I click on an area, nothing happens. At most, if I click in an area which is on the right side the page flips to the next page, but does not navigate to the intended page. The section "How to create an ePub Cover Image" in Ebook_Covers also gives an examples on how to create clickable SVG (the code is attached here again for clarity). I tried running the following code and here as well, the SVG element is not clickable. Code: <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="../styles/style001.css" type="text/css" /> <title></title> </head> <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet"> <image width="573" height="800" xlink:href="../images/img0032.png" /> </svg> </body> </html> Is there an Android reader or iOS reader app that can read clickable SVG? Thanks, Avner Last edited by avnermoshkovitz; 06-20-2021 at 02:47 PM.