Part of the problem may be that a lot of your SVG is under-specified. You're leaving out a bunch of optional attributes that you probably shouldn't be leaving out, e.g. preserveAspectRatio. And you shouldn't need to translate the image. Leave that out.
The following works for me everywhere I've tried it:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Cover</title>
<link rel="stylesheet" type="text/css" href="nookstyles.css" />
<link rel="stylesheet" type="text/css" href="nookstyles2.css" />
<style type="text/css">
html,body {
height: 100% !important;
min-height: 100% !important;
width: 100% !important;
margin: 0 !important;
border-width: 0 !important;
padding: 0 !important;
}
</style>
</head>
<body style="oeb-column-number: 1; height: 100%; width: 100%; background-color: #000000;" >
<div class="coverpage">
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="100%"
height="100%"
id="svg2"
xml:space="preserve" viewBox="0 0 2040 2640" preserveAspectRatio="xMidYMid">
<image xlink:href="tiw-frontcover.jpg" height="2640" width="2040">
<desc>Patriots: Traitors in Waiting</desc>
</image>
</svg>
</div>
</body>
</html>
And in my stylesheet:
Code:
div.coverpage {
page-break-inside: avoid;
text-indent: 0 !important;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
div.coverpage p {
text-indent: 0 !important;
}
Change
2040 and
2640 to the width and height of your cover image in two places.