SVG/ Multimedia

SVG:

Multimedia

In SVG tiny 1.2 werden einige neue Elemente, Attribute und Eigenschaften definiert, welche der Präsentation von Multimediadateien dienen. Die Elemente sind den Medienelementen von SMIL ähnlich und haben einen eigenen Zeitablauf und bieten eine ähnliche Kontrolle des Zeitablaufes wie Animationselemente. Weil externe zeitabhängige Dateien referenziert werden, gibt es ferner eine Möglichkeit der Synchronisation verschiedener Multimediainhalte.

Für Dateien, die nur hörbare Information enthalten, Audiodateien mit einfachem Zeitablauf, gibt es das Element audio. Für Dateien mit visuellen Inhalten und optional zusätzlich mit hörbaren Inhalten und einem einfachen Zeitablauf, umgangssprachlich Videos, gibt es das Element video. Für beides kann mit der Eigenschaft audio-level Einfluss mit die Lautstärke genommen werden. Für komplette externe SVG-Dateien, optional mit zeitabhängigem Inhalt, gibt es das Element animation.

Das Konzept unterscheidet sich damit deutlich von dem von SMIL, wo gleichnamige Elemente sich zwar in der semantischen Bedeutung unterscheiden, aber nicht in den jeweils damit präsentierbaren Medien. Als für mobile Geräte optimierte Version von SVG ist nachvollziehbar, dass der Funktionsumfang eines Elementes stärker eingegrenzt ist.

In SVG tiny 1.2 sind für audio oder video keine Formate angegeben, welche vom Darstellungsprogramm interpretiert werden müssen. Auch für gleichnamige Elemente im Arbeitsentwurf für 'HTML5' ist das bislang (Mitte 2012) nicht gelungen. Dies liegt daran, dass viele Formate Lizenzbedingungen unterliegen, also weder von allen interessierten Autoren frei genutzt werden können, noch in Darstellungsprogrammen frei implementiert werden können. Bei Formaten wie OGG (Containerformat, oft mit Audio-Codec Vorbis, FLAC oder Speex und Video-Codec Theora), die tatsächlich als patent- oder lizenzfrei gelten, verkompliziert sich die Lage dennoch, weil von einigen Firmen befürchtet wird, dass im amerikanischen Raum im Nachhinein bei hinreichend erfolgreichen freien Formaten sogenannte U-Boot-Patente auftauchen können, die also entweder nachträglich von Unbeteiligten eingereicht und unberechtigt anerkannt werden, oder wo alte Patente so uminterpretiert werden, dass es ausreicht, um damit gegen implementierende Firmen zu prozessieren, um damit Geld zu verdienen. Ob die Befürchtungen berechtigt sind, ist strittig und kann vom konkreten Format abhängen.

Auch wenn ein Autor mit dem Erwerb eines Produktes wie etwa einer digitalen Kamera die Lizenz erworben hat, damit Dokumente zu erzeugen und auch sichtbar zu machen, sind die Lizenzen oft eingeschränkt auf den Gebrauch mit dem konkreten Produkt oder auf den persönlichen Gebrauch, so dass daraus nicht automatisch eine lizenzfreie Veröffentlichung und Ansicht mit anderen Programmen im internet gefolgert werden kann. Nutzer von freien Betriebssystemen werden nicht immer die Möglichkeit oder den Willen haben, für lizenzierte Programme zu bezahlen, so dass die Darstellung lizenzbehafteter Medien letztlich nicht allgemein sicherzustellen ist. Insofern ist die Formatwahl für den Autor nicht trivial und aufgrund der Probleme umso wichtiger.

Wenn der Autor Dokumente in verschiedenen Formaten angeben kann, so kann dies in SVG mit bedingter Verarbeitung realisiert werden. Mittels requiredFormats können verschiedene Versionen angeboten werden, um die Wahrscheinlichkeit einer Anzeige zu erhöhen.

Zeitachsen für Medien und für das Dokument

Medieninhalte und das SVG-Dokument definieren einen eigenen Zeitablauf oder eine eigene Zeitachse. Referenzierte Medieninhalte und die Medienelemente im SVG-Dokumente sind daher zeitlich aufeinander abzustimmen.

Weil das Laden der Medien Zeit benötigt, kann mit dem Attribut timelineBegin vom Autor festgelegt werden, ob der Zeitablauf des SVG-Dokumentes bereits beginnt, wenn die Startmarkierung des svg-Hauptelementes geladen ist ('onStart') oder erst, wenn das gesamte Dokument geladen ist ('onload').

Daneben kann auch mit dem Attribut externalResourcesRequired der Zeitablauf eines Fragmentes verzögert werden, bis externe Ressourcen verfügbar sind. Um Warte- und Ladezeiten zu optimieren oder zu verkürzen, steht ferner das Element prefetch zur Verfügung.

Die Bedeutung von Verfügbarkeit hängt davon ab, auf welchem Wege oder mit welchem Protokoll das externe Medium geladen wird. Im Falle des Protokolles HTTP jedenfalls ist vom Laden des kompletten Dokumentes auszugehen. Bei sich progressiv aufbauenden Formaten mag es auch reichen, sobald die Information für eine erste Darstellung verfügbar ist. Bei einem Datenstromprotokoll (englisches Stichwort: streaming, Protokolle wie RTSP/RTP) mag es auch ausreichen, wenn so viel von einem externen Medium geladen ist, dass aufgrund der bisherigen Datenrate von einer störungsfreien Darstellung des gesamten Mediums ausgegangen werden kann.

