SVG Wrappers for Kindle?

SVG Wrapper without Padding Hack

So, what if we discard the padding hack, which depends on fragile support for relative and absolute positioning, along with padding? Discarding the hack seems to work reasonably well with the same large image, especially if the container div and SVG are allowed to fill the width of the screen. However, a lot of “leftover” viewbox white-space may remain, most noticeably on smaller screens. Kindle consistently added a page break before and after the container div, so the result is no different than if you had isolated the SVG on its own page by splitting the file.

In Sigil, you can drag the the preview window to (unrealistically) large or small sizes to exaggerate the white-space issue. If you make the preview window large enough, the caption and bottom of the image will start to disappear. The svg image scales but its container does not. If you make the preview window very narrow, the image and caption will scale down, surrounded by oceans of blank space.

But back to reality — behavior is the same on all the Fire devices, with a page break before and after the large image. Even though there appears to be room for the chapter text to continue below the image, the SVG container does not shrink to fit the image. With small images, the page breaks might look awkward; with a big one, the weirdness is not as noticeable.

The HTML code:

<div class="svg-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-inner" preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 700 832" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g font-size="32px" systemLanguage="en">
      <image height="100%" width="100%" xlink:href="../Images/red-mom.jpg"/>
      <text style="text-anchor:middle" x="50%" y="104%">
        Red Riding Hood says goodbye to her mother
        <tspan dy="40" x="50%">SVG Wrapper without Padding Hack</tspan>
      </text>
    </g>
  </svg>
</div>

CSS to hide from Mobi:

@media amzn-mobi {
.kf8 {display: none;}
.svg-container, .svg-wrapper {display: none;}
.reg-caption {font-size: 90%;}
}

Screenshots:

As you can see, the image and caption are glued together alright, but you must provide fall back support for devices and eReaders that don’t support SVG. A simple page break or file split would save time.