SVG-Vektorgrafiken

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

Die Erweiterung von OPS 2.0 um Scalable Vector Graphics (SVG) bringt viele neue Möglichkeiten, die mit den Rastergrafikformaten nicht befriedigend lösbar sind. Der wesentliche unmittelbare Vorteil betrifft die Unabhängigkeit von Größen und Breiten sowie den deutlich geringeren Umfang der Grafik. Eine SVG-Grafik kann sowohl als eigene Datei als auch innerhalb des OPS-Dokuments im XML-Markup stehen.

Im Folgenden werden nur exemplarische Ansätze vorgestellt. Eine Einführung in den komplexen SVG-Standard ist hier nicht möglich. Als Beispiel nehmen wir den Euklid-Kreis und verändern zunächst die Grafikreferenz dahin gehend, dass sie auf eine externe SVG-Grafik zeigt, die wie folgt aussieht:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 550 550" version="1.1">
  <desc/>
  <g alignment-baseline="baseline">
    <!-- Kreis zeichnen -->
    <circle r="200" cx="250" cy="250" stroke="black" fill="white" stroke-width="5" transform="translate(0,10)"/>
    <!-- Durchmesser zeichnen -->
    <line stroke="black" x1="0" x2="400" y1="200" y2="200" stroke-width="3" transform="translate(50,60)"/>
    <!-- Radius zeichnen -->
    <line stroke="black" x1="200" x2="280" y1="200" y2="15" stroke-width="3" transform="translate(50,60)"/>
    <!-- Punktbeschriftungen zeichnen -->
    <text x="200" y="250" transform="translate(5,-5)" style="font-size:64px; font-style:italic; font-variant:normal; font-weight:bold; font-family:Sans; text-align: start; line-height: 100%; fill: #000000;">C</text>
    <text x="0" y="250" transform="translate(0,20)" style="font-size:64px; font-style:italic; font-variant:normal; font-weight:bold; font-family:Sans; text-align: start; line-height: 100%; fill: #000000;">A</text>
    <text x="370" y="60" transform="translate(-20,5)" style="font-size:64px; font-style:italic; font-variant:normal; font-weight:bold; font-family:Sans; text-align: start; line-height: 100%; fill: #000000;">D</text>
    <text x="460" y="250" transform="translate(0,20)" style="font-size:64px; font-style:italic; font-variant:normal; font-weight:bold; font-family:Sans; text-align: start; line-height: 100%; fill: #000000;">B</text>
  </g>
</svg> 

Code-Beispiel: SVG-Grafik

Wenn wir dann einfach die Grafikreferenz aus dem Code-Beispiel "Positionierte Grafik in XHTML" in <img src="img/kreis-euklid.svg" style=". . ."/> ändern, so wird die obige SVG-Grafik anstelle der JPG-Grafik eingebunden. Die Qualität ist deutlich besser als bei der qualitativ mittelmäßigen Rastergrafik. Eine weitere Vergrößerung wäre ebenso verlustfrei möglich.

Ansicht der referenzierten SVG-Grafik in XHTML (Adobe Digital Editions)

Ansicht der referenzierten SVG-Grafik in XHTML (iBooks)

Abbildungen: Ansicht der referenzierten SVG-Grafik in XHTML (Adobe Digital Editions bzw. iBooks)

Genauso gut lässt sich jedoch die SVG-Grafik direkt in das XHTML-Markup integrieren. In diesem Fall wird die ganze SVG-Grafik einfach in das <div>-Element der XHTML-Datei eingebettet. Wichtig ist lediglich, dass das ursprüngliche Wurzelelement der SVG-Grafik <svg> den Default-Namespace xmlns="http://www.w3.org/2000/svg" sowie das style-Attribut des früheren <img>-Elements erhält.

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 550 550" version="1.1" style="float: right; clear: right; width: 30%;">
    <desc/>
    <g alignment-baseline="baseline">
      <!-- Kreis zeichnen -->
      <circle r="200" cx="250" cy="250" stroke="black" fill="white" stroke-width="5" transform="translate(0,10)"/>
      <!-- Durchmesser zeichnen -->
      <line stroke="black" x1="0" x2="400" y1="200" y2="200" stroke-width="3" transform="translate(50,60)"/>
      <!-- Radius zeichnen -->
      <line stroke="black" x1="200" x2="280" y1="200" y2="15" stroke-width="3" transform="translate(50,60)"/>
      <!-- Punktbeschriftungen zeichnen -->
      . . .
    </g>
  </svg>
</div> 

Code-Beispiel: In XHTML eingebettete SVG-Grafik (Auszug)

Die Anwendungsmöglichkeiten für SVG-Grafiken sind breiter, als man zunächst vermutet: Komplexe Strichgrafiken, Präsentationen sowie Formeln lassen sich bei geeignetem Werkzeug sehr gut aufbereiten, da auch der Text im Vektorformat vorliegt. Das Problem der unterschiedlichen Bildschirmgrößen lässt sich mittels SVG hervorragend umschiffen. Die Grafik verliert nicht durch künstliche Reduktion oder Skalierung an Qualität, sondern ist gleichbleibend gut. Dennoch muss vor zu komplexen SVG-Anwendungen gewarnt werden, da auch hier einzelne Geräte nicht alle Möglichkeiten von SVG darstellen können.

 

<< 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