Beim Abspielen der Medien kann es zudem zu Verzögerungen und Störungen kommen. Mit von SMIL übernommenen Attributen können daher zusammengehörige Inhalte miteinander und zum SVG-Dokument synchronisiert werden. Zudem kann die Genauigkeit der Synchronisation vom Autor festgelegt werden.

Präsentation von Audio und Video beeinflussen

Autoren können im Bedarfsfalle die Präsentation von Audio- und Video-Kanälen getrennt beeinflussen.

Wird nichts besonderes angegeben, wird beides präsentiert. Wird die Lautstärke mit dem Attribut audio-level auf 0 gesetzt, so ist effektiv der Audiokanal abgestellt. Wird die Sichtbarkeit visibility auf hidden gesetzt, ist effektiv der Videokanal abgestellt, während der Audiokanal weiter wiedergegeben wird. Die komplette Präsentation oder Darstellung kann mit der Eigenschaft display abgestellt werden. Die Darstellung kann ferner auch über die Attribute zur Steuerung des Zeitablaufes unterbunden werden.

Element audio


SVG
1.2 tiny	-	9.5 (Zeitablauf teilweise, Audio nur mit speziellen Testversionen und Formaten); 10.60 (Containerformat OGG mit Vorbis oder WAVE mit PCM)	-	-	-	?	?	?

Hörbare Medien können mit dem Element audio eingebettet werden. Es gibt keine visuelle Präsentation des Elementes. Die mit dem Attribut href von XLink referenzierte Datei muss ein Audioformat sein, darf also nur hörbaren Inhalt enthalten.

Neben den im folgenden angegebenen Attributen sind auch die zur Synchronisation anwendbar, die in einem der folgenden Abschnitte erläutert werden. Der Zeitablauf wird mit den Attributen zur Kontrolle des Zeitablaufes beeinflusst, welche bereits im Kapitel über Animation erläutert wurden. Dies sind: begin, end, dur, min, max, restart, repeatCount, repeatDur und fill. Allerdings hat fill keinen hörbaren Effekt.

Sofern das referenzierte Dokument zwar relevante Information, aber selbst keine Textalternative enthält, ist es dringend aus Gründen der Zugänglichkeit geboten, die Textalternative innerhalb des SVG-Dokumentes anzugeben. Dazu eignen sich zum einen die Elemente title, desc und metadata, zum anderen auch die Attribute title und role von XLink.

Attribute von XLink, insbesondere href

Mit dem Attribut href von XLink wird auf die Audiodatei verwiesen, welche eingebunden werden soll. Die Voreinstellung ist ein leeres Attribut. Dieses und ungültige Angaben führen lediglich dazu, dass keine hörbare Präsentation stattfindet.

Das Attribut ist animierbar.

Bei einer Animation des Attributes oder sonst einer Änderung und wenn der Zeitablauf kontrolliert werden kann, wird der Zeitablauf nur erneut gestartet, wenn das Attribut syncBehavior auf 'independent' steht. Wenn der Zeitablauf nicht kontrollierbar ist, so ist der Zeitablauf unbeeinflusst von der Änderung.

Mit href sind auch die anderen Attribute von XLink verfügbar. Da es allerdings keine visuelle Präsentation des Elementes gibt, kann der Zugang zu den Attributen erschwert sein.

Attribut type

Das Attribut type erlaubt es dem Autor, einen Hinweis zu geben, in welchem Dateiformat das referenzierte Dokument vorliegt. Der Wert ist ein internet-Medientyp, zum Beispiel 'audio/oga'. Sollte das Darstellungsprogramm 'audio/oga' nicht interpretieren können, kann es den Hinweis dazu benutzen, die Datei erst gar nicht anzufordern.

Das Attribut ist animierbar, weil auch href von XLink animierbar ist und sich somit während der Animation das Dateiformat ändern kann. Der Autor ist dann allerdings selbst dafür verantwortlich, dass die Relation zwischen den beiden Animationen ein sinnvoller und zutreffender Hinweis ist.

Beispiele audio

Nutzer rein dekorative Hintergrundmusik aufdrängen:

<audio xlink:href="gedudel.oga" type="audio/ogg"
       dur="media" repeatDur="indefinite" />

Die Musik beginnt automatisch beim Beginn des Dokumentes und wiederholt sich bis zum Ende. Die einfache Dauer ergibt sich automatisch aus der zeitlichen Länge des Mediums. Viele Nutzer mögen keine überraschende Musikberieselung ohne eigene Interaktion, daher wird es zumeist sinnvoll sein, einen Knopf zum Starten anzugeben.

Besser also die Audiodatei mit Knopf starten:

<g id="Knopf" role="button">
  <audio xlink:href="musike.oga"
       xlink:title="Martha Müller singt auf ihrem achzigsten Geburtstag, 
                    begleitet von ihrem Enkel Klaus."
       type="audio/ogg"
       dur="media" begin="Knopf.click" />
  <rect width="150" height="50" x="0" y="0" rx="5"
      fill="#ffc" stroke="#009" stroke-width="5"/>
    <text x="75" y="30" text-anchor="middle" font-size="20"
      fill="#00f">Oma singt!</text>
</g>

Bedingte Verarbeitung mit verschiedenen Formaten:

