Getting Started with SVG for Kindle
You’ll need a test ePub to see what happens to SVG files or wrappers when processed by Kindlegen (standalone or bundled with Kindle Previewer). If you use Sigil, it can make an SVG book cover page for you to serve as an example of responsive inline SVG on an isolated page. Upload a JPEG that seems suitable, then click Tools/Add cover. Look at the generated code to see how it works. It doesn’t matter that Kindle discards the page and converts the SVG to JPEG when you run it through Kindlegen. It’s served a good purpose as a teaching example.
In my test ePub booklet, I used a few public domain images and text from the fairy tale “Little Red Riding Hood” for SVG experiments with Sigil. You could use Calibre if you’re more familiar with it.
A preview screenshot from Sigil is shown above-left. Here’s the generated code:
<div style="text-align: center; padding: 0pt; margin: 0pt;"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 700 897" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="897" width="700" xlink:href="../Images/cover.jpg"></image> </svg> </div>
Notice that the code encloses the SVG in an outer div element and that the SVG element includes the xmlns namespace; these two things are important for validation with epubcheck or FlightCrew. The SVG uses percentages for width and height, and contains preserveAspectRatio and viewBox attributes. The image’s pixel dimensions match those of the viewBox. These characteristics are typical and work well for a wrapper containing only an image. When you add a caption, things get slightly more complicated, but this is a good starting point.
Download my test files booklet to play with simple examples in this post: