View Single Post
Old 01-03-2013, 06:56 PM   #4
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 38
Karma: 10
Join Date: Aug 2011
Device: Ipad
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>
FunkeXMix is offline   Reply With Quote