<g stroke="blue" stroke-width="10"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>'Mein Hut, der hat drei Ecken' gesungen von Siggi Haase</title>
  <desc>
  Siggi Haase singt, 
  begleitet auf der Mundharmonika von seiner Freundin Gunilla Schneider.
  Datum der Aufnahme: 2010-04-15
  Lied: Mein Hut, der hat drei Ecken
  Text:
  Mein Hut, der hat drei Ecken,
  drei Ecken hat mein Hut.
  Und hätt er nicht drei Ecken,
  so wär er nicht mein Hut.
  </desc>
  <switch>
    <g requiredFormats="audio/ogg">
      <audio xlink:href="Musik.oga" type="audio/ogg"
        begin="ogg1.click" end="ogg2.click; indefinite"
        repeatDur="indefinite" dur="media" />
      <circle xml:id="ogg1" fill="#ccf"
        r="80" cx="100" cy="100" role="button">
        <title>Startknopf</title>
      </circle>
      <circle xml:id="ogg2" fill="#fcc"
        r="80" cx="300" cy="100" role="button">
        <title>Endknopf</title>
      </circle>
    </g>
    <g requiredFormats="audio/mpeg">
      <audio xlink:href="Musik.mp3" type="audio/mpeg"
        begin="mp31.click" end="mp32.click; indefinite"
        repeatDur="indefinite" dur="media" />
      <circle xml:id="mp31" fill="#ccf"
        r="80" cx="100" cy="100" role="button">
        <title>Startknopf</title>
      </circle>
      <circle xml:id="mp32" fill="#fcc"
        r="80" cx="300" cy="100" role="button">
        <title>Endknopf</title>
      </circle>
    </g>
    <g requiredFormats="audio/x-wav">
      <audio xlink:href="Musik.wav" type="audio/x-wav"
        begin="wav1.click" end="wav2.click; indefinite"
        repeatDur="indefinite" dur="media" />
      <circle xml:id="wav1" fill="#ccf"
        r="80" cx="100" cy="100" role="button">
        <title>Startknopf</title>
      </circle>
      <circle xml:id="wav2" fill="#fcc"
        r="80" cx="300" cy="100" role="button">
        <title>Endknopf</title>
      </circle>
    </g>
    <g><!-- Alternativer Inhalt, wenn gar nichts läuft -->
       <text x="10" y="30" fill="#800">
             Keines der angebotenen Formate ist automatisch abspielbar.
       </text><text x="10" y="100" fill="#888">
             Manuell eines versuchen:
       </text>
      <a xlink:href="Musik.oga" xlink:show="new">
        <text x="10" y="140" fill="#00f">audio/ogg</text>
      </a>
      <a xlink:href="Musik.mp3" xlink:show="new">
        <text x="10" y="160" fill="#00f">audio/mp3</text>
      </a>
      <a xlink:href="Musik.wav" xlink:show="new">
        <text x="10" y="180" fill="#00f">audio/x-wav</text>
      </a>
    </g>
  </switch>
</g>

Bei den folgenden Beispielen sind gleich Audio- beziehungsweise Videodateien in das SVG-Dokument eingebettet. Im Rahmen dieses Buches ist das recht nützlich. Bei realen Anwendungen wird es zumeist effektiver sein, die Multimedia-Dokument getrennt vorzuhalten und diese nur zu referenzieren.

Hörtest

Hörtest
Einfacher Hörtest.
Voraussetzung ist die Präsentation des Formates audio/ogg (OGG+Vorbis).
Die Frequenz fällt von 20kHz auf 20Hz in 10s.
Der Ton begint mit dem Startknopf und endet mit dem Endknopf oder nach 10s.
Die Hintergrundfarbe wird über die aktive Dauer der Audioausgabe als visuelles Kennzeichen animiert.

Prototyp einer Musiktruhe

Prototyp einer Musiktruhe
Eine Auswahl verschiedener Geräusche.
Voraussetzung ist die Präsentation des Formates audio/ogg (OGG+Vorbis).
Es gibt ein Anfangsgeräusch und sieben weitere Alternativen, auswählbar mit den gelben Knöpfen rechts.
Die großen Knöpfe oben dienen zum An- und Abschalten.
Die Konstruktion darunter dient dazu, die Lautstärke zu ändern.
Starten mit den runden Knöpfen, stoppen mit den rechteckigen Indikatoren.
Die Titel der Knöpfe geben jeweils Auskunft über die Funktion.
Die Hintergrundfarbe wird über die aktive Dauer der Audioausgabe als visuelles Kennzeichen animiert.

Einfaches Musikinstrument

Einfaches Musikinstrument
Ein rudimentäres Musikinstrument, welches mit Grundtönen im Format audio/ogg (OGG+Vorbis) arbeitet.
Tasten für zwei Oktaven der C-Dur-Tonleiter sind verfügbar.
Zur Aktivierung jeweils mit der Maus drücken, loslassen beendet den Ton.
Tonlänge ist also jeweils Länge des Tastendrucks.
Der Ton ist jeweils als Titel angegeben.

Ähnlich kann die Lautstärke mit dem kleinen mittleren Kreis eingestellt werden.
Lautstärke ändert sich von leise nach laut in 5s, symbolisiert mit einer Farbänderung von schwarz nach weiß.
Loslassen fixiert die Lautstärke auf dem aktuellen Wert.
Ein permanenter Ton etwa zur Lautstärkeeinstellung kann erreicht werden, wenn eine Taste gedrückt wird, die Maus aber erst außerhalb der Taste wieder losgelassen wird.

Schwebungen

Schwebungen
Neun verschiedene Töne können miteinander kombiniert werden, um Schwebungen hervorzurufen.
Voraussetzung ist die Präsentation des Formates audio/ogg (OGG+Vorbis).
Der Ton beginnt jeweils mit dem Startknopf und endet mit dem Endknopf.
Die Hintergrundfarbe wird über die aktive Dauer der Audioausgabe als visuelles Kennzeichen animiert.

