Here is what I have now and on the nook, its off to the left a bit and not centered. Yes I have 0.5.3 now and the code does work now.
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>The Hunger Games</title>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveaspectratio="xMidYMid meet" version="1.1" viewbox="0 0 523 712" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="712" xlink:href="../Images/cover.jpg" width="523"></image>
</svg>
</div>
</body>
</html>
This is what the very original file looked like untouched.
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>The Hunger Games</title>
<link href="../Styles/LD.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
body.sgc-2 {margin: 0.00em;}
img.sgc-1 {height: 100%}
/*]]>*/
</style>
</head>
<body class="sgc-2">
<div id="coverpage">
<p class="center"><img alt="cover" class="sgc-1" src="../Images/cover.jpg" /></p>
</div>
<p class="breakhere"></p>
</body>
</html>
The coverpage id and the center class that is used in the <p> tags doesnt seem to center the svg wrapper which is why I removed them.