SVG Wrappers for Kindle?

Regular SVG files with Shapes and Text

Simple SVG files displayed without any serious problems on the Kindle. Since they’re small and don’t lose quality when resized, I would definitely consider using them when appropriate. If you use Adobe Illustrator, you can save vector files as SVG. Open Office also has some support for SVG exports.

Screenshots for HDX and Paperwhite:

Lessons from this Experiment

Kindle Previewer was able to display Inline SVG wrappers containing <image> elements referencing bitmap images, as well as SVG files and inline SVG. You must enclose SVG elements in a div to avoid an error message from epub validators. There are also some irritating, though not fatal, issues with extra white-space, responsiveness, and text that can become illegible on small screens.

There were no problems displaying an HTML img element with an SVG file as the src value. Such images have small file size and scale up or down without losing clarity. Unlike the SVG image element, the HTML img tag can use just a width element and it can be a percentage. That is, if you use width=”25%”, the image will always be 25% of the available horizontal space.

Although an object element referencing an SVG file worked fine in the Sigil editor, Kindlegen consistently removed it. I would stick with inline SVG and img elements and test thoroughly. Be aware that Kindle for iOS displayed the Mobi alternate images, and I would expect the same behavior with Android devices. Kindle for PC on Windows 8.1 displayed the SVGs.

The ultimate solution is for Kindle to support the CSS property display:inline-block in the same way that ePubs do. KF8 does support the display property, but Kindle Publishing Guidelines mention only display:none and display:block.

Authors who create children’s books for which fixed layouts work best should check into Amazon’s new Kindle Kid’s Book Creator. I tried it and was pleasantly surprised to see how easy it is use. You pick a horizontal or vertical orientation, add your images and text overlay boxes and it does all the work. Unfortunately, it’s all or none with fixed layouts; you can’t mix fixed layout pages into a Kindle book with page flow.