[JSWolf]

Originally Posted by Falkor

This kinda works for me:

<figure>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 960 1207" preserveAspectRatio="xMidYMid meet"><image width="960" height="1207" xlink:href="../picture.jpg"/></svg>
  <figcaption>This is a caption</figcaption>
</figure>

figure {
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  display:block;
}

figure > svg {
  height:80vh;
  width:100%;
}

figcaption {
  height:18vh;
  }

The trick was to not give the figure a height. That eliminated all kinds of issues.

Are your eBooks supposed to be backwards compatible? Because if so, your code won't work. If not, then your code is OK.