View Full Version : SVG mess in my epub


Iznogood
12-31-2012, 12:14 PM
I have an SVG image that I want to use as the cover for my epub, and also use it elsewhere in my project. This svg file contains some references to some fonts (internal stylesheet) and contains text and an image:

cover.svg:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 864 1242" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
@font-face{
font-family:Papyrus;
font-weight:normal;
font-style:normal;
src:url(fonts/papyrus-regular.ttf);
}
</style>
</defs>
<rect height="1242" width="864" fill="#96C2F0"/>
<text x="432" y="200" text-anchor="middle" font-size="60px" font-family="Papyrus" fill="black" stroke="black" stroke-width="1">My title here</text>
<image height="363" width="295" x="289" y="304" xlink:href="images/image.png"></image>
</svg>

This page displays well in a web browser and validates fine

I want to use this svg file several places in my book, so I add it to the .opf file:

<manifest>
<item id="cover_svg" href="cover.svg" media-type="image/svg+xml"/>

<guide>
<reference type="cover" title="Cover" href="cover.xhtml"/>


I also add it to metadata as cover:

<meta name="cover" content="cover_svg"/>


And I add it to my cover.xhtml:

<?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>Front Cover</title>
<link href="stylesheet_global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="svg_outer">
<div class="svg_inner">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 864 1242" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1242" width="864" x="0" y="0" xlink:href="cover.svg"></image>
</svg>
</div>
</div>
</body>
</html>


And it turns into a complete mess:
1) Even though I have given the SVG-file as cover in metadata and the cover.xhtml in the guide, no thumbnail image show up in iBooks.

2) When I open cover.svg in my web browser, it uses my custom font, papyrus, and inserts my image correctly. But when I open cover.xhtml, which draws a svg grid and inserts cover.svg on it, the image is not showing and my beutiful costom font is nowhere to be seen.

3) Even though I make cover.svg to be 864x1242 pixles and makes a grid in cover.xhtml that is 864x1242 and specifies that the image that is to be inserted is height="1242" width="864" x="0" y="0", cover.svg does not fill the entire screen when used inside cover.xhtml.

I've been scratching my head on this for two days now. Can someone with the expertise on svg tell me what's going on? I can't give the project files in this post, but can send the complete test code as private message if necessary.

Iznogood
12-31-2012, 12:19 PM
I forgot to include my folder structure:

*OEBPS
*Fonts
papyrus-regular.tff
*Images
image.png
content.opf
cover.svg
cover.xhtml
toc.ncx
stylesheet_global.css

Directories are marked with an asterisk (*) in front of the name

dgatwood
12-31-2012, 09:55 PM
Are all of the resources (fonts, SVG files, etc.) properly declared in the OPF file? IIRC, iBooks ignores any files that aren't explicitly listed in the manifest even if they are referenced by other files.

Edit: Also found this thread:

http://www.mobileread.com/forums/showthread.php?t=197461

I filed a bug with Apple. If they bounce it back to me and point out a flaw in the content, I'll let you both know. Otherwise, hopefully they'll fix it at some point.

If you're just using SVG to make the cover look good when you view the cover page, you can probably work around the problem by setting the cover image to the actual PNG file that you're using for the underlying image data. Of course, if your actual SVG is more complicated (adding text on top of that or whatever), then that obviously won't work.