Bekannte Mängel: eventuelle zusätzliche Knackgeräusche beim Beginn oder Ende einer Audiodatei, die allerdings nicht an der Audiodatei selbst liegen.

Element video


SVG
1.2 tiny	-	9.5 (Zeitablauf teilweise, Video nur mit speziellen Testversionen); 10.60 (Containerformat OGG mit Theora und Vorbis oder Containerformat WebM mit VP8 und Vorbis)	-	-	-	?	?	?

Videos können mit dem Element video eingebettet werden.

Die mit dem Attribut href von XLink referenzierte Datei muss ein Videoformat sein und kann auch einen Audiokanal enthalten.

Neben den im folgenden angegebenen Attributen sind auch die zur Synchronisation anwendbar, die in einem der folgenden Abschnitte erläutert werden. Der Zeitablauf wird mit den Attributen zur Kontrolle des Zeitablaufes beeinflusst, welche bereits im Kapitel über Animation erläutert wurden. Dies sind: begin, end, dur, min, max, restart, repeatCount, repeatDur und fill.

video definiert einen eigenen Darstellungsbereich, der Wert des Attributes viewBox wird aus den Angaben der Videodatei impliziert. Entsprechend sind auch die Eigenschaften viewport-fill und viewport-fill-opacity anwendbar.

Sofern das referenzierte Dokument zwar relevante Information, aber selbst keine Textalternative enthält, ist es dringend aus Gründen der Zugänglichkeit geboten, die Textalternative innerhalb des SVG-Dokumentes anzugeben. Dazu eignen sich zum einen die Elemente title, desc und metadata, zum anderen auch die Attribute title und role von XLink.

Attribute von XLink, insbesondere href

Mit dem Attribut href von XLink wird auf die Videodatei verwiesen, welche eingebunden werden soll. Die Voreinstellung ist ein leeres Attribut. Dieses und ungültige Angaben führen lediglich dazu, dass keine Präsentation stattfindet.

Das Attribut ist animierbar.

Bei einer Animation des Attributes oder sonst einer Änderung und wenn der Zeitablauf kontrolliert werden kann, wird der Zeitablauf nur erneut gestartet, wenn das Attribut syncBehavior auf 'independent' steht. Wenn der Zeitablauf nicht kontrollierbar ist, so ist der Zeitablauf unbeeinflusst von der Änderung.

Mit href sind auch die anderen Attribute von XLink verfügbar.

Attribut type

Das Attribut type erlaubt es dem Autor, einen Hinweis zu geben, in welchem Dateiformat das referenzierte Dokument vorliegt. Der Wert ist ein internet-Medientyp, zum Beispiel 'video/ogv'. Sollte das Darstellungsprogramm 'video/ogv' nicht interpretieren können, kann es den Hinweis dazu benutzen, die Datei erst gar nicht anzufordern.

Das Attribut ist animierbar, weil auch href von XLink animierbar ist und sich somit während der Animation das Dateiformat ändern kann. Der Autor ist dann allerdings selbst dafür verantwortlich, dass die Relation zwischen den beiden Animationen ein sinnvoller und zutreffender Hinweis ist.

Attribute x und y

Der Wert ist jeweils eine Koordinate, also wo das Video innerhalb des jeweiligen Koordinatensystems dargestellt werden soll, x und y geben dann die linke obere Ecke an. Sofern nicht angegeben, wird jeweils 0 angenommen.

Sofern der Wert von transformBehavior auf einen anderen Wert als 'geometric' gesetzt ist, ist der angegebene Punkt allerdings nicht die linke obere Ecke, sondern der Befestigungspunkt für Transformationen. Der Befestigungspunkt ergibt sich aus der Transformation des angegebenen Punktes auf den nächstgelegenen Gerätepixel. Dies stellt dann den Mittelpunkt des Videos dar.

Die Attribute sind animierbar.

Attribute width und height

width und height geben die eigentliche Breite und Höhe des Darstellungsbereiches für das Video an. Der Wert ist jeweils eine Länge größer oder gleich 0. Das Video wird dann entsprechend skaliert. Bei 0 wird das Video nicht angezeigt. Negative Werte werden nicht unterstützt. Dies bedeutet, dass das Attribut mit dem unzulässigen Wert ignoriert wird.

width und height sind animierbar. Sofern nicht angegeben, wird als Wert 0 angenommen.

Attribut preserveAspectRatio

Wenn das Seitenverhältnis des Videos nicht zu width und height passt, kann mit preserveAspectRatio angegeben werden, wie es in den Anzeigebereich einzupassen ist.

Die möglichen Werte sind bereits entsprechend für das Element svg beschrieben.

Das Attribut ist animierbar.

Attribut transformBehavior

Der Autor kann entscheiden, wie Transformationen auf ein Video wirken. Insbesondere bei mobilen Geräten mit geringem Leistungsumfang kann die ansonsten übliche Transformation wie für sonstige graphische Elemente zu rechenaufwendig sein. Für Inhalte, welche insbesondere für solche Geräte gedacht ist, kann es sinnvoll sein, vereinfachende Transformationsregeln anzuwenden. Dies geschieht mit dem Attribut transformBehavior.

Ist das Attribut angegeben und es ein anderer Wert als 'geometric' notiert, so geben x und y den Befestigungspunkt des Videos an, im Wesentlichen die Mitte. Bei Transformationen wird nur dieser transformiert. Form und Größe des Videos bleiben unverändert. Die Größe ist die in Gerätepixeln.

Mögliche Werte sind:

