Pure SVG covers

jcsalomon · 06-13-2014, 08:18 PM

For a simple book I’m working on, there’s no real cover image, just text and geometrical shapes. So I was thinking to build the cover entirely in SVG, something like this:

Code:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Book Title</title></head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" height="540" width="360">
    <!-- stuff goes here, with words in <text> elements -->
  </svg>
</body>
</html>

I haven’t found any examples of this on the forums here—or anywhere else, for that matter. Is my google-fu weak on the subject, or is there a good reason to keep away from this idea that everybody but me already knows?

RbnJrg · 06-13-2014, 10:26 PM

Quote:

Originally Posted by jcsalomon

For a simple book I’m working on, there’s no real cover image, just text and geometrical shapes. So I was thinking to build the cover entirely in SVG, something like this:

Code:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Book Title</title></head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" height="540" width="360">
    <!-- stuff goes here, with words in <text> elements -->
  </svg>
</body>
</html>

I haven’t found any examples of this on the forums here—or anywhere else, for that matter. Is my google-fu weak on the subject, or is there a good reason to keep away from this idea that everybody but me already knows?

Read this post:

https://www.mobileread.com/forums/sho...2&postcount=21

It's about a svg title page but is the same for a svg with "graph" (that is, svg graphs like circles, squares, rectangles, etc., etc.). Just replace the <text> tags with the proper ones (those you want to use).

Regards
Rubén

Jellby · 06-14-2014, 03:52 AM

I include a commented-out SVG cover in most of my books:

Code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
  <rect width="100%" height="100%" fill="rgb(6%,7%,32%)" />
  <rect width="100%" height="200" fill="rgb(0,0,0)" />
  <rect x="100%" y="200" width="200" height="100%" transform="translate(-200,0)" fill="rgb(0,0,0)" />
  <rect x="100%" y="0" width="200" height="200" transform="translate(-200,0)" fill="rgb(6%,7%,32%)" />
  <g fill="rgb(100%,100%,100%)" transform="translate(-230,0)">
    <text x="100%" y="50" text-anchor="end"
      font-size="25" font-weight="bold" font-style="italic">Rudyard Kipling</text>
    <text x="100%" y="130" text-anchor="end" font-size="24" font-weight="bold">
      <tspan x="100%" dy="0">The Jungle Book</tspan>
    </text>
    <text x="100%" y="300" text-anchor="middle" transform="translate(130,0)"
      font-size="20">1894</text>
  </g>
  <image x="50" y="220" height="500" width="300" xlink:href="images/Cover.jpg" />
  <image x="100%" y="0%" height="180" width="180" transform="translate(-190,10)"
    xlink:href="images/Kipling.jpg" />
  <image x="100%" y="100%" height="100" width="100" transform="translate(-150,-120)"
    xlink:href="images/epub.png" />
</svg>

It's not "pure" SVG, because it includes some images, but it's not just an SVG wrapper either.

jcsalomon · 06-17-2014, 02:51 PM

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?

jcsalomon · 06-29-2014, 04:44 PM

Quote:

Originally Posted by jcsalomon

Am I doing something wrong, or is this just something that doesn’t work right?

Well, I turned up this post on the Kobo Bug thread which indicated that ADE simply does not handle relative positioning of <tspan> elements within <text> blocks very well. Which pretty much means I can’t mix fonts or sizes on the same horizontal line¹.

1. Unless I’m willing to go to a lot of work to measure the width of the text, and make sure that the font used is the font I’ve selected, and—and it’s not worth the trouble.

06-13-2014, 08:18 PM	#1
jcsalomon Zealot Posts: 98 Karma: 1204 Join Date: Jun 2012 Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD	Pure SVG covers For a simple book I’m working on, there’s no real cover image, just text and geometrical shapes. So I was thinking to build the cover entirely in SVG, something like this: Code: <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Book Title</title></head> <body> <svg xmlns="http://www.w3.org/2000/svg" height="540" width="360"> <!-- stuff goes here, with words in <text> elements --> </svg> </body> </html> I haven’t found any examples of this on the forums here—or anywhere else, for that matter. Is my google-fu weak on the subject, or is there a good reason to keep away from this idea that everybody but me already knows? Last edited by jcsalomon; 06-18-2014 at 03:35 PM. Reason: Revert

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
New: BeBook Pure	BeBook2000	BeBook	14	08-26-2014 09:24 AM
iBooks Not Displaying SVG Covers in 'Book Mode'	twedigteam	Apple Devices	0	07-10-2013 03:38 PM
svg wrappers for epub covers	Derek R	ePub	9	03-14-2013 10:12 AM
BeBook Pure	Dulin's Books	News	59	09-02-2012 07:28 PM
SVG Covers	paulfiera	Calibre	2	07-30-2011 09:37 PM

Advert

Advert