Display of a png image linked to a svg image

[roger64]

Hi

I had a curious experiment. Using Inkscape, I linked a png image to a svg image (containing lines of text shaped around the png). I saved as a simple svg file. I inserted both images in an EPUB with an embedded font. I updated the link (href...) for the png image within the svg file using the Editor which helped me with its violet color.

Pity: the editor did not display the linked png file, only the svg one. Even the Calibre viewer refused to display it...

I imported the unchanged EPUB in Calibre. I exported it to PDF format using the Prince PDF plugin of Jellby and it worked perfectly. I can reproduce it: I have a nice PDF with a perfect display of my combined images (png within svg).

This seems to show that the EPUB code is sound. My question is: what should I do so that the display could also take place on one EPUB? Is this a missing feature?

[kovidgoyal]

As far as I know, there is no problem whatsoever, displaying raster image formats linked to from svg. That is how, the standard calibre covers work after all. I suggest you attach an example book.

[roger64]

Hi,

Thanks for your reply. So, I am missing something. Here is the EPUB (two pages...) and the PDF.

The png files are said "not referenced" though they are reported in the link within the svg file and appear in the .opf file too.

EPUBCheck seems reasonably happy (and I know how much you value it).

[kovidgoyal]

Dont put your svg into its own file, instead embed it directly in the HTML. IIRC there are various issues with using svg files referred to from <img> tags. This is likely one of them. That will also fix the unreferenced error you get.

EDIT: For example, if I open up your chapter.xhtml file in Firefox,the PNG is not rendered there either. You will likely have to use <svg> inside the html to get it to work reliably.

[roger64]

Thanks for your reply.

I apologize for not understanding it. I tried to set up a snippet for a svg tag I've found on the web,. After a complaint about namespace missing, I added a bunch of them, but the Editor still reports the png files as unreferenced.

This is the tag i inserted in the xhtml file for the first svg image:

<svg width="471" height="693" 
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="enfant2.svg" width="471" height="693"/>
</svg>

Coud someone please provide a model of tag I could use?

[kovidgoyal]

You need to embed the entire contents of the svg file inside the html. Not a reference to the svg file.

[roger64]

Thank you for your patience with me: it works

The Editor complains about a lot about invalid values (namely text-align:start), many unknown properties (stroke, fill, etc.) but it references the png files.

Epubcheck complains only about some namespaces.

The EPUB displays fine on the Calibre viewer and the PDF can still be produced.