Well, I found out why people don’t do this more: Adobe Digital Editions doesn’t support it too well.
As an example, here’s my effort at copying the cover design from Dick Francis’s
The Sport of Queens (
Amazon link for reference):
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 SVG Bug in ADE</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 360 540" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect fill="#f0f0f0" height="100%" id="bgnd" width="100%" x="0" y="0"></rect>
<rect fill="#fffff" height="300" id="pic" width="300" x="30" y="30"></rect>
<text id="title" text-anchor="middle" font-family="serif" font-size="48" x="180" y="380">
<tspan font-style="italic">The</tspan>
<tspan>SVG Bug</tspan>
<tspan x="180" dy="50" font-style="italic">in</tspan>
<tspan>ADE</tspan>
</text>
<text id="author" text-anchor="middle" font-family="serif" font-size="30" x="180" y="470">
<tspan font-style="italic">by</tspan>
<tspan>J. C. SALOMON</tspan>
</text>
<text id="texttext" text-anchor="middle" font-family="serif" font-size="12" font-style="italic">
<tspan x="180" y="495">Lorem ipsum dolor sit amet, consectetur</tspan>
<tspan x="180" dy="15">adipisicing elit, sed do eiusmod tempor incididunt</tspan>
</text>
</svg>
</body>
</html>
(EPUB attached.)
The HTML file looks fine in a browser, or in Sigil, and the SVG part displays almost correctly in Inkscape, but ADE mangles everything horribly.
Am I doing something wrong, or is this just something that doesn’t work right?