iBooks doesn't display SVG with bitmap art

[bcholfin]

If an SVG file contains any PNG or jpg data, that data won't display in iBooks. The workaround is to use <embed> instead of <img> to point to the SVG; then iBooks will read the embedded bitmap data. Other readers I've checked (Kindle, ADE, Firefox) seem to be okay with <embed>, so no separate version required.

[dvschultz]

@bcholfin just updated your post—some html content was getting lost in the markdown convertor.

[bcholfin]

Thanks--I forgot about that.

[TzviyaSiegman]

Can we just call SVG and iBooks an unhappy couple? When I tested multiple SVG images in one EPUB in iBooks 3.2/iOS 7.X on an iPad 2, the whole file crashed, then iBooks crashed. I got an iPad Air, and the SVG displayed, but page turns were kludgy. I'm not really comfortable releasing a file with more than 1-2 SVG images to iBooks because it affects performance.

[teytag]

From epub-revision:
https://code.google.com/p/epub-revision/downloads/detail?name=SampleCode_SVG-Based-ROI-for-Manga.zip&can=2&q=
https://code.google.com/p/epub-revision/downloads/detail?name=FF_presentation.pdf&can=2&q=

[elmimmo]

It is a bit more complicated than that. There are a zillion different ways to insert an SVG in an XHTML document, and browsers and ereaders’ support for externally referenced resources is different depending on the insertion method, most of them failing at some point on chained references (i.e. referencing an SVG document that references external resources itself).

embed is certainly not a safe method even for iBooks, as it will only load externally referenced images if the EPUB is of the Fixed Layout flavor. After some testing, I came to the conclusion that the only relatively reliable way to call external resources from within an SVG is with inline SVG (i.e. avoid chained references).

Here you have a table with my tests. I can provide the markup used to carry out these tests or even the EPUB itself (via a pull request?).

HTML with SVG with external PNG image

Markup	Safari 7.0.6	Chrome Canary 39.0.1131.0	Firefox 31.0	IE 10, 11	iBooks OS X 1.0.1	iBooks iOS 3.2	Google Play iOS 1.6.4.9543	Google Play web 2014-08	Google Play Android 3.1.49	Kindle1	ADE 1.7
inline	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
img				Y				Y		Y	Y
img (SVG as data URI)2
img (PNG as data URI in SVG)3		Y	Y	Y						Y	Y
img (SVG + PNG as data URI)23		Y	Y	Y							Y
CSS bg				Y						Y	Y
CSS bg (SVG as data URI)2
CSS bg (PNG as data URI in SVG)3		Y	Y	Y						Y	Y
CSS bg (SVG + PNG as data URI)23		Y	Y	Y							Y
iframe	Y	Y	Y	Y	Y	Y4
object	Y	Y	Y	Y	Y	Y4					Y
embed	Y	Y	Y	Y	Y	Y4				Y	Y

This table does not reflect the level of SVG supported (fonts, textPath…), which most probably also varies depending on the SVG insertion method, nor whether other types of externally referenced resources besides an external PNG image (by using the use element, for example) load or not.

This table does not reflect either where PNG transparency is supported. It is supported in all cases where the PNG displays, except for Kindle and Google Play web, where support depends on the insertion method of the SVG, and ADE 1.7 where it is not supported at all.

Footnotes

1. “Kindle” in this table refers to Kindle Previewer (1.922), Kindle Fire 1G (6.6.3), Kindle Fire HDX (13.3.2.5), Kindle 4 (4.1.1), Kindle for Mac 1.10.6. ↩

2. Google Play will not even process EPUBs uploaded to https://play.google.com/books/uploads that contain XHTML documents with data URIs (at least, it would not process this one, until those XHTML documents where commented out in the manifest and spine). ↩ ↩² ↩³ ↩⁴

3. Safari, iBooks for Mac and iBooks for iOS will initially not load the PNG embedded in a data URI, but then will do so if afterwards one opens the Inspector > Resources and selects, from the Resources list, the node index.html > image.svg > image.png. Go figure… ↩ ↩² ↩³ ↩⁴

4. iBooks for iOS loads the PNG referenced by the SVG document only on Fixed Layout EPUBs, not on flowing layout EPUBs. ↩ ↩² ↩³

[TzviyaSiegman]

Take a look at epubtest.org. Go to compare. You can download the test suite. Let me or someone from BISG, IDPF, or DAISY know if you think there are improvements/changes to be made to the files. This suite of files tests elements of the EPUB spec (SVG http://www.idpf.org/epub/301/spec/epub-contentdocs.html#sec-svg). In the future, there is talk of adding tests that document what happens when you go beyond spec.

[elmimmo]

I did look at epubtest.org, but the tests there for SVG are totally insufficient, as most tests do not consider different SVG insertion methods and neither they mentioned which one was used in their grid (although one can indeed make the effort to just look at their code at https://github.com/IDPF/epub-testsuite).

Take into account my table only tests whether a PNG referenced from SVG inside an XHTML document gets displayed. That would be a single row in epubtest.org's tests, and in my table that takes 12. Now think about the same regarding SVG fonts, SVG in XHTML referencing other external SVG resources (use), textPath support (Kindle, for instance, supports the latter for external SVG documents referenced with an img element, but not for inline SVG; just the opposite of Google Play), etc.

I was thinking about cloning their repo and extending their SVG tests with mine, but it would require quite a major shake up in how they have SVG tests organized, so it is not something I am desperately looking forward to do.

[jeankaplansky]

But it would be VERY worth the effort for the entire community. In the
meantime, if you do have specific things that you want tested by
epubtest.org, or would like to see specific changes made to the existing
set of test docs, please do let Tzviya and myself know. We can pass this
information on to the right people.

On Mon, Aug 25, 2014 at 10:47 AM, elmimmo notifications@github.com wrote:

I did look at epubtest.org, but the tests there for SVG are totally
insufficient, as most tests do not consider different SVG insertion methods
and neither they mentioned which one was used in their grid (although one
can indeed make the effort to just look at their code at
https://github.com/IDPF/epub-testsuite

I was thinking about cloning their repo and extending their SVG tests with
mine, but it would require quite a major shake up in how they have SVG
tests organized, so it is not something I am desperately looking forward to
do.

—
Reply to this email directly or view it on GitHub
#38 (comment).

[elmimmo]

I will consider it. Getting familiar with how tests in epubtest.org are organized, what I feel are some things in my reach that are not being tested, and then maybe actually doing it myself is no small deal. It is therefore not something that, at any rate, I will be doing in the next few days.