Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 12-29-2012, 09:51 PM   #1
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 38
Karma: 10
Join Date: Aug 2011
Device: Ipad
SVG for iBooks?

Hi all!

I wanted to achieve this effect (attached img)

To make it look crisp when scaled I opted for SVG vectors using the code further down. It works fine for Kindle KF8 and other epub readers, except for iBooks. Nothing shows, just a question mark graphic. My question is, what is missing in the code for it to work on iBooks?

On another note, the iBooks Assets Guide states that eBooks will get rejected if images contain embedded text. In that regards I am worried about using this type of graphics for headings. The text in this svg is not searchable unfortunately, I do not know if that is possible to do with svg.

Anyone got any experience using svg with text this way when publishing to iBooks?

Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="768px" height="722.551px" viewBox="0 0 768 722.551" enable-background="new 0 0 768 722.551" xml:space="preserve">
<font horiz-adv-x="1000">
<!-- Copyright (c) 2000 Adobe Systems Incorporated. All Rights Reserved. U.S. Patent Des. pending.Myriad is a registered trademark of Adobe Systems Incorporated. -->
<font-face font-family="MyriadPro-Black" units-per-em="1000" underline-position="-100" underline-thickness="50"/>
<missing-glyph horiz-adv-x="500" d="M0,0l500,0l0,700l-500,0M250,395l-170,255l340,0M280,350l170,255l0,-510M80,50l170,255l170,-255M50,605l170,-255l-170,-255z"/>
<glyph unicode="D" horiz-adv-x="710" d="M62,4C97,-2 155,-8 242,-8C374,-8 485,17 559,75C624,126 676,215 676,353C676,477 628,561 554,612C488,658 406,679 277,679C197,679 120,674 62,664M243,537C252,539 270,541 298,541C406,541 485,479 485,347C485,195 398,130 281,132C269,132 252,132 243,134z"/>
<glyph unicode="E" horiz-adv-x="552" d="M485,418l-242,0l0,108l257,0l0,148l-438,0l0,-674l452,0l0,148l-271,0l0,124l242,0z"/>
<glyph unicode="I" horiz-adv-x="305" d="M62,674l0,-674l181,0l0,674z"/>
<glyph unicode="L" horiz-adv-x="528" d="M62,0l440,0l0,151l-259,0l0,523l-181,0z"/>
<glyph unicode="O" horiz-adv-x="730" d="M359,-11C566,-11 696,127 696,344C696,524 586,685 369,685C162,685 34,529 34,333C34,146 149,-11 358,-11M365,132C278,132 224,216 225,337C225,454 278,542 365,542C453,542 505,454 505,338C505,216 454,132 367,132z"/>
<glyph unicode="R" horiz-adv-x="617" d="M62,0l179,0l0,253l29,0C326,253 351,236 369,156C388,72 406,20 416,0l184,0C587,26 565,124 545,193C528,251 503,294 459,314l0,3C511,337 574,396 574,480C574,545 551,593 508,626C457,665 383,679 280,679C190,679 113,672 62,664M241,541C250,543 268,545 302,545C362,545 395,516 395,466C395,416 356,383 288,383l-47,0z"/>
<glyph unicode="S" horiz-adv-x="561" d="M40,31C78,11 157,-10 238,-10C435,-10 525,89 525,205C525,299 471,363 350,408C265,440 229,453 229,487C229,517 259,537 314,537C381,537 431,518 460,505l38,145C454,669 396,684 316,684C146,684 45,592 45,473C45,373 121,311 235,270C311,244 341,226 341,193C341,159 311,138 249,138C181,138 115,159 74,180z"/>
<glyph unicode="T" horiz-adv-x="570" d="M193,0l181,0l0,522l175,0l0,152l-528,0l0,-152l172,0z"/>
<glyph unicode="&#x2019;" horiz-adv-x="284" d="M97,683C82,588 56,495 22,398l108,9C184,495 227,588 262,692z"/>
<glyph unicode=" " horiz-adv-x="198"/>
<glyph unicode="&#xF6BA;" horiz-adv-x="328" d="M30,393l0,-117l268,0l0,117z"/>
</font>

	<g>
	<g>
		<defs>
			<rect id="SVGID_1_" x="-30.354" y="-126.967" width="1895.313" height="961"/>
		</defs>
		<clipPath id="SVGID_2_">
			<use xlink:href="#SVGID_1_"  overflow="visible"/>
		</clipPath>
		
			<line clip-path="url(#SVGID_2_)" fill="none" stroke="#C0081F" stroke-width="181" stroke-miterlimit="10" x1="1.965" y1="91.283" x2="660.333" y2="91.283"/>
	</g>
	<g>
		<defs>
			<rect id="SVGID_3_" x="-30.354" y="-126.967" width="1895.313" height="961"/>
		</defs>
		<clipPath id="SVGID_4_">
			<use xlink:href="#SVGID_3_"  overflow="visible"/>
		</clipPath>
		
			<line clip-path="url(#SVGID_4_)" fill="none" stroke="#C0081F" stroke-width="181" stroke-miterlimit="10" x1="1.965" y1="271.283" x2="647.87" y2="271.283"/>
	</g>
	<g>
		<defs>
			<rect id="SVGID_5_" x="-30.354" y="-126.967" width="1895.313" height="961"/>
		</defs>
		<clipPath id="SVGID_6_">
			<use xlink:href="#SVGID_5_"  overflow="visible"/>
		</clipPath>
		
			<line clip-path="url(#SVGID_6_)" fill="none" stroke="#C0081F" stroke-width="181" stroke-miterlimit="10" x1="1.965" y1="451.284" x2="522.83" y2="451.284"/>
	</g>
	<g>
		<defs>
			<rect id="SVGID_7_" x="-30.354" y="-126.967" width="1895.313" height="961"/>
		</defs>
		<clipPath id="SVGID_8_">
			<use xlink:href="#SVGID_7_"  overflow="visible"/>
		</clipPath>
		
			<line clip-path="url(#SVGID_8_)" fill="none" stroke="#C0081F" stroke-width="181" stroke-miterlimit="10" x1="1.965" y1="631.284" x2="768" y2="631.284"/>
	</g>
