adding text after svg (not caption) on single page

dbb1480 · 05-25-2016, 10:42 AM

Hi all,

I am trying to put together an illustrated book. I want to place a svg of the image on the page then add text after the image and have this all be on the same page.

It keeps splitting this into two pages even though there is clearly enough space for both the image and text on the epub page.

Code:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt; page-break-inside:avoid">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 955 930" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="930" width="955" x="0" xlink:href="../Images/Image00001.jpg" y="0" /></svg>

    <p>Here is some text</p>
    
  </div>
</body>

Anyone have any ideas on how to fix this?

KevinH · 05-25-2016, 10:49 AM

Have you tried changing the height="100%" or changing the height of the viewbox?

DiapDealer · 05-25-2016, 11:07 AM

I don't think it really matters if the text you want included is actually a caption or not. Your best bet, I think, is going to be using the various techniques for keeping captions with their svg images. Most involve two svg wrappers in a containing div (with css suggesting no inside breaks), or just one svg wrapper containing an <image> tag and a <text> tag. Regardless of the technique you use, you should know that there is no fool-proof method that will work across all apps/devices. Keeping text on the same page as an image is simply hit or miss in a reflowable epub using today's standards and toys.

But yes ... Kevin's suggestion of reducing the image's height from something other than 100% will help greatly.

dbb1480 · 05-25-2016, 11:11 AM

Hi Kevin and DiapDealer,

You are both right, reducing the 100% made a huge difference! I think i really just need to play with optimal image size in order to get it to format correctly.

Thank You Both!

RbnJrg · 05-26-2016, 05:52 PM

Quote:

Originally Posted by dbb1480

Hi all,

I am trying to put together an illustrated book. I want to place a svg of the image on the page then add text after the image and have this all be on the same page.

It keeps splitting this into two pages even though there is clearly enough space for both the image and text on the epub page.

Code:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt; page-break-inside:avoid">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 955 930" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="930" width="955" x="0" xlink:href="../Images/Image00001.jpg" y="0" /></svg>

    <p>Here is some text</p>
    
  </div>
</body>

Anyone have any ideas on how to fix this?

Read this post:

https://www.mobileread.com/forums/sho...04&postcount=7

jcsalomon · 06-10-2016, 11:51 AM

I’ve just encountered a similar issue, where Kindles—but not any EPUB reader I tested—insisted on breaking the page before & after the SVG wrapper, even when I’d removed height="100%"; see “SVG wrapper image occupies entire page, and shouldn’t”. Taking the advice here, I put the entire title page in a single SVG block, but I do wish I knew what was causing the problem.

KevinH · 06-10-2016, 12:48 PM

That makes sense. If you look at KindleUnpack debug output run an azw3 (KF8) that uses an svg with image inside an xhtml file, you will see that Amazon has pulled out the svg into its own section. It always does this. This creates an artificial page break. The KindleUnpack code has to find the extracted svg and put it back inside the xhtml file when trying to unpack to epub from an azw3.

Hitch · 06-11-2016, 05:00 AM

Quote:

Originally Posted by KevinH

That makes sense. If you look at KindleUnpack debug output run an azw3 (KF8) that uses an svg with image inside an xhtml file, you will see that Amazon has pulled out the svg into its own section. It always does this. This creates an artificial page break. The KindleUnpack code has to find the extracted svg and put it back inside the xhtml file when trying to unpack to epub from an azw3.

Our experiments--not in the depth of Kevin's, of course--indicate that this is right, also--always breaks after an SVG. It's sort of put us off using SVG for interior graphics for KF8 books. Bummer.

Why we were looking at it:

Spoiler:

Hitch

05-25-2016, 10:42 AM	#1
dbb1480 Junior Member Posts: 6 Karma: 10 Join Date: May 2016 Device: Kindle Paperwhite	adding text after svg (not caption) on single page Hi all, I am trying to put together an illustrated book. I want to place a svg of the image on the page then add text after the image and have this all be on the same page. It keeps splitting this into two pages even though there is clearly enough space for both the image and text on the epub page. Code: <body> <div style="text-align: center; padding: 0pt; margin: 0pt; page-break-inside:avoid"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 955 930" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="930" width="955" x="0" xlink:href="../Images/Image00001.jpg" y="0" /></svg> <p>Here is some text</p> </div> </body> Anyone have any ideas on how to fix this?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Multiple JPG images in SVG on single epub page	dbb1480	Sigil	7	05-20-2016 09:57 AM
Svg wrapper with a caption text field	roger64	ePub	13	01-31-2016 06:45 PM
join (image + caption) and fill page	AlanHK	ePub	4	04-04-2015 05:23 PM
Need Example SVG wrapper including caption	GrannyGrump	ePub	30	11-06-2013 03:20 AM
How can I convert topaz ebook from multiple xhtml's (SVG) to single pdf?	rglk	Workshop	3	11-28-2011 04:33 PM

05-25-2016, 10:49 AM	#2
KevinH Sigil Developer Posts: 8,491 Karma: 5703586 Join Date: Nov 2009 Device: many	Have you tried changing the height="100%" or changing the height of the viewbox?

05-25-2016, 11:07 AM	#3
DiapDealer Grand Sorcerer Posts: 28,371 Karma: 203720150 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	I don't think it really matters if the text you want included is actually a caption or not. Your best bet, I think, is going to be using the various techniques for keeping captions with their svg images. Most involve two svg wrappers in a containing div (with css suggesting no inside breaks), or just one svg wrapper containing an <image> tag and a <text> tag. Regardless of the technique you use, you should know that there is no fool-proof method that will work across all apps/devices. Keeping text on the same page as an image is simply hit or miss in a reflowable epub using today's standards and toys. But yes ... Kevin's suggestion of reducing the image's height from something other than 100% will help greatly.

05-25-2016, 11:11 AM	#4
dbb1480 Junior Member Posts: 6 Karma: 10 Join Date: May 2016 Device: Kindle Paperwhite	Hi Kevin and DiapDealer, You are both right, reducing the 100% made a huge difference! I think i really just need to play with optimal image size in order to get it to format correctly. Thank You Both!

06-10-2016, 11:51 AM	#6
jcsalomon Zealot Posts: 100 Karma: 1204 Join Date: Jun 2012 Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD	I’ve just encountered a similar issue, where Kindles—but not any EPUB reader I tested—insisted on breaking the page before & after the SVG wrapper, even when I’d removed height="100%"; see “SVG wrapper image occupies entire page, and shouldn’t”. Taking the advice here, I put the entire title page in a single SVG block, but I do wish I knew what was causing the problem.

06-10-2016, 12:48 PM	#7
KevinH Sigil Developer Posts: 8,491 Karma: 5703586 Join Date: Nov 2009 Device: many	That makes sense. If you look at KindleUnpack debug output run an azw3 (KF8) that uses an svg with image inside an xhtml file, you will see that Amazon has pulled out the svg into its own section. It always does this. This creates an artificial page break. The KindleUnpack code has to find the extracted svg and put it back inside the xhtml file when trying to unpack to epub from an azw3.

Advert

Advert