![]() |
#1 |
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:
|
![]() |
![]() |
![]() |
#2 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
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> Code:
.enfant_back {
background-image: url(enfant.png);
background-repeat: no-repeat;
background-size: Npx Mpx;
margin: 0 0 0 0;
}
As I told you, I didn't the try but I think it should work ![]() Regards Rubén |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
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 |
![]() |
![]() |
![]() |
#4 |
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. |
![]() |
![]() |
![]() |
#5 |
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 |
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
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). Last edited by roger64; 04-20-2015 at 11:11 AM. Reason: inline |
![]() |
![]() |
![]() |
#7 |
Interested in the matter
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 421
Karma: 426094
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook InkPad 3
|
An example of what I use in such cases.
|
![]() |
![]() |
![]() |
#8 |
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.
![]() |
![]() |
![]() |
![]() |
#9 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
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. |
![]() |
![]() |
![]() |
#10 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
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. |
![]() |
![]() |
![]() |
#11 | |
Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
|
|
![]() |
![]() |
![]() |
#12 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Quote:
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. Last edited by roger64; 04-22-2015 at 11:42 AM. |
|
![]() |
![]() |
![]() |
#13 |
Interested in the matter
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 421
Karma: 426094
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook InkPad 3
|
The essai with embedded font.
Last edited by jbacelar; 04-22-2015 at 12:49 PM. Reason: Sorry! wrong file. |
![]() |
![]() |
![]() |
#14 |
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 |
![]() |
![]() |
![]() |
#15 | |
Interested in the matter
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 421
Karma: 426094
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook InkPad 3
|
You're welcome.
Quote:
I recommend this interesting direction: http://commons.oreilly.com/wiki/inde...ls/Coordinates For me it has been a great help. |
|
![]() |
![]() |
![]() |
|
![]() |
||||
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 |