Thread: Pure SVG covers
View Single Post
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,563
Karma: 20150435
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:	354
Size:	254.7 KB
ID:	124111  

Last edited by Jellby; 06-14-2014 at 02:58 AM.
Jellby is offline   Reply With Quote