Creating An EPUB WIth SVG Animation

The Workflow

Creating an EPUB with embedded SVG Animation is relatively easy, once you have worked out a reasonable workflow. It is very similar (for obvious reasons) to creating an EPUB withe embedded WebGL. For more infrormation follow that link. There are, however, a few differences.

Page Layout

All the pages are reflowable, but since SVG isn't, the outermost (root) SVG element has to have a viewBox attribute that will control how the SVG is scaled when the page is resized. For example, here is the <svg> element from the Bouncing Tiger demo:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                   viewBox="0 0 720 960" preserveAspectRatio="xMinYMin meet">

The biggest problem with this approach is that not all the browser engines handle the viewBox attribute correctly or consistently. But it works pretty well for the most part.

Also, like the WebGL EPUBs, each "chapter" consists of two files, both XHTML. One is the explanatory content while the other is just a simple wrapper that loads

Loading the SVG

The SVG content is separate files from the XHTML which embeds it. In theory, you can embed SVG content directly in the spine. This does work in some reading systems (e.g. Readium, of course) but even in the ones that it does work in, the handling of changes in page size are often spectacularly wrong. So it was simpler and more consistent to embed the SVG within XHTML.

It would have also been possible to embed the SVG inline within the XHTML but for code-maintenance reasons, it was simpler to have the SVG as separate files and load them via the object tag. Again, from the Bouncing Tiger demo:

<object type="image/svg+xml" data="../svg/bouncingtiger.svg" >
        <p>Unable to load the bouncingtiger.svg file</p>
</object>

Formatting

Like in the WebGL EPUBs, PrismJS is ised to colorize the HTML, JavaScript and SVG code for better readability. This requires that each block of code to be colorized be wrapped in a <code> element and the language specified as part a CSS style, e.g.

<code class="language-svg">

Finally, all the illegal HTML characters need to be escaped (e.g. &lt; etc.). This is a bit of a pain, especially where there is more HTML and SVG code than in the WebGL EPUBs since a fair amount of escaping has to be done.

Example

Clicking this link will download an EPUB with the SVG animations shown on this site.



About Us | Contact Us | ©2017 Geo-F/X