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:
Code:
<?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:
Code:
<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:
Quote:
<meta name="cover" content="cover_svg"/>
|
And I add it to my cover.xhtml:
Code:
<?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.