svg image on top of a background png image
 

Hi,

I have seen an image on a children's book and I try to reproduce it on an EPUB2. Basically, I use:
- a png image (about 50% percent of its surface is transparent) as a background-image
- a svg image containing two blocks of text which is supposed to display within the transparent part of the background image.

The results so far are not that great. Both images display fine but my problem is that they coincide not perfectly. Could someone have a look at the code of the page?

Hi Roger;

I didn't the try but I think you must use the background not in "body" but in the div tag, something like:

and in your .css file:

where N is the width and M the height of your svg image (or you can try to adjust the svg viewbox to mach the .png image to avoid distortion; in this last case, you also must adjust the position of the svg text).

As I told you, I didn't the try but I think it should work :)

Regards
Rubén

If you put the bitmap image inside the SVG itself then any text or vector graphics should be on top of the image assuming you place it within the boundaries of the png file.

Dale

Thank you both for your advices. I had initially a complete svg image with a png inside, but I scrapped it because it was huge and did not display properly. But there may probably have been mistakes on my side.

I am not sure if the use of a background image is such a great idea. The display is very rigid.

I am also trying another idea, putting together the two images within the same container and using a negative margin to make them fit together. It displays nicely on the Calibre editor but poorly on an EPUB. I began with the svg on top of the png, and tried also the other way (png on top), using the property: .

Anyway, I will follow on trying.

This is to report success using the following solution:

- import the png file (cleaned previously with Gimp) into Inkscape and link it (not incorporate)
- fill up the text part with the Text tool of Inkscape.
- save the svg file as a simple svg
- import both images in the EPUB
- insert the svg file in the xhtml file
- declare the new position of the png file within the svg file

... and that's it.

Pretty convenient! Thanks for your help!!


but one thing: the png image does not display on the EPUB!! However if I import the EPUB in Calibre and then convert it to PDF using Jellby's plugin, I get a perfect PDF with text and image...

There is probably an easy explanation...

Hi

I resumed my trials and got some advice. I am still not here... :(

1. - Take a png image. Import it to Inkscape as a link, write some lines of text around the drawing, save the text as a plain svg. The image and the text display fine with Inkscape.

2. - Import both png image and svg text in the joint EPUB2. I made sure the svg text has the link to the png image within the EPUB2.

3. - Here are my two best trials:
- a common svg wrapper: the text is well displayed, the png image is missing
- a svg file using an object tag. Text and image are well displayed but the whole is way too big and I cannot scale it.

Using svg inline was no better. Using an image tag was worse.

Here are the files for you to look at. If somebody manages to get a fine display, I'll be very happy to learn how to do it and to understand what I missed.

Note: the used font is Linux Libertine O but it has not been embedded. Do not take into account the display of the font.

Copyright: text from Charles Perrault (died 1703), image from Arthur Rackham (died 1939).

An example of what I use in such cases.

Thank you for the demo which saves me a lot of time and hats off! I will study it carefully and try to repeat it. :thanks:

By chance Roger, did you see these posts?:

https://www.mobileread.com/forums/sho...88&postcount=1

https://www.mobileread.com/forums/sho...87&postcount=5

Maybe you don't need to use a .svg image; just the background .png and normal text.

Thanks Rubén for the links that I did not see previously. You are right, there are several possible solutions but I have rather use svg than background images.
My problem today was the link to the png image. If I integrated it within Inkscape, the size of the image increased too much. But as a link, it's OK and very precise.

Don't include the PNG image itself in the SVG. Reference the image with an svg image tag. That puts you in control over the exact dimensions of the PNG within the SVG viewport.

Thanks for the tip. Is your proposal something different of what jbacelar proposed in his solution?

If you have something different in mind, would you care writing what you mean? One small example would be immensely useful. Sorry to bother you with this.

I have a question about embedded files : Inkscape produces svg text files with lots of bells and whistles. On the other hand, these plain svg files do recognize correctly the embedded font in the EPUB.

To get the same result with the basic text file I've just written, I have the feeling that I would need to add something else than the font-family element which is within the text tag of plain svg files.

The essai with embedded font.

@jbacelar

Your solution is pretty handy, easy to implement (using snippets) and very precise.

Again, thank you for a clear proof on how to do it. As I had used before a "plain svg" file produced by Inkscape, I noticed that Inkscape kept repeating the font-family name for each line of text. And I thought that THIS was necessary for svg text files. Another wrong idea discarded.

:thanks:

Also I thought wrongly that it was necessary to write the text on the transparent part of a png. I did some more tries, and I realize now that it works as well with plain jpg files.

Does the size of the viewbox concerns only the size of the image or the intended size of the svg as a whole (I mean including text space)?

You're welcome.

The viewBox is applied to all the svg, inside we will have shapes, images, text, etc.

I recommend this interesting direction:
http://commons.oreilly.com/wiki/inde...ls/Coordinates

For me it has been a great help.

Thanks for the link and reply. :thanks:

I had some trouble producing Prince PDF from an EPUB file without embedded font, until I realized that the PDF was using a different font than the one on my Linux, a font whose metrics were slightly larger, and of course, it spoilt everything... With your last EPUB, everything is fine.

To provide users with a consistent display on all kinds of supports, I think it should be a good practice to embed a font.

Again thanks for your help and demo. :thumbsup:

Hi Roger and Jbacelar;

Sorry but I'm affraid the the embedded font, as is implemented, it won't work on a .svg file. In fact, in the essai.epub that Jbacelar attached the font doesn't work. In order that an embedded font works on a svg file, you must add -in the svg statements, the following definition:

You should have in your .css file the following:

and in your .xhtml file:



As you can see, the text should be written by using the tags <tspan></tspan> and in the <text> tag must be defined the styles of the font (font-size; font-family; font-color; font-weight; etc., etc.). The positioning of the text must be defined with <tspan> but font-styles must be defined once, at the beginning, with the <text> tag.

I attach a new essai.epub so you can study the code better.

Regards.
Rubén

UPDATE: if you want to convert the .epub in .azw3 you should replace:

with

In fact, this last form works for both, .epub and .azw3 so should be preferable to use this sintax. And I think that is better to use a font-size of 22 instead of 24 (to me, it looks better).

My epub works perfectly in ADE (2 and 4) and Calibre viewer.

View attachments, and all the covers (V.2) of epubs I uploaded here, in MobileRead.

Hi Jbacelar:

I don't dispute that you can see the font on those programs. But if you open your .epub with -for example- Sigil or with Kindle Previewer; you won't be able to see the font Charis SIL.

The correct way to add a custom font (in a .svg image) is as I said in my previous post :) Also you can read this old post mine:

