svg image on top of a background png image

roger64 · 03-11-2015, 07:13 AM

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?

Spoiler:

RbnJrg · 03-11-2015, 05:41 PM

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:

Code:

<div class="enfant_back">
     <img alt="Image" src="texte-enfant.svg" style="width:100%" />
</div>

and in your .css file:

Code:

.enfant_back {
     background-image: url(enfant.png);
     background-repeat: no-repeat;
     background-size: Npx Mpx;
     margin: 0 0 0 0; 
}

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

DaleDe · 03-11-2015, 08:04 PM

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

roger64 · 03-12-2015, 12:05 AM

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:

Code:

background-color:transparent

.

Anyway, I will follow on trying.

roger64 · 03-12-2015, 09:53 AM

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...

roger64 · 04-20-2015, 11:08 AM

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).

jbacelar · 04-20-2015, 02:59 PM

An example of what I use in such cases.

roger64 · 04-20-2015, 04:06 PM

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.

RbnJrg · 04-20-2015, 04:54 PM

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.

roger64 · 04-20-2015, 05:15 PM

Quote:

Originally Posted by RbnJrg

By chance Roger, did you see these posts?.

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.

dgatwood · 04-22-2015, 12:14 AM

Quote:

Originally Posted by roger64

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.

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.

roger64 · 04-22-2015, 09:42 AM

Quote:

Originally Posted by dgatwood

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.

jbacelar · 04-22-2015, 12:16 PM

Quote:

Originally Posted by roger64

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.

roger64 · 04-22-2015, 02:05 PM

@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.

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)?

jbacelar · 04-22-2015, 02:30 PM

You're welcome.

Quote:

Originally Posted by roger64

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)?

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.

03-11-2015, 07:13 AM	#1
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	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? Spoiler: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="fr-FR" xmlns="http://www.w3.org/1999/xhtml"> <!-- This file was converted to xhtml by Writer2xhtml ver. 1.5.1. See http://writer2latex.sourceforge.net for more info. --> <head> <title>Libertine</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <link href="styles/styles1.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-image: url(enfant.png); background-repeat:no-repeat; margin: 0 0 0 0; } </style> </head> <body> <div> <img alt="Image" src="texte-enfant.svg" style="width:100%" /> </div> </body> </html>

03-11-2015, 05:41 PM	#2
RbnJrg Wizard Posts: 1,539 Karma: 6613969 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	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: Code: <div class="enfant_back"> <img alt="Image" src="texte-enfant.svg" style="width:100%" /> </div> and in your .css file: Code: .enfant_back { background-image: url(enfant.png); background-repeat: no-repeat; background-size: Npx Mpx; margin: 0 0 0 0; } 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

03-12-2015, 12:05 AM	#4
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	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: Code: background-color:transparent . Anyway, I will follow on trying.

03-12-2015, 09:53 AM	#5
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	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... Last edited by roger64; 03-12-2015 at 11:17 AM. Reason: Mystery

04-22-2015, 02:05 PM	#14
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	@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. 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)? Last edited by roger64; 04-22-2015 at 02:07 PM. Reason: space

03-11-2015, 08:04 PM	#3
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	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

04-20-2015, 04:06 PM	#8
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	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.

04-20-2015, 04:54 PM	#9
RbnJrg Wizard Posts: 1,539 Karma: 6613969 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Background image with text on top?	Psymon	ePub	144	05-26-2020 05:48 PM
Kindle paperwhite crop background-image on top/bottom	j.puff@ppp.eu	Kindle Formats	2	08-28-2013 11:58 AM
Kindle paperwhite crop background-image on top/bottom	j.puff@ppp.eu	Kindle Developer's Corner	1	08-26-2013 06:02 PM
Scaling up an image via SVG	Kayto	ePub	27	01-26-2013 03:38 AM
hotlinking png image	bobcdy	Sigil	21	09-21-2010 04:56 AM

Advert

Advert