SVG for iBooks?

FunkeXMix · 12-29-2012, 09:51 PM

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>

DSpider · 12-30-2012, 02:48 AM

Maybe try saving it with Inkscape instead?

Also, I think it can be achievable with CSS, rather than SVG.

FunkeXMix · 12-30-2012, 04:28 PM

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.

dgatwood · 12-30-2012, 11:12 PM

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.

FunkeXMix · 01-02-2013, 02:29 PM

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.

dgatwood · 01-02-2013, 08:19 PM

Quote:

Originally Posted by FunkeXMix

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>

12-30-2012, 04:28 PM	#3
FunkeXMix Enthusiast Posts: 48 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.

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

12-30-2012, 02:48 AM	#2
DSpider Evangelist Posts: 450 Karma: 343115 Join Date: Nov 2009 Location: Romania Device: PW2 2014	Maybe try saving it with Inkscape instead? Also, I think it can be achievable with CSS, rather than SVG.

12-30-2012, 11:12 PM	#4
dgatwood Curmudgeon Posts: 629 Karma: 1623086 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.

01-02-2013, 02:29 PM	#5
FunkeXMix Enthusiast Posts: 48 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.