https://www.mobileread.com/forums/sho...51&postcount=9

But is not my invention that code :) Please, read this:

http://graphicdesign.stackexchange.c...age-on-my-site

and:

http://nimbupani.com/about-fonts-in-svg.html

Of course; you always can consult:

http://www.w3.org/TR/SVG/fonts.html#SVGFontsOverview

By using <defs> inside <svg> tags you can be sure that your custom font will be showed in any reader that supports svg.

Regards

UPDATE: Please, use another font instead of Charis (for example "Fontin") and tell me if your ADE can show it with your method; my ADE can't. Like Charis is similar to Times, maybe you are watching Times in ADE and not Charis; for this reason I ask you do the try with a font like "Fontin".

Well, I do not dispute your solution is pure orthodoxy.
But:
1- I insist, mine works perfectly in ADE (see attached).
2- The font CharisSil retouched by JSWolf, is perfectly distinct from the Times font.
3- Please! Kindle Previewer transforms previously epubs in mobis, and we are here in the epub subforum.
4- Currently, for epubs, ¿The orthodoxy is not ADE? :)

Hi

This tired soldier of mine got a lot of powerful assistance. :)

Thanks to both of you for your kind help. Before this thread I did not manage to display it properly and I learnt a lot of useful things along the way.

RbnJrg is right, your code only works because Charis SIL is installed on your computer. If you delete it from your Windows fonts folder, the text will be rendered in a different font.

BTW, here's another working example, that uses the same font referencing method that RbnJrg suggests.

Doitsu sorry, but that's not true.
In my Windows is not installed Fontin font, and... (see the corresponding attached)
Also in my Pocketbook reader all these tests are fine.

To finish this matter, I now have uninstalled Charis Sil, I have restarted the computer, and I insist: everything works correctly.

Apparently, I missed the updated version (essai with embedded font.epub) that you must have attached sometimes yesterday to this post.

This version does indeed work with all ADE versions.

@Doitsu

I tried your example above. I added this rectangle above the image tag in cover.xhtml

I could see that last letter of the second word (Magnum) was partly out of the screen. I reduced the font-size in the svg image from 150px to 130px (see joint screenshoot) and it looks OK.

Once corrected, I of course suppress the rectangle which is here only for checking purpose.
Note: inserting the rectangle directly in the svg image gives the same result.

As my experience with svg is quite short, did I do something wrong?

No. AFAIK, everything renders as expected.