Adventures With SVG In ePub
It is well known that SVG (at long last) is ubiquitous in modern browsers. The last holdouts (IE 8 and Android 2) are disappearing from the landscape, so developers can confidently use SVG within their web content.
Less well known is that SVG has also become ubiquitous within eBook readers. The eBook industry has rallied around the ePub  standard, and that standard has required SVG support since its first ratification in 2006. Nearly all modern eBook readers support ePub (and therefore SVG within an ePub). The only major vendor that does not support ePub directly is Amazon, but Amazon provides a command-line tool that quickly converts ePub files into their native Kindle format.
eBooks And ePub
eBooks are taking over. In 2012, for the first time, the number of eBooks sold exceeded the number of hardcover books . The transition from print to digital is likely to accelerate. At some point in the not-too-distant future, printed books will be museum pieces.
As I mentioned previously, most eBooks today are authored in the ePub standard. ePub is mostly just HTML pages bundled inside of a ZIP file. If you take a MyBook.epub file, rename it to MyBook.zip, and then unzip the file, you’ll see something that looks like this:
The only required files in ePub are container.xml, mimetype and package.opf (ok to use a different name for this file). These files (along with the toc.ncx file) represent metadata files for the eReader, and specify things like author information, table-of-contents and the list of all chapters.
Why use SVG instead of rasters
One of the challenges with ePub is that an author must create exactly one ePub for his book, which he then submits to the various online bookstores, such as Amazon, Barnes&Noble, iBooks (iTunes) and many others. The single ePub version must render reasonably across all different eReaders, which have different screen sizes, different resolutions (as low as 600x800), different color support (e.g., many eReaders display their pages on black&white e-Ink screens, whereas others might use advanced color retina screens) and different rendering software (see WikiPedia’s Comparison of e-book readers ). Another factor is that some eBook stores, such as Amazon, have download size fee. An author will lose money if his eBook includes many large raster images.
I discovered in practice that raster images just aren’t suitable for certain types of eBook graphics. In early 2013, I helped my wife with the ePub version of her highly acclaimed book BrandingPays: The Five-Step System to Reinvent Your Personal Brand . This book had 38 figures. The original artwork for these figures was created by a professional graphic artist using Adobe Illustrator.
As is common today with major book launches, an author first creates the hardcopy version. The hardcopy version is often authored in Adobe InDesign, and you nearly always send a PDF to the printer. Once the hardcopy version is finalized and finally printed, then you create an ePub from the hardcopy (PDF) version.
The common way to convert from PDF to ePub is to hire a conversion service, which typically employs lower-price workers in the developing world. The conversion service can be ridiculously inexpensive, perhaps ~US$200 to convert a 200-page hardcopy book.
Believe it or not, the conversion service usually authors the HTML+CSS files for the ePub manually using a text editor by visually retyping the textual content from the PDF. If the original printed version (i.e., the PDF) has any figures, then the conversion service typically selects and then copies the figure out of the PDF and saves the figure in the images/ folder for the ePub.
In most cases, the conversion service will save a raster image even if the PDF contains a vector image, probably because the conversion service is not aware that SVG is an option. Furthermore, the conversion service usually only has the PDF for the print version (and therefore does not have the original Illustrator artwork).
What we discovered with the BrandingPays book is that many of the figures (when saved as rasters) were unreadable on many eReader platforms, mostly because the text content became too fuzzy. Here is an example:
Vector (SVG) version
As you can see, the SVG version is crisper and more readable overall, but most critically, the small text at the lower-left (“My Inner Circle”, “Department”, “Company” and “External”) goes from being unreadable in the raster version to at least minimally readable in the SVG version.
But getting a good SVG out of Illustrator is non-intuitive
We therefore concluded that we needed to replace the raster versions of the 38 figures with SVG versions. The good news is that we had the original Illustrator files for all 38 figures. The bad news is that Illustrator has some SVG export quirks, so creating suitable SVG files for the ePub file requires a bit of Illustrator cleverness.
Here are the steps I sent to the ePub conversion house for how to export proper SVG out of Illustrator CS5 (note: these steps utilize a new feature in Illustrator CS6 – the ability to set the size of the artboard to the size of the currently selected objects):
- Open up the *.ai file for the figure.
- Select the graphic elements that make up the figure. Note: in some cases, the *.ai file will have extraneous elements, such as some temporary graphics that the graphic artist might have created during the creative process. Do not select these extra graphic elements.
- Issue an Object→Transform→Scale command, and then scale all of the selected elements by 133.333%. This overcomes a bug in Illustrator where it exports SVG files under the assumption that device resolution is 72dpi, whereas most HTML+SVG renderers assume 96dpi.
- Issue an Object→Artboards→Fit to selected art command. This changes the artboard size to fit exactly to the bounds of the current selection, including any stroking along the border.
- Issue a File→Save As command. Choose SVG as the file type. On the SVG options screen:
- Set “Fonts/Type” to “Convert to outline” (This is for safety because you cannot count on eReaders having suitable fonts)
- Turn off “Preserve Illustrator Editing Capabilities”
- Under “More options”, set “CSS Properties” to “Presentation Attributes”
- “Optimize for Adobe SVG Viewer” should be unchecked
- “Include Slicing Data” should be unchecked
- “Include XMP” should be unchecked
- “Output fewer
elements” should be checked
element for Text on Path” should be unchecked
- Reference the SVG files using the HTML <img> element
(for example, <img src=”../images/importance_of_icing.svg” alt=”Importance of icing”/>).
- When testing your ePub in the browser, be sure to clear your browser cache before loading HTML files that refer to your SVG files (the browsers will often show an older cached version of a referenced SVG file if you don’t clear your cache).
These techniques were used successfully in the eBook version of the BrandingPays book, which you can find at various online bookstores:
As I mentioned earlier, a single ePub file was sent to each of these online bookstores, and that ePub file will be used to view the document across all of the devices that might be used to view the eBook.
It’s not obvious to most people that ePubs can contain SVG images, and certainly not obvious how to export proper SVG for ePub documents out of Illustrator. I was able to find the correct path because of my unique history: editor of the original SVG spec, member of the original ePub committee at the IDPF, former engineering manager on Adobe Illustrator, and author of the very first SVG exporter logic in Adobe Illustrator. I hope that others can benefit from the techniques I outlined above.