EDITORIAL
TECHNIQUES Adventures With SVG In ePub
JAVASCRIPT Keyboard Class
ARTIST’S CORNER The Art Of Programming

TECHNIQUES

Adventures With SVG In ePub

How To Include Illustrator SVG Files Into eBooks
Author: Jon Ferraiolo, Distinguished Engineer, IBM
Published: October 2014

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 [1] 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 [2]. 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:

  1. META-INF/
    1. container.xml
  2. mimetype
  3. OPS/
    1. images/
    2. package.opf
    3. styles/
    4. toc.ncx
    5. html/
      1. chapter001.html
      2. chapter002.html
      3. etc.

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.

The actual chapters of the book are HTML pages, which style the content using CSS (presumably in the styles/ folder above) and optionally can embed graphics (presumably in the images/ folder). The embedded graphics can be in any web format, either raster (PNG, JPEG or GIF) or vector (SVG). It is common for eReaders today to disable JavaScript, so that precludes the use of Canvas.

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 [3]). 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 [4]. 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:

Raster version

raster image

Vector (SVG) version

svg image

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):

These techniques were used successfully in the eBook version of the BrandingPays book, which you can find at various online bookstores:

  1. Amazon
  2. Barnes and Noble
  3. iTunes
  4. MyTabletBooks

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.

Conclusion

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.