Multiple JPG images in SVG on single epub page

dbb1480 · 05-19-2016, 11:29 AM

Hi all,

I am trying to post 3 jpg images per xhtml page in sigil. 1 at mid top, 1 at middle, and 1 at mid bottom. While I am able to use svg to place each one, each is showing up on a seperate page. I am at my wits end on this and would like them all on a single page.

Code:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 600 192" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="192" width="600" xlink:href="../Images/image1.gif" /></svg>

    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 192" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="192" width="600" xlink:href="../Images/image2.gif" /></svg>

    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMax meet" version="1.1" viewBox="0 0 600 192" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="192" width="600" xlink:href="../Images/image3.gif" /></svg>
  </div>
</body>

Any help would be greatly appreciated, trying to make this look good on a kindle paper white, while simultaneously look good on a kindle fire or ipad

Toxaris · 05-19-2016, 12:07 PM

If you use a wrapper like that, it will always use a full page. You can place all the images in one SVG wrapper.

dbb1480 · 05-19-2016, 01:53 PM

thanks toxaris, but how do i exactly do that? i am a big noob when it comes to this stuff, any example code you can show me to put me in the right direction would greatly help.

Turtle91 · 05-19-2016, 02:32 PM

With a quick guess...I think he's talking something along these lines...although I haven't tested it...

Code:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 600 600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

<image height="192" width="600" xlink:href="../Images/image1.gif" />
<image height="192" width="600" xlink:href="../Images/image2.gif" />
<image height="192" width="600" xlink:href="../Images/image3.gif" />

</svg>
  </div>
</body>

dbb1480 · 05-19-2016, 03:03 PM

Hi Turtle91,

Thank you for your example, unfortunately after I tried it out only the 3rd image shows at the top of the screen, and the other two images are no where to be found.

Turtle91 · 05-19-2016, 10:19 PM

I told ya I didn't test it...

I was just explaining the concept that Toxaris mentioned you have to have the individual images inside a single SVG wrapper...not multiple SVG wrappers.
However, If you add a definition of the X and Y coordinate to each of the images you can place them however you want within the same wrapper. Notice you also have to increase the size of the viewbox to accomodate the height of all 3 images.

Code:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%"
 preserveAspectRatio="xMidYMin meet" version="1.1" 
 viewBox="0 0 600 600" 
 width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

<image height="192" width="600" x="0" y="0"  xlink:href="../Images/image1.gif" />
<image height="192" width="600"  x="0" y="200"  xlink:href="../Images/image2.gif" />
<image height="192" width="600"  x="0" y="400"  xlink:href="../Images/image3.gif" />

</svg>
  </div>
</body>

Turtle91 · 05-19-2016, 10:27 PM

Quote:

Originally Posted by dbb1480

Hi Turtle91,

Thank you for your example, unfortunately after I tried it out only the 3rd image shows at the top of the screen, and the other two images are no where to be found.

BTW, all 3 images are there, they are just placed on top of each other until you define their individual X, Y coordinates

dbb1480 · 05-20-2016, 09:57 AM

Whoo!!

That works great!

Wow i feel like with some of the stuff i was trying i was so close but just missing that last bit by a hair. Thank You So Much!

05-19-2016, 10:19 PM	#6
Turtle91 A Hairy Wizard Posts: 3,108 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I told ya I didn't test it... I was just explaining the concept that Toxaris mentioned you have to have the individual images inside a single SVG wrapper...not multiple SVG wrappers. However, If you add a definition of the X and Y coordinate to each of the images you can place them however you want within the same wrapper. Notice you also have to increase the size of the viewbox to accomodate the height of all 3 images. Code: <body> <div style="text-align: center; padding: 0pt; margin: 0pt;"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 600 600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="192" width="600" x="0" y="0" xlink:href="../Images/image1.gif" /> <image height="192" width="600" x="0" y="200" xlink:href="../Images/image2.gif" /> <image height="192" width="600" x="0" y="400" xlink:href="../Images/image3.gif" /> </svg> </div> </body> Last edited by Turtle91; 05-19-2016 at 10:25 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Using Calibre svg cover wrapper for full-page images	roger64	Editor	8	02-05-2015 08:02 PM
Touch Converting multiple .jpg/.png into ePub for Manga	Gater	Kobo Reader	11	01-08-2012 07:28 AM
How can I convert topaz ebook from multiple xhtml's (SVG) to single pdf?	rglk	Workshop	3	11-28-2011 04:33 PM
How to center/fit page width SVG images with <OBJECT>	amoroso	ePub	0	07-31-2010 11:48 AM
RTF to EPUB - jpg images doesnt show	klamarth	Calibre	3	10-15-2009 08:40 AM

05-19-2016, 12:07 PM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	If you use a wrapper like that, it will always use a full page. You can place all the images in one SVG wrapper.

05-19-2016, 01:53 PM	#3
dbb1480 Junior Member Posts: 6 Karma: 10 Join Date: May 2016 Device: Kindle Paperwhite	thanks toxaris, but how do i exactly do that? i am a big noob when it comes to this stuff, any example code you can show me to put me in the right direction would greatly help.

05-19-2016, 03:03 PM	#5
dbb1480 Junior Member Posts: 6 Karma: 10 Join Date: May 2016 Device: Kindle Paperwhite	Hi Turtle91, Thank you for your example, unfortunately after I tried it out only the 3rd image shows at the top of the screen, and the other two images are no where to be found.

05-20-2016, 09:57 AM	#8
dbb1480 Junior Member Posts: 6 Karma: 10 Join Date: May 2016 Device: Kindle Paperwhite	Whoo!! That works great! Wow i feel like with some of the stuff i was trying i was so close but just missing that last bit by a hair. Thank You So Much!

Advert

Advert