Interactive Diagrams?

[WillAdams]

Is it possible to do these in an ePub? Judging from: http://www.baldurbjarnason.com/notes...cript-in-epub/ I'm guessing not....

I've been writing the assembly instructions for the ShapeOko 2: http://docs.shapeoko.com/ and have been changing over to SVG versions of the diagrams which are ``wired up'' for interactivity and ``X-ray views''. Click on the part #s to highlight / remove highlighting:

The first two are quite prosaic:
http://docs.shapeoko.com/content/tPi...203-02-100.svg
http://docs.shapeoko.com/content/tPi...197-02-100.svg

The next two are variations on a theme:
http://docs.shapeoko.com/content/tPi...S20021-100.svg
http://docs.shapeoko.com/content/tPi...S20022-100.svg

They get a bit more interesting as one gets to more complex assemblies:
http://docs.shapeoko.com/content/tPi...S20029-100.svg
http://docs.shapeoko.com/content/tPi...S20028-100.svg
http://docs.shapeoko.com/content/tPi...S20030-100.svg
http://docs.shapeoko.com/content/tPi...S20031-100.svg

(Most of the rest are done --- just waiting for me to upload them)

Issues / concerns:

- is there some way to get these into an ePub or Kindle book?
- if instead, I made them as a .pdf, would any viewer other than Adobe Acrobat be able to display them?

I'd be grateful for any other thoughts or feedback.

[Dr. Drib]

You posted in a forum called General Discussions, which is a forum for "[G]eneral discussions about e-book reading not specific to a device, software or format."

Please post responsibly.

Your thread has now been moved to the epub forum.



Don
(Moderator)

[Toxaris]

If it runs with JavaScript, you can try it with ePUB3. Be aware that support on devices is strongly limited and differs strongly per device/application.

Only a subset of SVG is supported in the specs of ePUB and not all readers honor even this subset. IIRC in ePUB3 the full set *should* be supported, but read the first paragraph again.

If you put it in a PDF, it should work in all PDF readers if they support those features of course.

[Tex2002ans]

Originally Posted by WillAdams

Is it possible to do these in an ePub? Judging from: http://www.baldurbjarnason.com/notes...cript-in-epub/ I'm guessing not....

[...]

Issues / concerns:

- is there some way to get these into an ePub or Kindle book?

Very nice SVGs.

Here is even a super simple SVG showing a parabola which can flip back/forth when you push a button:

http://www.infogridpacific.com/blog/...014.html#h2358

Not supported in EPUB OR MOBI (because they ban SVG with animation).

http://www.idpf.org/epub/30/spec/epu...-restrictions:

The [SVG] Animation Elements and Animation event attributes must not occur.

Amazon Publishing Guidelines:

3.10.7 HTML Guideline #7: Avoid Using Scripting
Scripting is not supported. All scripts are stripped from the source during conversion. SVG with animation
is not supported.

According to Amazon Publishing Guidelines, these SVG tags are supported:

<circle>
<clipPath>
<defs>
<ellipse>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<Filter>
<font-face>
<font-face-name>
<font-face-src>
<line>
<linearGradient>
<marker>
<mask>
<metadata>
<path>
<pattern>
<polygon>
<polyline>
<radialGradient>
<rect>
<stop>
<style>
<svg>
<symbol>
<text>
<textPath>
<tref>
<tspan>
<use>

Although I do not even know HOW this would translate to the older MOBIs (I bet not at all).

Side Note: I should really get back to working on my SVG tutorial/research!

Originally Posted by Toxaris

If it runs with JavaScript, you can try it with ePUB3. Be aware that support on devices is strongly limited and differs strongly per device/application.

Only a subset of SVG is supported in the specs of ePUB and not all readers honor even this subset. IIRC in ePUB3 the full set *should* be supported, but read the first paragraph again.

Doing very complex things with SVG is already flaky/unofficial, and adding javascript on top of that... ugh.

This MAY be possible in an EPUB dedicated towards iBooks, because they like to support all of this unofficial javascript and their own brand of EPUB3, but as the article linked in the first post says... iBooks CANNOT be trusted (even if you do happen to hack something together, they will "patch" and most likely break support).

An EPUB3 reader like AZARDI would probably be able to handle an SVG like this fine.... but the amount of people using that as a reader, close to nil.

Long story short... pain and misery.

Although I am quite interested in all things SVG, so keep us in the loop.

