SVG in eBooks – Packaging the Graphical Web for Offline Use
What is an eBook?
What we have in the ebook world is worse than the days of ‘best in IE’. It’s crazy that we don’t have one ebook file format that works in all readers.
Baldur Bjarnason, April 2012
It might look awkward to start a paper for a conference about web technologies with such a broad question. But the term “eBook” means many things to different people and those must be defined clearly at first before figuring out where Scalable Vector Graphics fit in.
First of all the eBook is literally a digital representation of a book, regardless of content. The idea to replace physical paper based books with digital files long predates the era where book-like e-reading devices were even available. To this day no computing device is able to imitate the traditional book in all its aspects, e.g. display resolution, weight, annotations, layout, reading in sunlight, resilience to water or longevity in general to name just a few and leaving out the emotional factors of smell, textures and tradition.
Therefore eBooks adapted a different approach where some of the weaknesses of digital displays (low resolution) where instead turned into strengths in that font-sizes could be adjusted. So early on it became clear that eBooks could for a long time not be PDFs of their printed counterparts. This lead naturally to reflowable content as is the case on the web and it comes as no surprise then that eBooks incorporated a lot of web technologies.
However eBooks gained widespread adoption only after reading devices beyond traditional laptop or desktop computers became available and affordable that could match at least some of the properties of physical books, mainly form-factor and weight. Nevertheless trade-offs had to me made: There is the light weight and low cost e-ink based reader that works great in sunlight but lacks color graphics and on the other hand the back-lit tablet that still comes at a higher weight, price and with a reflective screen but powerful color-graphics with low-latency touch-based interactivity.
Reflowable content versus fixed layout
It is along those trade-offs that different kinds of content is developing. Longform reading of (reflowable, zoomable) text with little or no graphics in between, makes the majority of eBooks available. On the other hand interactive, feature rich, graphical content, that may require a fixed layout, is on the rise as tablets become smaller, lighter and more affordable. Both types of eBooks have in common that they come as a package that may be sold but that will always be usable without an internet connection.
In an online discussion on the nature of the ebook Baldur Bjarnason came to the following conclusions about what an eBook was (21 December 2010):
- eBooks are content containers.
- Books are to be read, page by page, websites to be browsed.
- eBooks only provide portability nothing else to be different from a browser.
- An eBook is different than a website because it’s expanded and updated less frequently.
- An eBook has a beginning, a middle, and an end like its printed counterpart, but the ordering of the content is up to debate.
- Longform text, prose or poetry, in a digital context.
- It doesn’t have to be linear, but if you replace the longform text with video & twiddly knobs, it ceases to be an eBook.
- Browsers are hostile to reading. They don’t feature tools for highlighting, no built in notes, no cross-device synchronisation, no book-level metadata/search. Browsers are designed for info-grazing.
- ePub/ereading systems etc are a transitional stage for the written word. Almost a ghetto created by corporate, technical, or marketing needs.
It wouldn’t surprise if readers have different views on some of those arguments. Ever since the time of Macromedia Director and the Multimedia CD-ROM people have experimented with different ways to present content in a non-linear way, affording interactive navigation and an audio-visually enhanced experience. Some would argue that these new ways of engaging with content allow for a deeper or faster understanding or just keep attention deprived people interested. Others would just prefer their paperback books to not occupy valued shelf space and therefore see the easier storage as their main goal in switching to eBooks.
Relationship to the Web, Questions of Openness
Unlike the web, eBooks are much closer tied to their reading environment (both hard- and software). This dependency wouldn’t be necessary but is a result of commercial realities, as e-reading devices are to eBooks what shavers are to blades. In other words: Give away the one thing cheaply or even at a loss in hope of binding a customer into purchasing the complimentary goods forever.
The Ecosystem Euphemism
Right now eBooks mostly come together with their reading device hardware which again is sold by the same company that sold the eBook. To make this look more natural than it is the term ecosystem is used in this context so often that it deserves to stop for a moment and look at what an ecosystem is in nature:
An ecosystem is a community of living organisms (plants, animals and microbes) in conjunction with the nonliving components of their environment (things like air, water and mineral soil), interacting as a system … Ecosystems in similar environments that are located in different parts of the world can end up doing things very differently simply because they have different pools of species present. The introduction of non-native species can cause substantial shifts in ecosystem function. – from the Wikipedia entry on the very subject in nature
From the beginning of that definition the use of this metaphor becomes apparent but then later on it describes much more to me what happened on the web with a variety of browser vendors, some of which caused substantial shifts in ecosystem function. At times this was called browser wars but in recent years we are enjoying peace under the HTML5 umbrella with maybe some family dispute here and there.
Given that the device-content symbiosis is further strengthened by the use of DRM, the term (information) silo is much more apt for what we are witnessing in the eBook environment.
Before I go off on a tangent let us all be reminded how wonderful the open web is when compared to the current eBook situation. It may well be that the eBook market will follow similar paths than the browsers did in the long run (see Baldur Bjarnason, 15 April 2012, arguing how Amazon could move to an open non-DRM ePub based store and abandoning their own hardware).
The app-web-book continuum
From a technical perspective some eBooks might be better off as an app, i.e. native software that makes use most of the benefits a certain operating system offers.
The more difficult and complex the ebook is, the greater the likelihood is that it should have been a website or an app. … A lot of what is non-fiction in publishing today is being taken over by websites and apps. They should be websites or apps. Trying to extend ebooks to cover all of these use cases (ends) is foolish. It’s crazy that I can only buy Merriam-Webster’s English Usage Dictionary as a Kindle book and not as an app. (Baldur Bjarnason: The web and eBooks have little in common, 7. May 2012).
Availability of reading environments for testing
If you considered browser-testing a pain already then welcome to the world of eBooks. Most eBook reading engines can only be tested by owning the complimentary hardware, of which a lot are only sold in limited regions of the world. A welcome exception is Amazon’s kindle system that offers preview software free of charge which can be run locally and simulates the varying hardware devices. Baldur Bjarnason argued to treat ebook developers as developers (12 March 2012), pointing at the lack of preview apps, web-inspectors and generally well documented specifications that are consistently implemented.
With this the author has to admit that he was only able to derive his practical knowledge in testing eBooks on Kindle e-ink hardware, Kindle apps for iOS and iBooks reading software on Apple’s iPad. And the device landscape is moving fast.
As of this writing, Amazon has invited the press to showcase its next iteration of consumption devices, which will be revealed just before The Graphical Web Conference (6 September 2012). Also one can expect the soon to be released Microsoft Surface as well as Android based tablets to offer eBook reading apps of varying capabilities that couldn’t be taken into consideration for this paper.
The need for resolution independence
This is where the idea for this paper had its origin: As display resolutions made a significant leap forward recently (marketed as high-dpi or retina) a graphics format such as SVG that is resolution independent seems like a panacea.
However vector graphics support in e-ink based readers is non-existent and while it is supported in tablets with a touch enabled color display, implementations, file-formats and authoring tools vary widely.
eBook readers are meant to handle resizing, and reflowing as core values. SVG is a major contributor to delivering these values now and in the future. (Richard Pipe, December 2008)
This all sounds pretty familiar to people who have evangelized the use of SVG early on. Great advantages in theory but a long winded road to widespread adoption.
How e-reading environments support SVG
The HTML equivalent in the eBook world is a format called ePub. Apart from Amazon’s Kindle family of devices – which is a big exception given their market share – this format is supported by all eBook reading environments (Wikipedia: Comparison of e-book formats).
EPUB defines a means of representing, packaging and encoding structured and semantically enhanced Web content — including XHTML, CSS, SVG, images, and other resources — for distribution in a single-file format. EPUB allows publishers to produce and send a single digital publication file through distribution and offers consumers interoperability between software/hardware for unencrypted reflowable digital books and other publications. (International Digital Publishing Forum)
Baldur Bjarnason conducted an epub experiment wherein he constructed an ePub that contained the Modernizr library to test the availability of web technology features. Here is what the results look like in current iBooks reading software on an iPad as of August 2012:
The Modernizr feature test running in an ePub file in Apple’s iBooks reading software on an iPad
Clearly SVG is a supported technology in iBooks on the iPad. This spurred my interest but further research showed that most eBook reading software doesn’t support JavaScript (security implications), which would be required for the Modernizr test to work.
According to the Kindle Publishing Guidelines Version 2012.4 use of JavaScript on the Kindle platform is reserved for Amazon use only. According to those Guidelines support for Scalable Vector Graphics (SVG) that can be zoomed without loss of fidelity is as follows:
- e-ink Kindle: NO
- Kindle apps for iOS, PC, Mac, Android: NO
- Kindle Fire: YES (KF8)
Amazon further states in its Kindle documentation :
Image Guideline #1: The Kindle platform supports GIF, BMP, JPEG, non-transparent PNG, and Scalable Vector Graphics (SVG) images. Add images to the source using the standard HTML <img> tag.
HTML Guideline #7: Scripting is not supported. All scripts are stripped from the source during conversion. SVG with animation is not supported.
Using the display:none Property with SVG Images. The SVG image format is supported in KF8, but not in Mobi 7. With the display:none property, you can use an SVG image for the KF8 content and a JPEG image for the Mobi 7 content. To swap these versions accordingly use CSS media queries: @media amzn-mobi
Common practice of using the SVG viewbox to scale bitmaps
Searching for “SVG in ePub” on the Internet reveals some surprising and widespread (mis-) use of SVG: The SVG image element isn’t used to display vector information and gain high fidelity display on modern displays but instead the SVG viewbox is used to scale bitmap images to the device dimension:
for some types of books (such as manga, comics, or graphic novels), ePub doesn’t seem to be able to handle large images that should fill the screen. It is possible, though, to stick with ePub and get perfect results for illustrated ebooks, using the forgotten (or perhaps simply overlooked) svg image element. … The svg element … stretches the image to fill the entire screen, while preserving the aspect ratio. (Illustrated ebooks with epub: using the svg image element, by Denis Papathanasiou)
Tools for (e)Book creation
So far we have examined why SVG should be used in eBooks and which environments support it. But as longtime SVG enthusiasts will acknowledge, there is a chicken-and-egg situation with technology adoption. Familiar tools need to be available with which publishers can incorporate the latest technologies or otherwise they will be left unused. Only a tiny fraction of authors will be able to construct ePub files from scratch according to the specification.
Naturally one would expect software for creating books or structured texts to be a good fit for a workflow that outputs among other things eBooks. This is indeed the case and the development of Apple Pages and Adobe InDesign show the direction.
While exploring the possibilities of using SVG in eBooks the most depressing realisation was that almost all of the tools used to create books don’t really support SVG as a graphics format. This isn’t really surprising once you think of the evolution of these formats:
For people in the print world vector graphics meant Postscript and only later on with the advent of InDesign, PDF and Illustrator became first class citizens in print based workflows. On the other hand, the web has for a long time been without vector graphics and anything web related was a strict no in the print world.
Word Processors: MS Word, OpenOffice Writer, Apple Pages
While Pages can export to ePub on its own since version 4.0.4 (August 26, 2010), of all the common word processing tools only OpenOffice (and its sibling LibreOffice) natively supports SVG. There are two extensions for the OpenOffice suite that allow Writer documents (.odt) to be exported to ePub, but neither Writer2ePub nor Writer2xhtml lets you export ePubs with intact SVG graphics. In case of Writer2ePub even small icons were converted to jpg and larger SVG graphics exported only in parts. Writer2xhtml also dropped SVG files in their export to ePub. These results were obtained with the versions that were current as of July 2012.
Page Layout Software: Adobe InDesign
Given that larger publishing houses often use the page layout software Adobe InDesign, it seems a natural fit first for re-using existing content that was intended to be printed and then – as people are already familiar with the tool – for creating new content with specific eBook capabilities in mind.
The evolution of Adobe InDesign in this regard reflects the varying technology decisions of the day: From Version CS4 on (November 2008) Adobe dropped native SVG support in InDesign and instead started supporting export capabilities to Flash.
InDesign Versions CS4–CS6 don’t support SVG as an image format
Then in April 2010, Apple introduced the first iPad together with the iBooks book reading software which supported the open ePub format. The same month Adobe came out with version CS5 of their publishing suite, wherein InDesign got the capability to export to the ePub format (see also InDesign Version History at Wikipedia). Later versions of InDesign gained – among other things – more sophisticated support for ePub creation. The latest version CS6 (May 2012) e.g. allows for liquid or alternate layouts to support different device sizes or screen orientation, further blurring the distinction between book and web.
When a 3rd party was advertising an InDesign plugin that would support SVG graphics in recent versions of InDesign, an eBook workflow containing vector graphics seemed possible:
With the 3rd party plugin “SVG-Kit” installed, SVG images can be placed in InDesign documents just like EPS or PDF
As of July 2012 SVG content can only be used natively in InDesign CS4–CS6 via a commercial third party plugin, the SVG Kit for Adobe Creative Suite by Belarus company Scand Ltd. This plugin is based on Apache Batik 1.7 with custom patches. Placed SVG graphics will be exported as vector graphics (e.g. in PDFs) and native InDesign path effects can be added to those SVG graphics within InDesign. In case of exporting to ePub, SVG images could become an unaltered part of the eBook. The company’s documentation page offers an example file where this has been successfully done: SVG image in ePUB document.
“Image Conversion” cannot be turned off in the CS6 ePub export dialog
Unfortunately there are some quality issues with this plugin, e.g. the Windows installer is not signed and the developer didn’t respond to questions. The current version 2.0.1 (June 30, 2012) recognizes and supports CS6 both on Windows and OSX but the InDesign CS6 export dialog for ePub doesn’t allow for specifying that SVG images should not be converted (applies to CS5, CS5.5 and CS6: SVG images will be converted to bitmaps during the ePub export no matter what).
InDesign CS4 “Digital Editions” dialog for ePub creation
Only in combination with InDesign CS4 will the SVG Kit plugin offer the option to leave SVG images untouched during ePub export, but CS4 on the other hand lacks a lot of advances in designing for e-readers.
We have to conclude that there is currently no viable option to produce ePub based eBooks with Adobe InDesign that contain SVG images. Certainly one could think of scripts that replace bitmaps with SVG files in an ePub after it has been exported from InDesign, but at least this would imply handling of all assets in multiple formats and involves additional programming efforts.
Amazon Kindle Export plugin for Adobe InDesign
Amazon offers among its software for generating kindle format eBooks a plugin for Adobe Indesign. As of August 2012 this is still beta software and the installer is also not yet signed. The plugin lets you export to .mobi with images in ‘original’ format:
Kindle export options in InDesign allow images to remain in their original format
However it could not be verified if SVG placed in InDesign with the help of the above discussed SVG Kit really will be transferred as the original SVG file, since the kindle preview application doesn’t allow zooming and kindle fire hardware isn’t available in Europe.
iBooks Author
As one would expect from Apple, their authoring tool for graphical rich “textbooks” as they call them, produces stunningly beautiful experiences but uses SVG under the hood in the weirdest way possible and limits authors in significant ways with regard to content, business and audience. Textbooks that are created with iBooks Author can only be used on Apple’s own iPad hardware, and in case of paid content, it has to be sold through Apple’s own bookstore which takes 30% commission and authors will be subject to content restrictions.
iBooks Author therefore probably doesn’t deserve to be mentioned in any context where “open” has a significant meaning. Nevertheless the tool shows what interactive and graphically rich eBooks could be like and what a difference a theme-based WYSIWYG tool can make. It is also currently the only tool that lets you embed interactive SVG content in any meaningful way.
iBooks Author lets you insert “widgets” that may contain SVG
You can see from the above example that the program looks quite similar to Apple’s presentation software Keynote and there are also layout concepts available that remind of Adobe InDesign. Unlike most eBooks what you see here is a fixed layout that allows for full page bleeds and there is actually an interactive SVG map in there (see the example used here on the web: Election Atlas 2012).
As is the case with Apple’s Word processor Pages and its presentation software Keynote, iBooks Author doesn’t let you place SVG directly. But it offers to embed so called Widgets that are self contained webpages. The concept of Dashboard Widgets was introduced with Apple’s OSX 10.4 “Tiger” operating system in 2005 and is re-used here. The idea is to add interactive features to a textbook that might be produced by someone else and can be handled just like images in layout. The interactive widget however will become interactive on touch and might even open in full screen.
Apple developer tools includes Dashcode which is a WYSIWYG editor for Dashboard Widgets. In case of existing SVG content it is advisable to build that widget by hand. It basically involves following a given folder structure, naming conventions and some XML files. O’Reilley’s mac devcenter has an excellent article called Build a Dashboard Widget which will let you do just that with very little effort. Ironically you can build interactive widgets that contain SVG and JavaScript and will display in iBooks on iPad but they will not work in the OSX Dashboard environment.
You can try out the following example file made with iBooks Author: Interactive SVG map in an iBooks textbook (.ibooks, 1.7 MB). It requires iBooks reading software version 2.0 or later on an iPad. The example contains a fully functional interactive thematic map using HTML5, SVG, CSS and JavaScript.
‘Construction’ Tools: Sigil
In terms of open versus closed, the other end of the spectrum marks an open source ePub editor called Sigil. This software feels very foreign on an OSX operating system as it makes no use of the standard OS user interface and therefore takes some time getting used to.
It is more of a ‘construction’ tool with its multiple panes: file browser, coding text editor, preview window etc. The user interface may remind of Coda from Panic Inc. in that it helps organize all the files of your ePub project. Even though Sigil considers itself a WYSIWYG editor, the workflow for creating an ePub with it is probably only possible for people with some programming background.
The Sigil environment showing an ePub with an SVG image
Conclusion
The longish thoughts on eBooks in general may make you consider other options when it comes to great graphical fidelity, mainly using the modern web. The question of how to package a series of graphically rich web-pages for offline use with the possibilities of HTML5 in this regard may be easier to solve than marrying eBooks with SVG. Selling content this way will be harder though as there are no established stores for these kinds of content.
It is probably a little early to use vector graphics in eBooks in 2012 and in many cases the advantages of SVG come at too high a cost of implementing them. Hopefully this paper evokes some response from Adobe as to what can be expected from InDesign and SVG in the future.
If for the time being you can afford to restrict yourself to Apple’s iBooks author silo with all the side effects described above, that’s the most comfortable way to re-use SVG content in eBooks and it is currently the only way to integrate a fully interactive SVG web app into an eBook.
Using SVG in eBooks via Sigil or by programming your own tools is probably restricted to people with a deep engineering background.