</g>
<text transform="matrix(1 0 0 1 1.9648 182.2837)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="2">E</text>
<text transform="matrix(1 0 0 1 154.5107 182.2837)" font-family="'MyriadPro-Black'" font-size="270">D</text>
<text transform="matrix(1 0 0 1 348.0986 182.2837)" font-family="'MyriadPro-Black'" font-size="270">I</text>
<text transform="matrix(1 0 0 1 429.0967 182.2837)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-12">T</text>
<text transform="matrix(1 0 0 1 569.2246 182.2837)" font-family="'MyriadPro-Black'" font-size="270"></text>
<text transform="matrix(1 0 0 1 660.2246 182.2837)" font-family="'MyriadPro-Black'" font-size="270"> </text>
<text transform="matrix(1 0 0 1 1.9648 362.3735)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="1">O</text>
<text transform="matrix(1 0 0 1 201.2236 362.3735)" font-family="'MyriadPro-Black'" font-size="270">R</text>
<text transform="matrix(1 0 0 1 368.8906 362.3735)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-21">’</text>
<text transform="matrix(1 0 0 1 440.4395 362.3735)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="1">S</text>
<text transform="matrix(1 0 0 1 594.6074 362.3735)" font-family="'MyriadPro-Black'" font-size="270"> </text>
<text transform="matrix(1 0 0 1 647.8584 362.3735)" font-family="'MyriadPro-Black'" font-size="270"> </text>
<text transform="matrix(1 0 0 1 1.9648 542.4624)" font-family="'MyriadPro-Black'" font-size="270">L</text>
<text transform="matrix(1 0 0 1 142.6348 542.4624)" font-family="'MyriadPro-Black'" font-size="270">E</text>
<text transform="matrix(1 0 0 1 291.9448 542.4624)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-12">T</text>
<text transform="matrix(1 0 0 1 432.0723 542.4624)" font-family="'MyriadPro-Black'" font-size="270"></text>
<text transform="matrix(1 0 0 1 523.0645 542.4624)" font-family="'MyriadPro-Black'" font-size="270"> </text>
<text transform="matrix(1 0 0 1 2.2349 722.5522)" font-family="'MyriadPro-Black'" font-size="270">T</text>
<text transform="matrix(1 0 0 1 154.7866 722.5522)" font-family="'MyriadPro-Black'" font-size="270">E</text>
<text transform="matrix(1 0 0 1 307.6045 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="1">R</text>
<text transform="matrix(1 0 0 1 476.8916 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 529.2705 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 555.1904 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 607.5693 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 633.4883 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 685.8672 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 737.707 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 763.8955 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 815.7344 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 841.9238 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 893.7627 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 919.9531 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 971.791 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 997.9805 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 1049.8203 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 1076.0098 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 1127.8486 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 1154.0391 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">     </text>
<text transform="matrix(1 0 0 1 1283.6357 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27"> </text>
<text transform="matrix(1 0 0 1 1309.8252 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 1361.6641 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">  </text>
<text transform="matrix(1 0 0 1 1414.043 722.5522)" font-family="'MyriadPro-Black'" font-size="270" letter-spacing="-27">   </text>
<text transform="matrix(1 0 0 1 1491.8008 722.5522)" font-family="'MyriadPro-Black'" font-size="270"> </text>
</svg>
Attached Thumbnails
Click image for larger version