Best bet would probably be a few static images, and then perhaps linking directly to the interactive SVGs on the website, and hope they are using a device that can open it in Firefox/Chrome/browser which supports it. I just tested those complex SVGs on my phone, and it made it chug.

[WillAdams]

Thanks. That saves me a lot of time / effort / research.

I'm going to go back and break apart all the diagrams and re-draw the images one part at a time, then will re-create things --- hopefully this will get the filesize down (they really shouldn't be that large, it's just the XML overhead of each path segment being its own object).

Once I've done that we'll see where things stand.

Thanks!

[mrmikel]

Be sure to try them in some real devices that need to display it when you get done. I think you are on the bleeding edge as far as real world devices goes.

[WillAdams]

They work on my old iPad, and in Chrome, and Firefox on PCs running Windows and Mac OS X and in Safari on Mac OS X --- I'd be curious how they work on Android tablets --- is there anything else I should test on?

[mrmikel]

Whatever you use or you think users of the book will use. If you've already covered that list, that's great. It is not likely to cover commercial ereading machines, but none of those is on your list.
A number of people on the forum are interested in a least having an option for commercial sales, that is why I brought the issue up. Kindle has the most users.

[Tex2002ans]

Originally Posted by WillAdams

I'm going to go back and break apart all the diagrams and re-draw the images one part at a time, then will re-create things --- hopefully this will get the filesize down (they really shouldn't be that large, it's just the XML overhead of each path segment being its own object).

Sounds fantastic! From the SVG code, I see you use Inkscape, IF you want to generate the high resolution PNGs for EPUB/MOBI, follow my Steps 3+ in my "Formula to PNG Tutorial":

https://www.mobileread.com/forums/sho...d.php?t=223254

(Although you probably already knew almost all of those steps... and most of those beyond Inkscape steps can probably be automated using imagemagick).

Note: Try to avoid transparency in PNGs. While it would be fantastic to have transparency, I would avoid it at the current time, and just go with a white background. (See further down in that same topic where I ran into a few odd rendering bugs).

Originally Posted by mrmikel

Be sure to try them in some real devices that need to display it when you get done. I think you are on the bleeding edge as far as real world devices goes.

Yes. DEFINITELY needs testing on a variety of different devices.

SVG is not really a well-researched topic in the realm of ebooks... I definitely haven't seen any advanced SVG like these interactive diagrams (just formulas, "SVG cover pages", SVG Title Pages, SVG captions, etc. etc.).

And I really have no idea how they transfer over to the old MOBI format. Last I knew, SVGs just go POOF... and the Amazon recommendation was "use media queries to swap a JPG or PNG instead" (although this would defeat almost the entire purpose of having the SVG in the first place).

Originally Posted by WillAdams

They work on my old iPad, and in Chrome, and Firefox on PCs running Windows and Mac OS X and in Safari on Mac OS X --- I'd be curious how they work on Android tablets --- is there anything else I should test on?

Well as long as the renderer handles that subset of SVG, yours should run fine.... but EPUB3 explicitly bans SVG Animation, and so does MOBI/KF8 (as I linked above).

iBooks probably ignores that part of the EPUB3 spec (I don't know 100%, I don't have one to test on. It renders off of webkit, so if webkit can handle it, iBooks probably can), and AZARDI deliberately ignores that SVG animation ban.

Although EPUBs created with SVG animation ARE NOT EPUB3 COMPLIANT.... so if you "hack around" them to make them work, it won't be guaranteed to work on all the other EPUB3 devices/readers. And you most definitely will be causing yourself headaches in the future.

(Although we can also argue that ADE doesn't follow the EPUB2 spec exactly, and devices have all their own quirks as well... but that is a different topic! )

Originally Posted by mrmikel

Whatever you use or you think users of the book will use. If you've already covered that list, that's great. It is not likely to cover commercial ereading machines, but none of those is on your list.
A number of people on the forum are interested in a least having an option for commercial sales, that is why I brought the issue up. Kindle has the most users.

Indeed... for example, if you were designing an ebook specifically for iBooks, you would be able to get away with using some more advanced/complex CSS, using javascript, etc. etc.... but then you are severely limiting the reach of your market.

Originally Posted by WillAdams

They work on my old iPad, and in Chrome, and Firefox on PCs running Windows and Mac OS X and in Safari on Mac OS X --- I'd be curious how they work on Android tablets --- is there anything else I should test on?

This should give you some idea on the SVG support (although we are talking BROWSERS, not ereaders):

https://en.wikipedia.org/wiki/Scalab...rowser_support