Here is a revised SVG page:
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>Walden and Beyond</title>
<link href="../Styles/walden.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@page {
padding: 0;
margin: 0;
}
body {
text-align: center;
padding: 0;
margin: 0;
}
.image {
width: 100%;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 2048 1600"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1536" width="2048" xlink:href="../Images/cranch1840-the_us_capitol.jpg" />
<text x="900" y="1550" font-size="40">The U.S. Capitol (1840)</text>
</svg>
</body>
</html>
Notice it rescales both the image and the text together and does not allow the text to be on a different page.
Dale