geometric: Das Video soll wie ein Rechteck in lokalen Koordinatensystem behandelt werden. Das ist die Voreinstellung.
pinned: Das Video wird nicht gedreht
pinned90: Das Video wird um 90 Grad um den Befestigungspunkt gedreht
pinned180: Das Video wird um 180 Grad um den Befestigungspunkt gedreht
pinned270: Das Video wird um 270 Grad um den Befestigungspunkt gedreht

Das Attribut ist nicht animierbar.

Attribut overlay

Neben einer Einschränkung hinsichtlich Transformationen kann auch eine Einschränkung hinsichtlich der Komposition mit anderen Elementen hilfreich sein. Geräte mit stärker begrenzter Leistungen können eventuell das Video nur ganz oben in der Zeichenreihenfolge darstellen. Ob das der Fall ist, kann mit der Eigenschaftszeichenkette 'http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo' und bedingter Verarbeitung berücksichtigt werden.

Für Darstellungsprogramme, welche keine solche Einschränkung haben, kann der Autor das Verhalten explizit mit dem Attribut overlay angeben, um die Effizienz zu erhöhen.

Möglich sind die Werte 'top' oder 'none'.

Bei 'top' wird das Video in der Zeichenreihenfolge immer ganz oben platziert. Bei 'none' folgt die Darstellung der für andere Elemente gemäß dem Malermodell. Letzteres ist die Voreinstellung. Wenn es mehrere sich überlappende Videos mit dem Wert 'top' gibt, so folgt deren Darstellungsreihenfolge der Reihenfolge im Quelltext.

Das Attribut ist nicht animierbar.

Attribut initialVisibility

Es gibt auch die Möglichkeit zu entscheiden, ob das Medienobjekt vor dem Beginn seiner aktien Dauer dargestellt werden soll. Ist dies der Fall, soll das erste Bild (der erste Rahmen, englisch: frame) dargestellt werden, bis die aktive Dauer beginnt.

initialVisibility hat die möglichen Werte 'whenStarted' und 'always'.

'whenStarted' ist die Voreinstellung. Das Video ist dann vor der aktiven Dauer nicht sichtbar.

'always' bedeutet, dass das Video auch vor der aktiven Dauer sichtbar ist.

Das Attribut ist nicht animierbar.

Beispiele video

Video sofort zu Dokumentbeginn starten:

<video xlink:href="Kaminfeuer.ogv" type="video/ogg"
       x="50" y="50" width="320" height="240"
       dur="media" repeatDur="indefinite">
       <title>Kaminfeuer</title>
       <desc>
        In einem steinernen Kamin entzündet sich aus dem Dunklen heraus 
        ein Feuer aus Buchenholz ohne ersichtlichen Grund und brennt
        über Stunden langsam herunter und erlischt endlich. 
        Der Vorgang wiederholt sich.
       </desc>
</video>

Hilfreicher ist es natürlich, das Video mit dem Knopf zu starten:

<video xlink:href="EinHundGingInDieKueche.ogv"
       xlink:title="Martha Müller singt 
        auf ihrem achzigsten Geburtstag am 2008-03-21
        'Ein Hund ging in die Küche', 
        auf dem Klavier begleitet von ihrem Enkel Klaus."
       type="video/ogg"
       initialVisibility="always"
       x="50" y="50" width="320" height="240"
       dur="media" begin="Knopf.click" />
<g id="Knopf" role="button">
  <title>Knopf zum Starten des Videos</title>
  <rect width="320" height="50" x="50" y="300" rx="5"
      fill="#ffc" stroke="#009" stroke-width="5"/>
  <text x="210" y="330" text-anchor="middle" font-size="20"
      fill="#00f">Oma singt!</text>
</g>

Die bedingte Verarbeitung funktioniert analog zu dem Beispiel zum Element audio.

Plasmakugel

Plasmakugel
Ein Video mit einer Plasmakugel kann mit den angegebenen Knöpfen gestartet und gestoppt werden.
Davor und danach sind das erste, beziehungsweise das letzte (aktive) Bild des Videos sichtbar.

Voraussetzung ist die Präsentation des Formates video/ogg (OGG+Theora+Vorbis).

Bei der dargestellten Plasmakugel handelt es sich um eine Glaskugel, die mit einem speziellen Gasgemisch gefüllt ist. Durch eine kleinere Kugel in der Mitte wird durch eine hochfrequente Wechselspannung ein Plasma erzeugt, in welchem sich aufgrund der Kugelsymmetrie zufällig anordnende Entladungsschläuche zur Glaskugel entstehen, welche leuchten, nahe der kleinen Kugel und der Glaskugel eher rot-orange, in der Mitte eher bläulich-weiß. Die Entladungsschläuche bestehen gewöhnlich mehrere Sekunden bis Minuten lang und ändern ihre Form und Ausrichtung zufällig, jedoch untereinander bedingt durch die in den Schläuchen befindlichen Ladungen nicht komplett unkorreliert. Anzahl, Lebensdauer und Verhalten der Entladungsschläuche hängen von den Eigenschaften der angelegten Wechselspannung und vom Gasgemisch ab.
Das Video selbst dauert nur etwa eine Sekunde und wiederholt sich lediglich.

Element animation


SVG
1.2 tiny	-	9.5 (teilweise)	-	-	-	?	?	?

Während in SVG 1.1 andere SVG-Dokumente mit dem Element image eingettet werden können, bei animierten SVGs aber keine definierte Synchronisation des Zeitablaufes gegeben ist, ist in SVG tiny das Element image für Pixelgraphik reserviert. In SVG tiny 1.2 dient das Element animation dazu, SVG-Dokumente, auch animierte einzubetten, wobei der Zeitablauf und die Synchronisation genau wie für video und audio definiert sind.

