Centering SVG graphics in iBooks?

FunkeXMix · 01-02-2013, 07:34 PM

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>

dgatwood · 01-02-2013, 09:09 PM

Is this SVG being used in an HTML file by itself? If so, don't try to vertically center the content that way. The easiest way to do what you're trying to do is to set the height and width of everything to 100% and stuff it in the HTML. For example:

Code:

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Title page</title>
<link rel="stylesheet" type="text/css" href="nookstyles.css" />
<link rel="stylesheet" type="text/css" href="nookstyles2.css" />
<style type="text/css">
    html,body {
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
</style>
</head>
<body style="height: 100%; width: 100%;" >
<div style="width: 100%; height: 100%;">
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
  
  
  
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100%"
   height="100%"
   id="svg2"
   xml:space="preserve" viewBox="0 0 395.22656 688.82343" preserveAspectRatio="xMidYMid"><metadata
     id="metadata8"></metadata><defs
     id="defs6" /><g
     transform="matrix(1.25,0,0,-1.25,0,688.82344)"
     id="g10"><g
       transform="translate(72,477)"
       id="g12"><text
         transform="matrix(1,0,0,-1,-37.57,-83.26)"
         id="text14"><tspan
           x="0 43.327873 74.9673 93.238899 117.6906 134.01413 172.10236 190.37395 225.30495"
           y="0"
           id="tspan16"
           style="font-size:67.17500305px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Patriots:</tspan></text>
<text
         transform="matrix(1,0,0,-1,-22.32,-123.72)"
         id="text18"><tspan
           x="0 26.097876 44.134632 60.794281 88.638733 96.800613 113.46027 130.92603 139.35661 157.09108 168.74611 187.75693"
           y="0"
           id="tspan20"
           style="font-size:33.58800125px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Enemies From</tspan><tspan
           x="60.369999 93.75647 101.88477 111.02071 129.05746 137.18576"
           y="40.450001"
           id="tspan22"
           style="font-size:33.58800125px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Within</tspan></text>
<text
         transform="matrix(1,0,0,-1,40.18,-268.69)"
         id="text24"><tspan
           x="0 21.16044 31.681881 42.791111 51.980228 61.698357 66.459457 71.377296 82.192635"
           y="0"
           id="tspan26"
           style="font-size:19.59300041px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Anovel by</tspan><tspan
           x="-34.610001 -18.563334 -9.3350296 -0.145913 4.6151862 15.430522 20.348366 37.335495 43.389732 48.307575 63.257034 72.504929 77.834229 92.195892 103.32472 114.43395"
           y="23.6"
           id="tspan28"
           style="font-size:19.59300041px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">David A. Gatwood</tspan></text>
<text
         transform="matrix(1,0,0,-1,-34.92,-381.8)"
         id="text30"><tspan
           x="0 9.7989101 16.940275 23.892715 29.308565 33.905739 36.966324 43.918766 50.682281"
           y="0"
           id="tspan32"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Copyright</tspan></text>
<text
         transform="matrix(1,0,0,-1,22,-381.8)"
         id="text34"><tspan
           x="0"
           y="0"
           id="tspan36"
           style="font-size:12.59500027px;font-variant:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontierCopyright">©</tspan></text>
<text
         transform="matrix(1,0,0,-1,36.85,-381.8)"
         id="text38"><tspan
           x="0 6.6501598 14.43387 22.230175 29.018881 34.019096 40.68185 48.478153 52.571529 59.234283 62.39563 72.710938 78.655777 84.550232 87.610817 94.563263 97.724602 108.64447 112.53632 115.69767 125.30766 131.2525 134.67833 143.92307 151.06442 158.2058 165.15823"
           y="0"
           id="tspan40"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">2003-2012 David A. Gatwood.</tspan><tspan
           x="-9.4499998 1.00385 4.064435 7.12502 10.27377 19.99711 23.057695 30.010136 36.773651 40.19949 46.74889 49.910236 59.872879 66.120003 72.669403 78.903923 83.727814 89.634865 95.881989 102.83443"
           y="15.18"
           id="tspan42"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">All Rights Reserved.</tspan></text>
</g></g></svg></div>
</body>
</html>

FunkeXMix · 01-03-2013, 01:57 PM

I am confused now. I tried some things out with your code seeing that your text is indeed centered. But then I decided to remove any parameters I think might center it from the html document to make sure what is what. With no code to control the centering your SVG is still centered.

When I use my own it does not change position at all?

Yours pasted into my document (no alignment controlling factors):

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>LALTROUOMOBOOK_3ONEPAGE-3</title>
	
	</head>
	
     <div id="toc_marker-1"></div>   

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100%"
   height="100%"
   id="svg2"
   xml:space="preserve" viewBox="0 0 395.22656 688.82343" ><metadata
     id="metadata8"></metadata><defs
     id="defs6" /><g
     transform="matrix(1.25,0,0,-1.25,0,688.82344)"
     id="g10"><g
       transform="translate(72,477)"
       id="g12"><text
         transform="matrix(1,0,0,-1,-37.57,-83.26)"
         id="text14"><tspan
           x="0 43.327873 74.9673 93.238899 117.6906 134.01413 172.10236 190.37395 225.30495"
           y="0"
           id="tspan16"
           style="font-size:67.17500305px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Patriots:</tspan></text>
<text
         transform="matrix(1,0,0,-1,-22.32,-123.72)"
         id="text18"><tspan
           x="0 26.097876 44.134632 60.794281 88.638733 96.800613 113.46027 130.92603 139.35661 157.09108 168.74611 187.75693"
           y="0"
           id="tspan20"
           style="font-size:33.58800125px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Enemies From</tspan><tspan
           x="60.369999 93.75647 101.88477 111.02071 129.05746 137.18576"
           y="40.450001"
           id="tspan22"
           style="font-size:33.58800125px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Within</tspan></text>
<text
         transform="matrix(1,0,0,-1,40.18,-268.69)"
         id="text24"><tspan
           x="0 21.16044 31.681881 42.791111 51.980228 61.698357 66.459457 71.377296 82.192635"
           y="0"
           id="tspan26"
           style="font-size:19.59300041px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Anovel by</tspan><tspan
           x="-34.610001 -18.563334 -9.3350296 -0.145913 4.6151862 15.430522 20.348366 37.335495 43.389732 48.307575 63.257034 72.504929 77.834229 92.195892 103.32472 114.43395"
           y="23.6"
           id="tspan28"
           style="font-size:19.59300041px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">David A. Gatwood</tspan></text>
<text
         transform="matrix(1,0,0,-1,-34.92,-381.8)"
         id="text30"><tspan
           x="0 9.7989101 16.940275 23.892715 29.308565 33.905739 36.966324 43.918766 50.682281"
           y="0"
           id="tspan32"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Copyright</tspan></text>
<text
         transform="matrix(1,0,0,-1,22,-381.8)"
         id="text34"><tspan
           x="0"
           y="0"
           id="tspan36"
           style="font-size:12.59500027px;font-variant:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontierCopyright">©</tspan></text>
<text
         transform="matrix(1,0,0,-1,36.85,-381.8)"
         id="text38"><tspan
           x="0 6.6501598 14.43387 22.230175 29.018881 34.019096 40.68185 48.478153 52.571529 59.234283 62.39563 72.710938 78.655777 84.550232 87.610817 94.563263 97.724602 108.64447 112.53632 115.69767 125.30766 131.2525 134.67833 143.92307 151.06442 158.2058 165.15823"
           y="0"
           id="tspan40"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">2003-2012 David A. Gatwood.</tspan><tspan
           x="-9.4499998 1.00385 4.064435 7.12502 10.27377 19.99711 23.057695 30.010136 36.773651 40.19949 46.74889 49.910236 59.872879 66.120003 72.669403 78.903923 83.727814 89.634865 95.881989 102.83443"
           y="15.18"
           id="tspan42"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">All Rights Reserved.</tspan></text>
</g></g></svg>
</body>
</html>

My SVG but your alignment code:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>TEST</title>
		
<style type="text/css">
    html,body {
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
</style>
	</head>
	<body style="height: 100%; width: 100%;" >
<div style="width: 100%; height: 100%;">
     <div id="toc_marker-1"></div>    
    
  
<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 430.5 531.7754)" fill="#BF0A1E" font-family="'MyriadPro-Regular'" font-size="10">EDITOR'S LETTER</text>
</g>

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

I should have added that another reason I used outlines instead of text as you recommended is to maintain the look of the graphic element. If I use glyphs to embed the font some e-readers will still ignore it. This way it stays searchable and will look the same everywhere.

I do think you are more adept at SVG then I am, I am still learning a lot. But in the context of what I want to achieve, is'nt that a good solution?

On the plus side, older Kindle models (4th gen is used as a standard in Kindle Previewer I believe) do not show the svg graphics but at least shows the content within the text tags in the svg. A relatively good fall-back I guess.

I really appreciate your help, thanks!

FunkeXMix · 01-03-2013, 07:56 PM

This code worked pretty well, seems that arranging coordinates in the svg is the way to go. Still not centered, just almost. I'm gonna try to understand more about why it works a bit later. Exported svg code from Illustrator. In Illustrator I made the artboard iPad retina size to future proof it a bit since it will scale on screens that are smaller. Centered it on this artboard and exported.

Code:

<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 -663.1 1536 2048" enable-background="new -405.5 -663.1 1536 2048" xml:space="preserve">
<g id="Layer_2">
	<rect x="-404.5" y="-322.8" fill="#BF2126" width="1197" height="348"/>
	<rect x="-404.5" y="16.8" fill="#BF2126" width="1171.9" height="341.8"/>
	<rect x="-404.5" y="347.4" fill="#BF2126" width="964.8" height="344.6"/>
	<rect x="-404.5" y="683.3" fill="#BF2126" width="913.8" height="341.9"/>
</g>
<g id="Layer_1">
	<g>
		<rect x="-405.5" y="-322.8" fill="none" width="1450.5" height="1600.5"/>
		<path d="M-163-115.3h-121v62h135.5v74h-226v-337h219v74H-284v54h121V-115.3z"/>
		<path d="M-101.6-311.3c29-5,67.5-7.5,107.5-7.5c64.5,0,105.5,10.5,138.5,33.5c37,25.5,61,67.5,61,129.5c0,69-26,113.5-58.5,139
			c-37,29-92.5,41.5-158.5,41.5c-43.5,0-72.5-3-90-6V-311.3z M-11.1-46.3c4.5,1,13,1,19,1c58.5,1,102-31.5,102-107.5
			c0-66-39.5-97-93.5-97c-14,0-23,1-27.5,2V-46.3z"/>
		<path d="M337.7-316.3v337h-90.5v-337H337.7z"/>
		<path d="M452.3-240.3h-86v-76h264v76h-87.5v261h-90.5V-240.3z"/>
	</g>
	<g>
		<path d="M-226.5,364.7c-104.5,0-162-78.5-162-172c0-98,64-176,167.5-176c108.5,0,163.5,80.5,163.5,170.5
			c0,108.5-65,177.5-168.5,177.5H-226.5z M-222,293.2c43.5,0,69-42,69-103c0-58-26-102-70-102c-43.5,0-70,44-70,102.5
			c-0.5,60.5,26.5,102.5,70,102.5H-222z"/>
		<path d="M-15.5,27.2c25.5-4,64-7.5,109-7.5c51.5,0,88.5,7,114,26.5c21.5,16.5,33,40.5,33,73c0,42-31.5,71.5-57.5,81.5v1.5
			c22,10,34.5,31.5,43,60.5c10,34.5,21,83.5,27.5,96.5h-92c-5-10-14-36-23.5-78c-9-40-21.5-48.5-49.5-48.5H74v126.5h-89.5V27.2z
			 M74,167.7h23.5c34,0,53.5-16.5,53.5-41.5s-16.5-39.5-46.5-39.5c-17,0-26,1-30.5,2V167.7z"/>
		<path d="M390.1,13.2c-17.5,52-39,98.5-66,142.5l-54,4.5c17-48.5,30-95,37.5-142.5L390.1,13.2z"/>
		<path d="M423.1,269.2c20.5,10.5,53.5,21,87.5,21c31,0,46-10.5,46-27.5c0-16.5-15-25.5-53-38.5c-57-20.5-95-51.5-95-101.5
			c0-59.5,50.5-105.5,135.5-105.5c40,0,69,7.5,91,17l-19,72.5c-14.5-6.5-39.5-16-73-16c-27.5,0-42.5,10-42.5,25
			c0,17,18,23.5,60.5,39.5c60.5,22.5,87.5,54.5,87.5,101.5c0,58-45,107.5-143.5,107.5c-40.5,0-80-10.5-99-20.5L423.1,269.2z"/>
	</g>
	<g>
		<path d="M-374.5,358.2h90.5v261.5h129.5v75.5h-220V358.2z"/>
		<path d="M87.3,559.2h-121v62h135.5v74h-226v-337h219v74H-33.7v54h121V559.2z"/>
		<path d="M207.7,434.2h-86v-76h264v76h-87.5v261h-90.5V434.2z"/>
	</g>
	<g>
		<path d="M-309,765.2h-86v-76h264v76h-87.5v261H-309V765.2z"/>
		<path d="M109.6,890.2h-121v62h135.5v74h-226v-337h219v74H-11.4v54h121V890.2z"/>
		<path d="M171.1,694.2c25.5-4,64-7.5,109-7.5c51.5,0,88.5,7,114,26.5c21.5,16.5,33,40.5,33,73c0,42-31.5,71.5-57.5,81.5v1.5
			c22,10,34.5,31.5,43,60.5c10,34.5,21,83.5,27.5,96.5h-92c-5-10-14-36-23.5-78c-9-40-21.5-48.5-49.5-48.5h-14.5v126.5h-89.5V694.2z
			 M260.6,834.7h23.5c34,0,53.5-16.5,53.5-41.5s-16.5-39.5-46.5-39.5c-17,0-26,1-30.5,2V834.7z"/>
	</g>
	<g>
		<path d="M767.5-183.3v58.5h-134v-58.5H767.5z"/>
	</g>
	<g>
		<path d="M523.5,498.7v58.5h-134v-58.5H523.5z"/>
	</g>
</g>
</svg>

dgatwood · 01-03-2013, 09:51 PM

Quote:

Originally Posted by FunkeXMix

I am confused now. I tried some things out with your code seeing that your text is indeed centered. But then I decided to remove any parameters I think might center it from the html document to make sure what is what. With no code to control the centering your SVG is still centered.

In most clients, much of what I did is unnecessary—maybe unnecessary in all clients, but I've seen enough screwball handling of SVG that I was being paranoid.

FunkeXMix · 01-04-2013, 07:53 AM

Actually, to be honest with you. I just saw that you SVG has a bit more space on top then below on the iPad. Kindle devices always center SVGs, yay!

dgatwood · 01-04-2013, 11:17 AM

Quote:

Originally Posted by FunkeXMix

Actually, to be honest with you. I just saw that you SVG has a bit more space on top then below on the iPad. Kindle devices always center SVGs, yay!

If you're talking about my content, as far as I can tell, the image is getting centered correctly; the text is just a little too low in the image.

FunkeXMix · 01-04-2013, 07:35 PM

Where is the image? I did'nt get any image out of your code, just text.

dgatwood · 01-04-2013, 10:21 PM

Quote:

Originally Posted by FunkeXMix

Where is the image? I did'nt get any image out of your code, just text.

The image meaning the SVG content. The text wasn't centered within the bounding box because of a bug in my LaTeX code that generated the PDF that I translated into the SVG.

Be afraid.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub on IPad: SVG-graphics don't show.	georg3200	Apple Devices	19	07-10-2013 03:41 PM
SVG for iBooks?	FunkeXMix	ePub	5	01-02-2013 09:19 PM
Which is the best way to add SVG (vector graphics) to PDF files ?	DSpider	PDF	0	04-01-2011 08:27 PM
Converting SVG graphics	navels	Sigil	5	03-15-2011 10:58 PM
iBooks: No Support for Selection & Copy/Paste Operations of SVG Texts on EPUB	reuben	ePub	2	09-22-2010 09:06 AM

01-04-2013, 07:53 AM	#6
FunkeXMix Enthusiast Posts: 48 Karma: 10 Join Date: Aug 2011 Device: Ipad	Actually, to be honest with you. I just saw that you SVG has a bit more space on top then below on the iPad. Kindle devices always center SVGs, yay!

01-04-2013, 07:35 PM	#8
FunkeXMix Enthusiast Posts: 48 Karma: 10 Join Date: Aug 2011 Device: Ipad	Where is the image? I did'nt get any image out of your code, just text.

Advert

Advert