|
Enthusiast
Posts: 48
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="’" 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="" 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>
|