Die mit dem Attribut href von XLink referenzierte Datei muss ein SVG-Dokument sein.

Neben den im folgenden angegebenen Attributen sind auch die zur Synchronisation anwendbar, die in einem der folgenden Abschnitte erläutert werden. Der Zeitablauf wird mit den Attributen zur Kontrolle des Zeitablaufes beeinflusst, welche bereits im Kapitel über Animation erläutert wurden. Dies sind: begin, end, dur, min, max, restart, repeatCount, repeatDur und fill.

animation definiert einen eigenen Darstellungsbereich, der Wert des Attributes viewBox wird aus den Angaben der des referenzierten SVG-Dokumentes impliziert. Entsprechend sind auch die Eigenschaften viewport-fill und viewport-fill-opacity anwendbar.

Attribute von XLink, insbesondere href

Mit dem Attribut href von XLink wird auf die SVG-Datei verwiesen, welche eingebunden werden soll. Die Voreinstellung ist ein leeres Attribut. Dieses und ungültige Angaben führen lediglich dazu, dass keine Präsentation stattfindet.

Das Attribut ist animierbar.

Bei einer Animation des Attributes oder sonst einer Änderung und wenn der Zeitablauf kontrolliert werden kann, wird der Zeitablauf nur erneut gestartet, wenn das Attribut syncBehavior auf 'independent' steht. Wenn der Zeitablauf nicht kontrollierbar ist, so ist der Zeitablauf unbeeinflusst von der Änderung.

Mit href sind auch die anderen Attribute von XLink verfügbar.

Attribute x und y

Der Wert ist jeweils eine Koordinate, also wo das SVG innerhalb des jeweiligen Koordinatensystems dargestellt werden soll, x und y geben dann die linke obere Ecke an. Sofern nicht angegeben, wird jeweils 0 angenommen.

Die Attribute sind animierbar.

Attribute width und height

width und height geben die eigentliche Breite und Höhe des Darstellungsbereiches für das SVG an. Der Wert ist jeweils eine Länge größer oder gleich 0. Das SVG wird dann entsprechend skaliert. Bei 0 wird das SVG nicht angezeigt. Negative Werte werden nicht unterstützt. Dies bedeutet, dass das Attribut mit dem unzulässigen Wert ignoriert wird.

width und height sind animierbar. Sofern nicht angegeben, wird als Wert 0 angenommen.

Attribut preserveAspectRatio

Wenn das Seitenverhältnis des SVGs nicht zu width und height passt, kann mit preserveAspectRatio angegeben werden, wie es in den Anzeigebereich einzupassen ist.

Die möglichen Werte sind bereits entsprechend für das Element svg beschrieben.

Das Attribut ist animierbar.

Attribut initialVisibility

Es gibt auch die Möglichkeit zu entscheiden, ob das SVG vor dem Beginn seiner aktien Dauer dargestellt werden soll. Ist dies der Fall, soll der Zeitpunkt 0 im Zeitablauf des referenzierten Dokumentes dargestellt werden, bis die aktive Dauer beginnt.

initialVisibility hat die möglichen Werte 'whenStarted' und 'always'.

'whenStarted' ist die Voreinstellung. Das SVG ist dann vor der aktiven Dauer nicht sichtbar.

'always' bedeutet, dass das SVG auch vor der aktiven Dauer sichtbar ist.

Das Attribut ist nicht animierbar.

Beispiele animation

SVG sofort zu Dokumentbeginn starten:

<animation xlink:href="Beispiel.svg"
       x="50" y="50" width="600" height="400"
       dur="indefinite" />

Es kann auch sinnvoll sein, das SVG mit dem Knopf zu starten:

<animation xlink:href="Beispiel.svg"
       xlink:title="Vereinfachtes Modell des Sonnensystems"
       initialVisibility="always"
       x="50" y="50" width="600" height="400"
       dur="indefinite" begin="Knopf.click" />
<g id="Knopf" role="button">
  <title>Knopf zum Starten des Videos</title>
  <rect width="600" height="50" x="50" y="460" rx="5"
      fill="#ffc" stroke="#009" stroke-width="5"/>
  <text x="350" y="490" text-anchor="middle" font-size="20"
      fill="#00f">Sonnensystem starten</text>
</g>

Pulsierender Kreis

Pulsierender Kreis
Einfache Animationen eines pulsierenden Kreises werden referenziert. Start der Animation mit dem blauen Knopf, stoppen mit dem roten. Der blaue Kreis verdeckt immer einen roten, sonst stimmt die Synchronisation nicht.

Unabhängiger Zeitablauf

Unabhängiger Zeitablauf
Zwei (identische) SVG-Dokumente werden eingebettet. Start der Anzeige des jeweiligen Dokumentes mit dem blauen Knopf, stoppen und entfernen mit dem roten. Beide haben einen unabhängigen Zeitablauf. Nach dem jeweiligen Start kann in dem jeweiligen Dokument die Bewegung eines jeden Rechtecks durch Anklickern gestartet werden. Wiederholtes Anklickern wiederholt den bisherigen Zeitablauf des eingebetteten Dokumentes, nicht des einbettenden oder des anderen eingebetteten Dokumentes.

Auswahlliste

