SVGs are centered by KF8, how do you prevent it?

[FunkeXMix]

Hi all,

KF8 seems to center and put SVGs on their own page by default. Does any know how to prevent that?

The code below creates a graphic at the top and then the h3 and p tag is supposed to appear under it. Works perfectly on iPad. I don't know why it doesn't on Kindle, any ideas?

Thanks.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="100%" height="100%"  
viewBox="-405.5 -594.2 1536 359.3" enable-background="new -405.5 -594.2 1536 359.3" xml:space="preserve">

<g id="Layer_4">
</g>
<g id="Layer_6">
<g>
<g>
			
<line fill="none" stroke="#000000" stroke-width="181.05" stroke-miterlimit="10" x1="-405.5" y1="-505.7" x2="1035.8" y2="-505.7"/>
<g>
<path fill="#FFFFFF" d="M-260.8-425.1c-6.4,3.3-22.7,7.2-43.2,7.2c-64.4,0-92.8-40.1-92.8-85.9c0-60.6,44.5-91.5,95.9-91.5
c19.7,0,35.8,3.8,42.9,7.4l-8.9,36.6c-7.4-3.1-18.1-6.1-32-6.1c-26.3,0-49.3,15.6-49.3,50.6c0,31.2,18.7,50.6,50.4,50.6
c11,0,23.5-2,30.7-4.9L-260.8-425.1z"/>
<path fill="#FFFFFF" d="M-164.5-417.7c-53.4,0-82.8-40.1-82.8-87.9c0-50.1,32.7-90,85.6-90c55.5,0,83.6,41.2,83.6,87.2
c0,55.5-33.2,90.7-86.1,90.7H-164.5z M-162.2-454.2c22.2,0,35.3-21.5,35.3-52.7c0-29.6-13.3-52.1-35.8-52.1
c-22.2,0-35.8,22.5-35.8,52.4c-0.3,30.9,13.5,52.4,35.8,52.4H-162.2z"/>
<path fill="#FFFFFF" d="M-51.5-592.8h46.3v133.7H61v38.6H-51.5V-592.8z"/>
<path fill="#FFFFFF" d="M156.6-417.7c-53.4,0-82.8-40.1-82.8-87.9c0-50.1,32.7-90,85.6-90c55.5,0,83.6,41.2,83.6,87.2
c0,55.5-33.2,90.7-86.1,90.7H156.6z M158.9-454.2c22.2,0,35.3-21.5,35.3-52.7c0-29.6-13.3-52.1-35.8-52.1
c-22.2,0-35.8,22.5-35.8,52.4c-0.3,30.9,13.5,52.4,35.8,52.4H158.9z"/>
<path fill="#FFFFFF" d="M269.5-590.2c12.5-2,30.7-3.8,56.7-3.8c24.8,0,42.7,4.6,54.7,13.8c11.8,8.7,19.7,23.8,19.7,41.4
c0,17.4-5.9,32.5-16.9,42.4c-13.8,12.3-34,17.9-57.3,17.9c-4.6,0-8.4-0.5-11.2-0.5v58.5h-45.8V-590.2z M315.3-514.3
c2.6,0.3,5.6,0.5,10.5,0.5c17.9,0,29.1-9.2,29.1-24c0-12.8-8.4-21.5-26.1-21.5c-6.6,0-11.2,0.5-13.5,1V-514.3z"/>
<path fill="#FFFFFF" d="M467.9-592.8v63.9h56v-63.9h46.3v172.3h-46.3v-68h-56v68h-46.3v-172.3H467.9z"/>
<path fill="#FFFFFF" d="M679-417.7c-53.4,0-82.8-40.1-82.8-87.9c0-50.1,32.7-90,85.6-90c55.5,0,83.6,41.2,83.6,87.2
c0,55.5-33.2,90.7-86.1,90.7H679z M681.3-454.2c22.2,0,35.3-21.5,35.3-52.7c0-29.6-13.3-52.1-35.8-52.1
c-22.2,0-35.8,22.5-35.8,52.4c-0.3,30.9,13.5,52.4,35.8,52.4H681.3z"/>
<path fill="#FFFFFF" d="M792-420.5v-172.3h54.4l27.3,52.9c9.5,17.1,19.4,40.1,27.1,60.3h0.8c-2.6-22.7-3.6-46.8-3.6-72.3v-40.9
h42.2v172.3h-48.6l-29.4-57.3c-9.5-18.1-20.7-41.4-28.9-62.1h-1c1.3,23.3,1.8,49.1,1.8,76.9v42.4H792z"/>
</g>
</g>
</g>
</g>
</svg>

<h3 class="toc_colophon_subheadingnomargin">Heading</h3>

p class="toc_colophon_content">Paragraph</p>

[dgatwood]

Add a preserveAspectRatio attribute and specify a different alignment behavior from the default. For example, preserveAspectRatio="xMinYMid" should be vertically centered in the block but left justified. See the SVG specification for other options.

[FunkeXMix]

Hmm, interesting.

As I said the code works on iPad using inline SVG code with headers and paragraphs appearing under the SVG graphic like they should. After converting the ePub to mobi with the Kindle Previewer and unpacking it with Mobi Unpack to see what it had done with the code, I saw too my surprise that it had made the inline SVG code into SVG docs/images and added them to content.opf. I am guessing that this is somehow connected to why they display on their own page now.

I will see what I can come up with to fix this. I will also take what you said dgatwood into consideration and see if it helps. Thanks for the info.

<img src="../Images/svgimg0006.svg"/>

[KevinH]

Hi,

What you are looking at here is the epub created from the K8 file by Mobi_Unpack. You may want to check the box for generating the raw markup language and look in the raw K8 file to see how Kindlegen literally plays with your input.

KevinH

Originally Posted by FunkeXMix

Hmm, interesting.

As I said the code works on iPad using inline SVG code with headers and paragraphs appearing under the SVG graphic like they should. After converting the ePub to mobi with the Kindle Previewer and unpacking it with Mobi Unpack to see what it had done with the code, I saw too my surprise that it had made the inline SVG code into SVG docs/images and added them to content.opf. I am guessing that this is somehow connected to why they display on their own page now.

I will see what I can come up with to fix this. I will also take what you said dgatwood into consideration and see if it helps. Thanks for the info.

<img src="../Images/svgimg0006.svg"/>