Wrestling with SVG in ePub for Kindle KF8


I’ve updated the title to correct my use of “mobi”. Lewis is the epub expert, and I assumed that the file we were previewing in Kindlegen Previewer for “Kindle Voyage” was a mobi. It was not!

Apologies for the schoolgirl error.

This week, I have had a monumental struggle to get SVG images, created in Adobe Illustrator, to show up correctly in an epub file converted through Kindlegen Previewer. Unlike the straightforward epub file we generated for iBooks (which came in perfectly and looks absolutely spot on) the inline SVGs either didn’t show up at all, or were squashed vertically with an enormous amount of white space top and bottom.

I spent hours combing through svg embed examples, assuming something was wrong with my markup. Nothing seemed to help, and the markup worked fine everywhere else, even the file itself, when dragged into a browser, behaved exactly the way I expected it to. So what was I doing wrong? As it turned out it wasn’t me, it was Illustrator that was the problem.

The images I was embedding had been taken through a process in Illustrator to ensure they were retina friendly. Each graphic was selected (as a group) and resized by 133.333% (as suggested here) and then the artboard changed to “fit artwork selection”. Initially I didn’t zero the x,y positioning of the artboard but later investigations showed me that didn’t make a huge amount of difference even when I did zero it.
I found lots of examples of how to embed SVGs using the svg tags and viewport settings, but almost all of these related to adding the objects manually (such as a rectangle or some text) rather than bringing in an SVG vector graphic. I wonder how many others have been frustrated by the lack of information online…? However, I managed to nail down that the problem was down to the Illustrator SVG not honouring the x,y positioning of the artboard in the viewport by looking that the file in Notepad. Here’s what I found:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ch1_x5F_Fig1_xA0_Image_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 -1280 800 568.2" enable-background="new 0 -1280 800 568.2" xml:space="preserve">

Every time I opened an SVG in Illustrator to check what the problem was I seemed to have artboards that matched the “Kindle Fire” setting. Why, I have no idea sadly.

After opening several SVG files back up in Illustrator it was clear to me that the problem was with Illustrator and not my markup. And it seems, I was right. That link is a few years old, and viewbox is now supported. But it doesn’t look like it’s working as intended…

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
inkscape:version="0.91 r13725"
viewBox="0 0 700 492"

My somewhat clumpy, but only foolproof solution was….. to download Inkscape, open each Illustrator generated SVG file and repeat the ‘resize artboards to selection’ step, round the viewport up to the nearest pixel and re-save as an SVG. Then (hurrah!!!) it all worked perfectly.

NB: I have had to re-create the problem here with the first SVG code as hilariously, today I cannot seem to replicate the problem. One thing that is evident, there is a lot of cruft in the Inkscape version, which I am not confident about stripping out. I don’t think it makes much of a difference to file size though.

After checking the epub through the rather spiffy FlightDeck , it also transpires that Illustrator injecting the Doctype into the SVG is also a massive issue and invalidates the svg for use in an ePub file.

Leave a comment

Ninja Beaver Head
Illustrators Agency logo

To source illustration through an agent, Sarah can be hired through the illustrators agency