Auswahlliste
Aus einer Vorschauliste rechts kann ausgewählt werden, welches animierte SVG abgespielt werden soll. Mit dem grünen Knopf kann gestartet werden, mit dem roten gestoppt (Siehe auch Titel der Knöpfe). Die Aktivierung eines anderen Dokumentes beendet die Darstellung des aktuellen, welches in die Vorschauliste zurückkehrt.

Analog kann natürlich auch eine Vorschauliste mit dem Element video angelegt werden, um mit Vorschau zwischen verschiedenen Videos auszuwählen. Dabei bietet sich wie bei den meisten anderen Beispiele auch, für realen Anwendungen die Dateien nicht einzubetten, sondern nur zu referenzieren.

Eigenschaft audio-level


SVG
1.2 tiny	-	spezielle Sonderversionen ab 9.62video und allgemein ab 10.60	-	-	-	?	?	?

Die Lautstärke von Audiokanälen kann mit der Eigenschaft audio-level beeinflusst werden, mit der Einschränkung, dass ein Kindelement nicht lauter eingestellt werden kann als ein Elternelement.

Die Eigenschaft kann angewendet werden auf die Medienelemente audio, video und animation, ferner auf use und Gruppierungselemente wie g.

Mögliche Werte sind 'inherit' oder eine Zahl. Voreinstellung ist 1, das entspricht der Lautstärke des Elternelementes. 0 entspricht Ton aus. Die Eigenschaft wird nicht vererbt und ist animierbar.

Werte außerhalb des Bereiches 0 bis 1 werden auf den nächstgelegenen Wert aus diesem Intervall, also 0 für kleinere Werte und 1 für größere gerundet.

Die Lautstärke des Elementes ist das Produkt der Lautstärke des Elternelementes mit dem gerundeten Wert von audio-level.

Die Ausgabesignalstärke wird logarithmisch berechnet. Ist v der aus dem Elternelement und audio-level bestimmte Lautstärkewert, so ist die Ausgabelautstärke:

0 oder 'aus', falls v=0 ist, sonst:

dB-Änderung der Signalstärke = 20 * log₁₀(v)

Beispiel zur Einstellung der Lautstärke per Animation:

<video id="Video" xlink:href="Dampflok.ogv"
       xlink:title="Dampflokomotive kommt aus Tunnel"
       type="video/ogg"
       initialVisibility="always"
       x="50" y="50" width="320" height="240"
       dur="media" begin="Knopf.click"
       audio-level="1">
  <animate attributeName="audio-level"
       from="1"
       to="0"
       dur="20s"
       begin="c1.click"
       end="c2.click; indefinite"
       fill="freeze" />
</video>
<g id="Knopf" role="button">
  <title>Knopf zum Starten des Videos</title>
  <rect width="320" height="50" x="50" y="300" rx="5"
      fill="#ffc" stroke="#009" stroke-width="5"/>
  <text x="210" y="330" text-anchor="middle" font-size="20"
      fill="#00f">fahren lassen!</text>
</g>
<circle id="c1" fill="#ccf" stroke="blue" stroke-width="10"
r="25" cx="75" cy="400" role="button">
<title>Knopf zum Leiser regeln</title>
</circle>
<circle id="c2" fill="#ccf" stroke="blue" stroke-width="10"
r="25" cx="140" cy="400" role="button">
<title>Knopf zum Leiser regeln stoppen</title>
</circle>
<rect x="200" y="375" width="120" height="50" fill="#f0f">
  <animate attributeName="width"
       from="120"
       to="0"
       dur="20s"
       begin="c1.click"
       end="c2.click; indefinite"
       fill="freeze" />
</rect>

Amplitudenmodulation

Amplitudenmodulation
Amplitudenmodulation durch Animation von audio-level.
Voraussetzung ist die Präsentation des Formates audio/ogg (OGG+Vorbis).
Der Ton begint jeweils mit dem Startknopf und endet mit dem Endknopf.
Die Hintergrundfarbe wird über die aktive Dauer der Audioausgabe als visuelles Kennzeichen animiert.

Bekannte Mängel: eventuelle zusätzliche Knackgeräusche beim Beginn oder Ende einer Audiodatei, die allerdings nicht an der Audiodatei selbst liegen.

einfaches Musikinstrument

Ein weiteres Beispiel ist das bereits oben behandelte einfache Musikinstrument.
Die Lautstärke mit dem kleinen mittleren Kreis eingestellt werden.
Lautstärke ändert sich von leise nach laut in 5s, symbolisiert mit einer Farbänderung von schwarz nach weiß.
Loslassen fixiert die Lautstärke auf dem aktuellen Wert.
Ein permanenter Ton etwa zur Lautstärkeeinstellung kann erreicht werden, wenn eine Taste gedrückt wird, die Maus aber erst außerhalb der Taste wieder losgelassen wird.

Attribute zur Laufzeitsynchronisation


SVG
1.2 tiny	-	9.5 (teilweise)	-	-	-	?	?	?

SVG tiny 1.2 übernimmt von SMIL fünf Attribute zur Laufzeitsynchronisation von Medienelementen.

syncBehavior, syncTolerance und syncMaster können bei den Elementen audio, video und animation angegeben werden. syncBehaviorDefault und syncToleranceDefault können beim Hauptelement svg angegeben werden.

Attribut syncBehavior

Das Attribut legt das Synchronisationsverhalten eines Medienelementes fest.

Mögliche Werte sind:

canSlip: Erlaubt dem Element einen eigenen Zeitblauf gegenüber dem Hauptelement svg (oder dem syncMaster). Ein angegebenes Attribut syncTolerance wird ignoriert.
locked: Bindet das Zeitverhalten fest an das Hauptelement svg (oder dem syncMaster).

