View Single Post
Old 01-02-2013, 06:34 PM   #1
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 48
Karma: 10
Join Date: Aug 2011
Device: Ipad
Centering SVG graphics in iBooks?

Hi all!

I have been sitting with this for a couple of hours and the result is not satisfactory. What about you guys, know any trick?

First I tried with proper svg code (I think). "preserveAspectRatio=" values seem to have no effect, x y have no effect:

Then I wrapped it in divs with a css class of "margin-top:50%;". That worked in regards to affecting alignment but 50% did not put it in the middle, rather further down close to the bottom. I could play with percentage values to get it centered on a 1024x768 iPad, but what about future larger screens. Probably will not be in the middle on those if 50% puts it wrong.

I do not know what else to try, can you help? Thanks.

Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          width="100%" height="100%" x="0" y="0" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet" >
	 
<g id="Layer_1_1_">
	<g id="Layer_3">
		<polygon fill="#BF0A1E" points="660.2,0 660.2,182.3 647.9,182.3 647.9,362.4 523.1,362.4 523.1,542.5 768,542.5 768,734.3 
			0,734.3 0,0 		"/>
	</g>
</g>
<g>
	<rect y="-3" fill="none" width="725" height="800"/>
	<path d="M131,109.5H65.6V143h73.2v40h-122V1H135v40H65.6v29.2H131V109.5z"/>
	<path d="M164.1,3.7c15.7-2.7,36.5-4.1,58.1-4.1c34.8,0,57,5.7,74.8,18.1c20,13.8,32.9,36.5,32.9,69.9c0,37.3-14,61.3-31.6,75.1
		c-20,15.7-50,22.4-85.6,22.4c-23.5,0-39.2-1.6-48.6-3.2V3.7z M213,146.8c2.4,0.5,7,0.5,10.3,0.5c31.6,0.5,55.1-17,55.1-58.1
		c0-35.6-21.3-52.4-50.5-52.4c-7.6,0-12.4,0.5-14.9,1.1V146.8z"/>
	<path d="M401.4,1v182h-48.9V1H401.4z"/>
	<path d="M463.2,42h-46.4V1h142.6v41h-47.3V183h-48.9V42z"/>
	<path d="M626,76.9v31.6h-72.4V76.9H626z"/>
	<path d="M96.7,365.9c-56.4,0-87.5-42.4-87.5-92.9c0-52.9,34.6-95,90.5-95c58.6,0,88.3,43.5,88.3,92.1c0,58.6-35.1,95.9-91,95.9
		H96.7z M99.1,327.3c23.5,0,37.3-22.7,37.3-55.6c0-31.3-14-55.1-37.8-55.1c-23.5,0-37.8,23.8-37.8,55.4
		c-0.3,32.7,14.3,55.4,37.8,55.4H99.1z"/>
	<path d="M210.6,183.7c13.8-2.2,34.6-4.1,58.9-4.1c27.8,0,47.8,3.8,61.6,14.3c11.6,8.9,17.8,21.9,17.8,39.4c0,22.7-17,38.6-31.1,44
		v0.8c11.9,5.4,18.6,17,23.2,32.7c5.4,18.6,11.3,45.1,14.9,52.1h-49.7c-2.7-5.4-7.6-19.4-12.7-42.1c-4.9-21.6-11.6-26.2-26.7-26.2
		H259V363h-48.3V183.7z M259,259.6h12.7c18.4,0,28.9-8.9,28.9-22.4c0-13.5-8.9-21.3-25.1-21.3c-9.2,0-14,0.5-16.5,1.1V259.6z"/>
	<path d="M429.6,176.1c-9.5,28.1-21.1,53.2-35.6,77l-29.2,2.4c9.2-26.2,16.2-51.3,20.3-77L429.6,176.1z"/>
	<path d="M447.5,314.4c11.1,5.7,28.9,11.3,47.3,11.3c16.7,0,24.8-5.7,24.8-14.9c0-8.9-8.1-13.8-28.6-20.8
		c-30.8-11.1-51.3-27.8-51.3-54.8c0-32.1,27.3-57,73.2-57c21.6,0,37.3,4.1,49.1,9.2l-10.3,39.2c-7.8-3.5-21.3-8.6-39.4-8.6
		c-14.9,0-23,5.4-23,13.5c0,9.2,9.7,12.7,32.7,21.3c32.7,12.1,47.3,29.4,47.3,54.8c0,31.3-24.3,58.1-77.5,58.1
		c-21.9,0-43.2-5.7-53.5-11.1L447.5,314.4z"/>
	<path d="M16.7,361h48.9v141.2h69.9V543H16.7V361z"/>
	<path d="M266.1,469.5h-65.3V503h73.2v40h-122V361h118.3v40h-69.4v29.2h65.3V469.5z"/>
	<path d="M331.1,402h-46.4v-41h142.6v41H380V543h-48.9V402z"/>
	<path d="M493.9,436.9v31.6h-72.4v-31.6H493.9z"/>
	<path d="M52.1,582H5.7v-41h142.6v41H101V723H52.1V582z"/>
	<path d="M278.2,649.5h-65.3V683H286v40H164V541h118.3v40h-69.4v29.2h65.3V649.5z"/>
	<path d="M311.4,543.7c13.8-2.2,34.6-4,58.9-4c27.8,0,47.8,3.8,61.6,14.3c11.6,8.9,17.8,21.9,17.8,39.4c0,22.7-17,38.6-31.1,44v0.8
		c11.9,5.4,18.6,17,23.2,32.7c5.4,18.6,11.3,45.1,14.9,52.1h-49.7c-2.7-5.4-7.6-19.4-12.7-42.1c-4.9-21.6-11.6-26.2-26.7-26.2h-7.8
		V723h-48.3V543.7z M359.7,619.6h12.7c18.4,0,28.9-8.9,28.9-22.4c0-13.5-8.9-21.3-25.1-21.3c-9.2,0-14,0.5-16.5,1.1V619.6z"/>
</g>

<g id="hidden_full_text">
	<text transform="matrix(1 0 0 1 446.5 531.7754)" fill="#BF0A1E" font-family="'MyriadPro-Regular'" font-size="10">EDITOR'S LETTER</text>
</g>

</svg>

Last edited by FunkeXMix; 01-02-2013 at 07:23 PM.
FunkeXMix is offline   Reply With Quote