Kepub image and viewer question

[Hypernova]

Hi all. I've done so many searches and did not find a solution. Basically, I want to make the kepub viewer works for the image in the books. Most of the time double tapping the image in kepub won't work for me. So I examine the book and it turns out that the image viewer only works when the html file only contain images with no text. If the image is the first thing in the html file, then the image is displayed fullscreen correctly but the double tab viewer still won't work. If there are text before the image, then, unless the margin is small enough, the image will also spill into the next page.

For reference, here is what how an image entry looks like in the epub I usually downloaded.

<div class="svg_outer svg_inner">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 2415 3494" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="3494" width="2415" xlink:href="../Images/image.jpg"></image>
    </svg>
</div>

The best thing I can do is doing epub->kepub (or ->epub) conversion using Calibre and adding extra css:

div {
page-break-before: always;
page-break-after: always;
}

But the page-break-after seem to be ignored. The resulted epub will split to a new html file every time there's an image, but the file has the text after the image. This, as mention above, make the image appear correctly fullscreen but still no double tap viewer.

Is this what you experiencing as well? Is there any solution? I'd prefer to use KoboTouchExtended driver to do on-the-fly conversion, but without the real conversion the file won't split. I also would rather avoid forcing the page-break-before/after to every conversion, but if there is a way to make the double tab viewer work I may go for it.

[Hypernova]

I didn't even remember I made this post but stumble upon this by change during a search. Anyway, the reason I made a reply is because I've found a solution (loooong after I forgot about this post) so I want to put it here for reference.

svg won't play nice with the image viewer, so I need to convert it to <img>. Here is my regex replacement string:

search:

<div\sclass=\"svg_outer(.*?)xlink:href=\"(.*?)\"(.*?)</div>

replace:

<p>&nbsp;</p>
<div class="svg_outer svg_inner">
	<img style="max-width:100%;max-height:100%" height="auto" width="auto" src="\2"></img>
</div>

The one line empty space is needed because if the image is too big, somehow a different behavior is trigger when double tap.