Toleranzen können mit dem Attribut syncTolerance angegeben werden.

independent: Unabhängiger Zeitablauf, eigenständige Zeitlinie. Suchabläufe bei den Eltern werden ignoriert.
default: Die Laufzeitsynchronisation wird bestimmt durch das Attribut syncBehaviorDefault.

Das ist die Voreinstellung

Das Attribut ist nicht animierbar.

Attribut syncTolerance

Das Attribut gibt die Toleranz der Laufzeitsynchronisation an. Der Wert ist entweder ein Zeitwert (wie im Kapitel Animation definiert) oder der Wert 'default'. Ein einfacher Wert wäre etwa '1s', um eine Verschiebung der Zeitachse relativ zur Hauptachse um eine Sekunde zu erlauben. Bei der Angabe von 'default' wird der Wert von syncToleranceDefault verwendet. Das ist die Voreinstellung.

Das Attribut ist nicht animierbar.

syncTolerance hat nur einen Effekt, wenn für syncBehavior der Wert 'locked' angegeben ist. Solange die Abweichung der Zeiten kleiner als der angegebene Wert ist, wird keine Synchronisation vorgenommen. Ist die Abweichung größer, wird das Zeitverhalten an die Hauptzeitachse angepasst.

Attribut syncMaster

Mit dem Attribut wird angegeben, welches Element die Hauptzeitachse oder die maßgebliche Zeitinformation für die Synchronisation liefert. Der Wert ist entweder 'true' oder 'false'. 'false' ist die Voreinstellung.

Im Falle von 'true' liefert das Element selbst die maßgebliche Zeitinformation. Im Falle von 'false' wird es gegebenenfalls bei Abweichungen gegenüber der Hauptzeitachse synchronisiert.

Das Attribut ist nicht animierbar.

Es ist zu empfehlen, nur einen syncMaster zu setzen. Bei mehreren ist der im Quelltext zuerst auftretende und aktive der syncMaster. Ist kein syncMaster angegeben oder alle 'false', so ist das Hauptelement svg der syncMaster.

Attribut syncBehaviorDefault

Das im Hauptelement svg notierte Attribut legt die Voreinstellung für syncBehavior fest.

Mögliche Werte sind:

canSlip: Erlaubt dem Element einen eigenen Zeitblauf gegenüber dem Hauptelement svg (oder dem syncMaster). Ein angegebenes Attribut syncTolerance wird ignoriert.
locked: Bindet das Zeitverhalten fest an das Hauptelement svg (oder dem syncMaster).

Toleranzen können mit dem Attribut syncTolerance angegeben werden.

independent: Unabhängiger Zeitablauf, eigenständige Zeitlinie. Suchabläufe bei den Eltern werden ignoriert.
inherit: Das Verhalten wird vom Elternelement geerbt. Gibt es kein Elternelement, so ist das Verhalten vom Darstellungsprogramm abhängig.

'inherit' ist die Voreinstellung. Das Attribut ist nicht animierbar.

Attribut syncToleranceDefault

Das Attribut gibt die Toleranz der Laufzeitsynchronisation an. Der Wert ist entweder ein Zeitwert (wie im Kapitel Animation definiert) oder der Wert 'inherit'. Ein einfacher Wert wäre etwa '1s', um eine Verschiebung der Zeitachse relativ zur Hauptachse um eine Sekunde zu erlauben. Bei der Angabe von 'inherit' wird der Wert vom Elternelement geerbt. Das ist die Voreinstellung. Gibt es kein Elternelement, so ist das Verhalten vom Darstellungsprogramm abhängig, soll aber nicht größer als 2s sein.

Das Attribut ist nicht animierbar.

Beispiele zur Laufzeitsynchronisation

<video xlink:href="Kaminfeuer.ogv" type="video/ogg"
       x="50" y="50" width="320" height="240"
       dur="media" repeatDur="indefinite"
       audio-level="0.5"
       syncMaster="false" syncTolerance="0.2s">
       <title>Kaminfeuer</title>
       <desc>
        In einem steinernen Kamin entzündet sich aus dem Dunklen heraus 
        ein Feuer aus Buchenholz ohne ersichtlichen Grund und brennt
        über Stunden langsam herunter und erlischt endlich. 
        Der Vorgang wiederholt sich.
       </desc>
</video>
<audio xlink:href="Kuschelrockzusammenstellung.oga" type="audio/ogg"
       dur="media" repeatDur="indefinite"
       syncMaster="true" />

Die Kuschelrockzusammenstellung liefert also die Hauptzeitachse, welcher das Kaminfeuer mit einer Genauigkeit von 0.2s folgen muss. Gegebenenfalls müssen beim Kaminfeuer also Einzelbilder ausgelassen oder etwas länger angezeigt werden, um die Synchronsisation zu realisieren.

Synchronisation zweier SVG-Dokumente

Synchronisation zweier SVG-Dokumente
SVG-Dokumente mit Iterierten Funktionensystemen (IFS) werden eingebettet. Typisch dauert es bis zur Darstellung solcher Graphiken etwas länger.

Das kompliziertere IFS links ist syncMaster. Das einfachere IFS rechts muss also warten, bis auch das links dargestellt wird, bevor die Animation darin beginnen kann. Diese ist eine Animation der Strichfarbe und beginnt mit rot.

Ein Viertelkreis in einer Ecke hat jeweils eine diskrete Farbanimation mit einem Wechsel zwischen blau und grün. Bei einer Synchronisation müssen die Farben in beiden Dateien gleichzeitig umspringen.

SVG: