Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-13-2014, 07:18 PM   #1
jcsalomon
Zealot
jcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheese
 
jcsalomon's Avatar
 
Posts: 100
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 02:35 PM. Reason: Revert
jcsalomon is offline   Reply With Quote
Old 06-13-2014, 09:26 PM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by jcsalomon View Post
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
RbnJrg is offline   Reply With Quote
Old 06-14-2014, 02:52 AM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.
Attached Thumbnails
Click image for larger version

Name:	snap2.png
Views:	318
Size:	254.7 KB
ID:	124111  

Last edited by Jellby; 06-14-2014 at 02:58 AM.
Jellby is online now   Reply With Quote
Old 06-17-2014, 01:51 PM   #4
jcsalomon
Zealot
jcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheese
 
jcsalomon's Avatar
 
Posts: 100
Karma: 1204
Join Date: Jun 2012
Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD
Unhappy Well, I found the problem…

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?
Attached Files
File Type: epub ade-svg-bug.epub (2.2 KB, 172 views)
jcsalomon is offline   Reply With Quote
Old 06-29-2014, 03:44 PM   #5
jcsalomon
Zealot
jcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheesejcsalomon can extract oil from cheese
 
jcsalomon's Avatar
 
Posts: 100
Karma: 1204
Join Date: Jun 2012
Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD
It’s a known ADE bug!

Quote:
Originally Posted by jcsalomon View Post
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.
jcsalomon is offline   Reply With Quote
Reply

Tags
cover, svg

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 07:50 AM.


MobileRead.com is a privately owned, operated and funded community.