Name:	editorsletter.jpg
Views:	59
Size:	55.5 KB
ID:	98467  
FunkeXMix is offline   Reply With Quote
Old 12-30-2012, 02:48 AM   #2
DSpider
Addict
DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.
 
DSpider's Avatar
 
Posts: 399
Karma: 326969
Join Date: Nov 2009
Location: Romania
Device: iPod touch 2G (16 GB)
Maybe try saving it with Inkscape instead?

Also, I think it can be achievable with CSS, rather than SVG.
DSpider is offline   Reply With Quote
 
Enthusiast
Old 12-30-2012, 04:28 PM   #3
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 38
Karma: 10
Join Date: Aug 2011
Device: Ipad
I got it working, false alarm. The content.opf manifest was just missing "<item id="header-svg" href="image/header.svg" media-type="image/svg+xml"/>"

I'm suprised it worked on all other e-readers.

Thanks for trying to help Dspider.

Now I need to learn how to make the SVG text searchable.

Last edited by FunkeXMix; 12-30-2012 at 05:03 PM.
FunkeXMix is offline   Reply With Quote
Old 12-30-2012, 11:12 PM   #4
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 248
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
I'm pretty sure you'll never be usefully searchable if you specify the text a character at a time. If you rewrite this as a text tag with a tspan tag and multiple x locations (one per character), you should be able to achieve the same effect, but your text will be properly searchable (instead of being able to search for only one letter at a time). For example:

Code:
<text
         transform="matrix(1,0,0,-1,-37.57,-96.75)"
         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: 67px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Patriots:</tspan></text>
Do not use <img> tags to include the SVG; if you do the text won't be searchable no matter what the SVG looks like. I *think* <object> and <embed> are also searchable, but I'm not certain. For sure, the text should be searchable if you include the svg code inline in the HTML.
dgatwood is offline   Reply With Quote
Old 01-02-2013, 02:29 PM   #5
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 38
Karma: 10
Join Date: Aug 2011
Device: Ipad
You are right, I need to embed the code into html. Forced hyphenation is a part of the design as you see in the picture I attached earlier. That will of course make any search fail since the text is divided. My solution for this is to output it as outlines/graphics instead of text and then add a small piece of svg text code positioned in the read area with the same color so it is invisible but searchable. I am hoping this will work with the VoiceOver feature that iBooks requires to work with their eBooks as stated in the iBooks Assets Guide as well.
FunkeXMix is offline   Reply With Quote
Old 01-02-2013, 08:19 PM   #6
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 248
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by FunkeXMix View Post
You are right, I need to embed the code into html. Forced hyphenation is a part of the design as you see in the picture I attached earlier. That will of course make any search fail since the text is divided. My solution for this is to output it as outlines/graphics instead of text and then add a small piece of svg text code positioned in the read area with the same color so it is invisible but searchable. I am hoping this will work with the VoiceOver feature that iBooks requires to work with their eBooks as stated in the iBooks Assets Guide as well.
I think you're making this way too hard. Searching should work as long as the entire text of a single word or phrase falls within the same <text> element. You can use more than one <tspan> element within that element to draw each part of the word. If you do it that way, searching should "just work".

In other words, the easiest way to do what you are doing is this:

Code:
<text>
    <!-- Draw each piece of the word/string -->
    <tspan ...>antidis</tspan>
    <tspan ...>establish</tspan>
    <tspan ...>mentar</tspan>
    <tspan ...>ianism</tspan>
</text>
<text>
    <!-- Draw the hyphens -->
    <tspan ...>-</tspan>
    <tspan ...>-</tspan>
    <tspan ...>-</tspan>
</text>
dgatwood is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
<svg> to <img> codrutoctavian ePub 8 03-01-2012 08:54 PM
Apple's iBooks 2, iBooks Author: Bids to own publishing's future wannabee News 0 01-19-2012 07:33 PM
SVG Covers paulfiera Calibre 2 07-30-2011 08:37 PM
iBooks: No Support for Selection & Copy/Paste Operations of SVG Texts on EPUB reuben ePub 2 09-22-2010 08:06 AM
Kindle and SVG? Tom Wood News 1 09-03-2010 08:06 PM


All times are GMT -4. The time now is 11:27 PM.


MobileRead.com is a privately owned, operated and funded community.