Mischen von SVG- und Rastergrafiken – die optimale Cover-Darstellung

(Auszug aus "E-Books mit ePUB ─ Von Word zum E-Book mit XML" von Dr. Victor Wang)

Als letzten Anwendungsfall betrachten wir nun die Verbindung von SVG- und Rastergrafiken, die vor allem in einem Fall Sinn macht, nämlich beim Cover des E-Books. Hier gilt es, die genannten Vorteile der SVG-Grafik bei der wichtigen und häufig einzig vorhandenen Titelgrafik umzusetzen.

Die Möglichkeit, beide Formate quasi zu mischen, basiert auf der Fähigkeit von SVG-Grafiken, ihrerseits Rastergrafiken einzubinden. Dies geschieht durch das SVG-Element <image>, wie das folgende einfache Beispiel zeigt. Wir verwenden die Laokoon-JPG-Grafik, binden sie nun aber nicht direkt in XHTML, sondern innerhalb des <svg>-Elements ein. Ziel ist es lediglich, den Kopf des leidenden Laokoon in einem Kreis anzuzeigen – so als würde er "spot-artig beleuchtet". Hier der Kürze halber nur das zu ändernde Element <div> aus dem Code-Beispiel "Pixelgrafik in XHTML":

<div class="grafik-mitte">
  <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 200">
    <defs>
      <clipPath id="taschenlampe">              ①
        <circle r="100" cx="220" cy="100"/>
      </clipPath>
    </defs>
    <image xlink:href="img/laokoon.jpg" height="599" width="537" style="clip-path:url(#taschenlampe)"/>   ②
  </svg>
</div> 

Code-Beispiel: Laokoon im Kreis - Referenz einer Rastergrafik innerhalb von SVG (Auszug)

Kurz erläutert wird in ① eine so genannte Maskenform (Element <clipPath>) definiert, die in diesem Beispiel nur aus einem Kreis besteht. Diese Maske wird dann in ② innerhalb des <image>-Elements auf die referenzierte Rastergrafik, also auf die Laokoon-Abbildung, angewandt. Das Ergebnis sieht im Adobe Digital Editions wie in der folgenden Abbildung aus.

Ansicht von Laokoon im Kreis

Abbildung: Ansicht von Laokoon im Kreis

Wenden wir nun diese Möglichkeit auf die Cover-Abbildung an. Zunächst dürfte in den meisten Fällen eine Umschlagsdatei des Prints mit zwei bzw. vier Seiten vorliegen. Für die Cover-Darstellung beschränken wir uns auf die erste Umschlagsseite. Die einfachste Möglichkeit ist es nun, diese Seite auf Format beschnitten – also ohne die für den Druck benötigten Informationen – in ein Grafikformat, in der Regel JPEG, beispielsweise in der Dateibezeichnung cover.jpg abzuspeichern. Nun benötigen wir eine OPS-Datei, die diese Cover-Grafik einbindet. Wir gehen wie im Laokoon-Beispiel vor und betten zunächst den SVG-Container in eine einfache XHTML-Datei ein:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Invent ePUB For Future</title>
    <link rel="stylesheet" href="xhtml-styles.css" type="text/css"/>
  </head>
  <body style="background-color: #000000;">                                      ③
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="coverpage" viewBox="0 0 400 566" width="100%" height="100%">   ①
      <image x="0" y="0" width="400" height="566" xlink:href="img/cover.jpg"/>   ②
    </svg>
  </body>
</html> 

Code-Beispiel: Gerüst der Cover-Datei mit SVG in XHTML

In dem Beispiel hat die Grafik die Dimensionen 400 Pixel Breite und 566 Pixel Höhe. Das SVG-Element enthält in ① das Attribut viewbox, das den rechteckigen Ausschnitt des Bildes angibt, der angezeigt werden soll. Natürlich soll die ganze Cover-Grafik angezeigt werden und daher entsprechen diese Maße denen der Grafik. Aus ähnlichen Gründen werden auch in ② die Dimensionen (Attribute width und height) bzw. der Startpunkt der Grafik (Attribute x und y) festgelegt. In ③ wird schließlich aus ästhetischen Gründen die Hintergrundfarbe Schwarz über ein style-Attribut definiert.

Nachdem das Grundgerüst steht, rüsten wir die SVG-Passage nun noch mit einem Titel aus, der über die Rastergrafik gelegt werden soll. Dazu schreiben wir direkt in zwei Text-Elemente den Titel "Invent ePUB For Future". Das SVG-Element sieht dann wie folgt aus:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="coverpage" viewBox="0 0 400 566" width="100%" height="100%">
  <image x="0" y="0" width="400" height="566" xlink:href="img/cover.jpg"/>
  <text x="30" y="270" font-family="Arial" font-size="60px" color="green">Invent ePUB</text>
  <text x="50" y="340" font-family="Arial" font-size="60px" color="green">For Future</text>
</svg> 

Code-Beispiel: Erweitertes Gerüst der Cover-Datei mit SVG in XHTML (Auszug)

Im Ergebnis erhalten wir eine Cover-Datei, deren Grafik sich immer an die aktuelle Bildschirmgröße anpasst. Der eingebundene Texttitel lässt sich in optimaler Qualität anzeigen. Entsprechend ließen sich weitere SVG-Elemente (Linien, Rechtecke, Kreise, Muster usw.) einbetten.

Anzeige des Cover-Titels mit SVG in XHTML (Adobe Digital Editions)

Anzeige des Cover-Titels mit SVG in XHTML (iBooks)

Abbildungen: Anzeige des Cover-Titels mit SVG in XHTML (Adobe Digital Editions bzw. iBooks)

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema ePub bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © mitp 2011
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "E-Books mit ePUB" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

Verlagsgruppe Hüthig Jehle Rehm GmbH, Im Weiher 10, 69121 Heidelberg, kundenbetreuung(at)hjr-verlag.de