EPUB3 and svg files

[roger64]

Hi

I am looking for an example of a svg file integrated in an EPUB3 as a svg file (not inline within a html file). I had different tries and got trouble with the .opf part and the exact heading I am supposed to use (where DTD is said not to be welcome).

[RbnJrg]

Originally Posted by roger64

Hi

I am looking for an example of a svg file integrated in an EPUB3 as a svg file (not inline within a html file). I had different tries and got trouble with the .opf part and the exact heading I am supposed to use (where DTD is said not to be welcome).

In this post (https://www.mobileread.com/forums/sho...4&postcount=68) you can find an epub3 with three svg files! But take in count that svg files are not showed well on ADE 4 when belong to an epub3 ebook. Instead of ADE, use Readium to display an epub3 with svg files.

Regards
Rubén

[roger64]

Hi

If I insert the svg file inline, It looks easier and maybe it's the good solution...

I managed to get an EPUB3 validated by Epubcheck this way and by just adding in the .opf file, for the item containing the svg file, the following expression:

properties="svg"

The display loooks fine on Kobo and Calibre.

[Abekonge]

Are you asking about having the svg-files directly in spine?

Or whether to add the svg to the html file as a file or as xml (with the <svg> tags)?

I have had good results with adding svg as images in the html files, inside svg tags (yes it's hacky)- it seems to be supported on most reader systems (e.g. ADE3 - I ignore ADE 4 as it was so bad in the beginning - but it might have become better). It also works when converting to kindle.

Example:

html (Side_02.html):

  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin" version="1.1" viewBox="0 0 203 297" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="297" width="203" xlink:href="../Images/02a.svg"/>
    </svg>
  </div>

Make sure that the viewbox size and the image height + width are the same.

It is a bit of a hack, but it has worked consistently with many different titles - I have mostly used it for faking fixed format poetry in dynamic ebooks.

opf:

<item href="Text/Side_02.html" id="Side_02.html" media-type="application/xhtml+xml" properties="svg"/>
<item href="Images/02a.svg" id="x02a.svg" media-type="image/svg+xml" />

[roger64]

@Scripler

Thank you for your sound advice. This is the way to go. Putting the svg files on the spine was a fantasy (until proved wrong).

[RbnJrg]

Originally Posted by Abekonge

Are you asking about having the svg-files directly in spine?

Or whether to add the svg to the html file as a file or as xml (with the <svg> tags)?

I have had good results with adding svg as images in the html files, inside svg tags (yes it's hacky)- it seems to be supported on most reader systems (e.g. ADE3 - I ignore ADE 4 as it was so bad in the beginning - but it might have become better). It also works when converting to kindle.

That is EXACTLY what I did in my TestEpub.epub and TestEpub_epub3.epub books. In the file "titulo.xhtml" you can find a svg image (LupeR.svg) inside a svg wrapper. As I said in my previous post, it doesn't display well on ADE 4 as epub3 (but it does on ADE 4 and ADE 3 as epub2). However, the code is ok since the epub3 is showed fine on Readium.

[RbnJrg]

Originally Posted by roger64

Hi

If I insert the svg file inline, It looks easier and maybe it's the good solution...

That is what I did Roger; maybe you won't watch the svg image LupeR.svg inside a svg wrapper in the file "titulo.xhtml" of my testepub.epub and TestEpub_epub3.epub books.

Regards
Rubén

[Abekonge]

Originally Posted by RbnJrg

That is EXACTLY what I did in my TestEpub.epub and TestEpub_epub3.epub books.

Ah great - I did actually check your books, but that was when I was thinking about svg in the spine ... So I'm glad we agree!

I guess it should be possible to add images directly in spine according to the spec, not sure if that includes svg. But it is not really supported by any readers as far as I know.

Would be great for a lot of stuff though - e.g. comics.

[rightawn]

Hello,

I am new to this forum and this is my first time posting.

I have been struggling to convert my physical book to an Epub3 for a few months.

The challenges are that the book needs to be viewed in a fixed format and an audio player needs to display within the fixed page svg viewbox.

I used a method similar to Abekonge to get the page displayed properly but have not figured out a way to incorporate the audio player into the SVG viewbox with the image.

Currently, my audio player appears outside of the viewbox which creates problems in the e-reader.

I need to find a way to display the audio box over the image within the SVG viewbox.

Any help you could provide would be greatly appreciated!

Thanks!

Here's the code I've been using in the Epub3:

<body>
<h2 style="text-align: center; padding: 0pt; margin: 0pt;">
<audio controls="controls" src="../Audio/etude6.mp3">etude6</audio>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1020 660" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="1020" height="660" xlink:href="../Images/painting6.png"/>
</svg>
</h2>
</body>

[RbnJrg]

Originally Posted by rightawn

I need to find a way to display the audio box over the image within the SVG viewbox.

You need to use the tag <foreignObject> inside the svg wrapper. I'll give you an example by taking the code you posted:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1020 760" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <foreignObject x="0" y="0" width="1020" height="60">
         <div xmlns="http://www.w3.org/1999/xhtml">
            <audio controls="controls" src="../Audio/etude6.mp3"/>
         </div>
      </foreignObject>

      <image x="0" y="70" width="1020" height="660" xlink:href="../Images/painting6.png"/>
    </svg>
  </div>
</body>

As you can see, the original viewport must be enlarged in order to contain both, the audio control and image. And now that you have inside the svg wrapper not only the image but a new element, you also need to position both of them. You can watch that the audio control is positioned in x="0" and y="0" with a width of 1020 (the width of the image, but you can change that if you wish) and a height of 60px (give it the height you want), while the image now is positioned in x="0" and y="70" (that is because the height of the audio control is 60, so there is a space of 10px between both elements). Also, the audio control (in fact, any element situated by the tag foreignObject) must be enclose inside a <div> with the declaration xmlns="http://www.w3.org/1999/xhtml". This is mandatory, otherwise the audio control won't work.

Well, that's all. I hope the code above can help you.

[Quoth]

It will only work, if at all, on apps, not on any ereader.
Either have no audio, or make apps for iOS and Android.

Fixed layout are not real ebooks either. So many sizes of screens.

[rightawn]

Thank you so much! This is a huge help!

Is there any way to place the audio over the image?

Originally Posted by RbnJrg

You need to use the tag <foreignObject> inside the svg wrapper. I'll give you an example by taking the code you posted:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1020 760" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <foreignObject x="0" y="0" width="1020" height="60">
         <div xmlns="http://www.w3.org/1999/xhtml">
            <audio controls="controls" src="../Audio/etude6.mp3"/>
         </div>
      </foreignObject>

      <image x="0" y="70" width="1020" height="660" xlink:href="../Images/painting6.png"/>
    </svg>
  </div>
</body>

As you can see, the original viewport must be enlarged in order to contain both, the audio control and image. And now that you have inside the svg wrapper not only the image but a new element, you also need to position both of them. You can watch that the audio control is positioned in x="0" and y="0" with a width of 1020 (the width of the image, but you can change that if you wish) and a height of 60px (give it the height you want), while the image now is positioned in x="0" and y="70" (that is because the height of the audio control is 60, so there is a space of 10px between both elements). Also, the audio control (in fact, any element situated by the tag foreignObject) must be enclose inside a <div> with the declaration xmlns="http://www.w3.org/1999/xhtml". This is mandatory, otherwise the audio control won't work.

Well, that's all. I hope the code above can help you.

[rightawn]

Thank you, RbnJrg and Quoth!
I tried the code that RbnJrg provided but, as Quoth pointed out, the audio does not work in the Epub3 viewer.
Is there another way to make this work?
I have attached an image example of how I would like the page to appear.

[rightawn]

Thank you, RbnJrg!

Unfortunately, the audio player does not display in my Epub3 reader when using this code. Do you know why that might be?

Is there a way to overlap the audio on top of the image?

[RbnJrg]

Originally Posted by rightawn

Thank you, RbnJrg!

Unfortunately, the audio player does not display in my Epub3 reader when using this code. Do you know why that might be?

Well, depend on the epub3 reader. What ereader are you using? I tried the code I posted and it worked fine under Sigil (with its plugins Readium, BibiReader and EpubJSReader), Calibre Ebook Editor, Reasily, Lithium and Gitden Reader. Maybe there is something wrong with your code; I attach an epub3 free of bugs with an image and a track of audio. try opening this epub. Here you can see a screenshot about how it looks under Sigil:



And there is no other way to include inside a svg wrapper an audio control if not is using the <foreignObjetc> tag.