SVG Wrappers for Kindle?

SVG Wrapper with Smaller Image at Specific Dimensions

Finally, I wanted to see what would happen with a smaller illustration inserted using inline SVG with specific pixel dimensions for the outer div, the SVG element, and the image. Although it doesn’t scale proportionately with the viewport, it can keep small images with their captions, and it does not create extra white-space. Not so bad, I think! An alternate JPEG image is displayed in Kindle DX and other Mobi7 devices.

HTML Code:

<div class="svg-wrapper-nonr">
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-content" version="1.1" viewBox="0 0 370 510" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g font-size="22px" systemLanguage="en">
      <image height="450" width="350" xlink:href="../Images/wolf-350.png"/>
      <text font-family="sans-serif" style="text-anchor:middle" x="50%" y="92%">
        Wolf knocks at Grandma's door!
        <tspan dy="25" x="50%">Inline SVG - Small Image</tspan>
      </text>
      <rect fill="none" height="508" stroke="#ccc" stroke-width="1" width="368" x="1" y="1"/>
    </g>
  </svg>
</div>
<div class="mobi-content" style="text-align: center; margin-top: 1em; margin-bottom: 1em;">
  <img alt="wolf-350" height="500" src="../Images/wolf-350.png" width="350"/><br/>
  <p class="center">JPEG for Mobi</p>
</div>

CSS:

@media amzn-kf8 {
  .mobi-content { display: none; }
  .svg-wrapper-nonr {
  position: relative;
  text-align: center;
  margin: 1em auto;
  width: 370px;
  height: 510px;
  }
}
@media amzn-mobi {
  .kf8 {display: none;}
  .svg-container, .svg-wrapper, .svg-wrapper-nonr {display: none;}
  .reg-caption {font-size: 90%;}
}

Screenshots: