06-13-2014, 07:18 PM | #1 |
Zealot
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> Last edited by jcsalomon; 06-18-2014 at 02:35 PM. Reason: Revert |
06-13-2014, 09:26 PM | #2 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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 |
|
06-14-2014, 02:52 AM | #3 |
frumious Bandersnatch
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> Last edited by Jellby; 06-14-2014 at 02:58 AM. |
06-17-2014, 01:51 PM | #4 |
Zealot
Posts: 100
Karma: 1204
Join Date: Jun 2012
Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD
|
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> 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? |
06-29-2014, 03:44 PM | #5 | |
Zealot
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:
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. |
|
Tags |
cover, svg |
Thread Tools | Search this Thread |
|
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 |