SVG mess in my epub

Iznogood · 12-31-2012, 11:14 AM

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:

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.

Iznogood · 12-31-2012, 11:19 AM

I forgot to include my folder structure:

Code:

*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, 08: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:

https://www.mobileread.com/forums/sho...d.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.

12-31-2012, 11:19 AM	#2
Iznogood Guru Posts: 932 Karma: 15752887 Join Date: Mar 2011 Location: Norway Device: Ipad, kindle paperwhite	I forgot to include my folder structure: Code: 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

12-31-2012, 08:55 PM	#3
dgatwood Curmudgeon Posts: 629 Karma: 1623086 Join Date: Jan 2012 Device: iPad, iPhone, Nook Simple Touch	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: https://www.mobileread.com/forums/sho...d.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. Last edited by dgatwood; 12-31-2012 at 09:44 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub on IPad: SVG-graphics don't show.	georg3200	Apple Devices	19	07-10-2013 02:41 PM
epub from SVG files	sachin	ePub	7	05-11-2012 09:04 AM
EPub: Bilder mit <svg> einbinden	mmat1	Erste Hilfe	10	02-27-2012 09:46 AM
Illustrated ebooks with epub: using the svg image element	dpapathanasiou	ePub	0	06-15-2011 04:17 PM
Why does Digital Editions mess with my non-PDF, non-ePub files?	Seabound	Sony Reader	3	10-15-2008 05:18 AM

Advert