Lights, Camera, Action

What's visually possible using SVG and video


Abstract


When SVG was young it dreamed of going to the movies, it was a brash youngster showing everyone how well it could draw. Showing off beautiful resolution independent vectors it became the darling of artists and the in-crowd who understood and enjoyed its many advantages.

Slowly SVG started to grow up and smell the roses and the emergence of video technologies all over the internet, then as a teenager SVG started to dream about one day being part of the multimedia revolution that it was growing up into.

The young SVG mastered filters and lighting effects and realized the future lay in video. Then as it matured into its adulthood, SVG became the first child of the W3C family to standardize <video>.

With its new found maturity, SVG decided to show off its video credentials, appearing in many state of the art browsers, showing off what was possible. In a precocious moment, SVG showed off some video inside fonts that had escaped into the outside (HTML) world.

As time went on, SVG found everyone wanting to know more about its video, and what else it could do.

With 1.2 features, SVG took on a new role, as the pied piper dragging along all its followers eager to learn the intricacies of combining video, filters, compositing, transformations, synchronized presentations and much much more.

The grown up SVG decided to showcase itself under the Californian sun to show just what is possible with its new found video skills, not to mention how the best browsers in the world have embraced its outlook on the world.

In the pre-SVG 1.2 world we had alpha compositing, SMIL animation, and filters that provided lighting primitives. These were useful in a simple 2-D world when the web was young.

During the five years between publication of SVG 1.1 and the recommendation for SVG 1.2 was reached, many advanced features were introduced into SVG.

The most interesting one is of course video. SVG video brings with it far more versatile possibilities than a simple rectangle on the screen of a web page. Transforms, compositing, use of opacity brings a wealth of options.

Native support for SMIL in SVG provides the capability for synchronizing video with aribtrary scalable graphics for powerful presentation capability.

SVG 1.2 with video has made itself the perfect fit for many consumers of video, whether it's for set-top boxes, on the web or on mobile devices.

Understanding how to use SVG video features and take advantage of the synchronization, compositing and <prefetch> features will be explored and showcased alongside some advanced, but not yet standardized future features under development.


Table of Contents

Introduction
History of the development of SVG video
Relationship between SVG 1.1 Full, SVG Tiny 1.2 with video and SVG 1.2 Full modules
Controlling resources and object lifetime using <prefetch> and <discard>
Multimedia and object graphic synchronization using SMIL features
Internationalization control using <switch>
Animated fonts using video
SVG textPath and video fonts
Mixing SVG video with SMIL and HTML
Animated SVG fonts used by CSS for HTML content
Slice and Dice - multiply referencing video objects
Animated motion of video tiles
SVG 1.2 Full video opacity
SVG 1.2 advanced compositing blend modes
Compositing blend mode animation
Future directions
Conclusion

The W3C recommendation for SVG Tiny 1.2 introduced the <video> element to SVG. The <video> element is a first-class object integrated into the SVG graphics model. This enables a variety of possibilities to use SVG video as one component of a unified multimedia graphics presentation.

Use of the SMIL capabilities within SVG in conjunction with the video element allows content authors to provide time-dependent or event-dependent content, alleviating the need to pre-render video for applications such as overlays, sub-titles etc.

The scripting and DOM capabilities introduced into SVG Tiny 1.2 facilitate generation of complex user interface components leveraging the rich graphical capabilities of SVG.

SVG properly integrated with HTML can further extend the scope of rich media clients, especially through synergies exposed by the joining of these different but complementary technologies. SVG video can provide enhanced video capability to web browsers beyond that available with the HTML5 video element.

SVG modules under development such as advanced alpha compositing further extend the creative possibilities for authors of SVG content. These enhancements provide the capability for real-time video effects in an SVG capable browser in a manner that until recently was restricted to the domain of non-linear video editing systems.

SVG's use of SMIL was developed prior to the addition of video and as such some further adaptions from SMIL are suggested to increase the scope of author control of video in an SVG video capable web browser.

In January 2003, the SVG Working Group completed the development of SVG 1.1 Tiny by publishing the completed recommendation.

After that publication, development of supersets of SVG 1.1 Tiny were explored with the most desirable area being the incorporation of true multimedia capability in the form of video and audio elements.

Rapid progress was made and implementors of SVG prototyped many proposed extensions of the SVG vocabulary.

In July 2003 Adobe release a technical preview of the Adobe SVG Viewer version 6 which contained an early implementation of the video element.

Follow on work with a variety of SVG Tiny features resulted in the final recommendation of SVG Tiny 1.2 in December 2008, almost six years after work commenced on the advanced functionality. The 1.2 Tiny recommendation distills many proposed and adopted features as well as numerous comments from the public and provides a rich media capable standard ready for deployment everywhere.

HTML5 too has adopted its own video element which is still under development and will provide a complementary capability to that already standardized for SVG.

In September 2001 the first version of SVG - 1.0 reached recommendation status (meaning the specification was complete). Following that milestone, the developers of the specification realized that there was a need for clearly defined subsets of the specification in order to better address the needs of various classes of computing devices of the day. For example, mobile phones and PDAs contain limited computational capacity and thus, would be better served with a restricted subset of SVG more suited to the compute power available.

As a result SVG 1.1 was born. SVG 1.1 is simply a modularization of the features present in SVG 1.0 with the explicit purpose of allowing collections of modules to be defined for the purpose of providing profiles of SVG adapted to various performance levels of computing device.

Two derivative profile specifications, SVG 1.1 Tiny and SVG 1.1 Basic were defined in terms of the modules available in SVG 1.1. SVG 1.1 Tiny attempted to address mobile phones and similiarly powered devices, whilst SVG 1.1 Basic attempted to address moderately powerful architectures such as PDAs etc. (somewhat like the so-called smart-phone devices are today).

Given this fragmentation of flavours of SVG, the working group identified a need for a 'core' common subset of SVG to form the next generation of standard upon which extension modules could be added. This architectural decision provides content authors a known common baseline to generate content for, namely the core feature set whilst providing extended facilities for more advanced capability that more capable user agents could support.

The SVG language itself allows declarative selection of content based on implementation capability, and thus the ability to contextually change presentation based on the user agent capability is present in SVG by virtue of the <switch> element.

This 'core' capability became what is known now as SVG Tiny 1.2. SVG Tiny 1.2 forms the core of a DOM-based multimedia capable vector graphics engine that encompasses powerful capabilities on its own, and enhanced capability when integrated with HTML browsers and optional SVG modules.

SVG 1.2 Tiny introduces two elements aimed at managing media content and resource utilization during playback.

The first is called <prefetch>. <prefetch> is a hint for the user agent to pre-download a piece of referenced content. For example, it is common to see mashups of multiple video clips played in succession. Unfortunately, it also just as common to see the first clip play until the end, then a painful pause (including wait indication) happen prior to the second clip beginning. The lag between media clips in such mashups is due to the fetching characteristics of existing media players where the fetch commences at the time media playback is started.

The <prefetch> element attempts to alleviate this lag by instructing the user agent to download the target of the <prefetch> element before playback is started. This is in effect a pre-buffer indicator. Careful use of prefetch can result in seamless playback of back to back video clips thus giving the user a smooth user experience when viewing media mashups.

One issue in rich media user agents is memory consumption. When loading many video clips a large amount of buffered data may be required.

The second element introduced to manage resource playback is the <discard> element.

The <discard> element removes a node from the DOM tree and releases the resources associated with the element. For example, if a video mashup was being played the <discard> element may be used to remove any reference to media clips already played. The memory consumed by stale clips would thus be reclaimed and the result is better peak memory usage management for an SVG presentation. Such control of memory utilization can become critical in mobile devices with fixed memory limits.

The use of <prefetch> and <discard> can be fully declarative, however given that SVG Tiny 1.2 has a DOM and scripting capability it is feasible to insert <prefetch> and <discard> elments from script, the result being dynamic management of the SVG DOM tree.

For example, if three clips are being played in sequence it may be desirable to insert a prefetch element for the final clip after the first clip has ended and to insert a discard element once the second clip has commenced playback. Example SVG for such a scenario is shown below:

Example 1. Controlling media objects declaratively and through script

      
<?xml version="1.0" encoding="utf-8"?>
<svg xml:id="root" width="100%" height="100%" viewBox="0 0 1600 900"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny">
  <desc>Chained video clips with prefetch/discard setup declaratively and scripted</desc>
  <script type="text/ecmascript">
    var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";

    // Set up prefetch for the 3rd clip so it's buffered before it starts
    function prefetch_clip(evt) {
      var prefetch_elt = document.createElementNS(svgNS, "prefetch");
      // Set the various prefetch attributes before appending
      prefetch_elt.setAttributeNS(xlinkNS, 'href', 'videos/mileycyrus_m480p.mov');
      // Add element to the root of the document
      var svgRoot = document.documentElement;
      svgRoot.appendChild(prefetch_elt);
    }
    // Add a discard element to free up the second clip after it's finished
    // Begin time is set to 0 so that it begins as soon as it's added to the DOM
    function discard_clip(evt) {
      var discard_elt = document.createElementNS(svgNS, "discard");
      // Set the various discard attributes before appending
      discard_elt.setAttributeNS(xlinkNS, 'href', '#fray');
      discard_elt.setAttributeNS(null, 'begin', '0');
      // Add element to the root of the document
      var svgRoot = document.documentElement;
      svgRoot.appendChild(discard_elt);
    }
  </script>
  <!-- Prefetch the 2nd video for seamless playback -->
  <prefetch xlink:href="videos/fray_you_found_me_m480p.mov"/>
  <video xml:id="warren" xlink:href="videos/warren_miller_m480p.mov" type="video/quicktime"
           x="0" y="0" width="1600" height="900">
    <!-- Set up a handler to load the 3rd clip when the 1st ends -->
    <handler type="application/ecmascript" ev:event="end">prefetch_clip(evt);</handler>
  </video>
  <!-- Release the 1st video resources when the 2nd clip begins -->
  <discard xlink:href="#warren" begin="fray.begin"/>
  <video xml:id="fray" xlink:href="videos/fray_you_found_me_m480p.mov" type="video/quicktime"
           begin="warren.end" x="0" y="0" width="1600" height="900"/>
  <video xml:id="miley" xlink:href="videos/mileycyrus_m480p.mov" type="video/quicktime"
           begin="fray.end" x="0" y="0" width="1600" height="900">
    <!-- Set up a discard element to release the 2nd clip when the 3rd begins -->
    <handler type="application/ecmascript" ev:event="begin">discard_clip(evt);</handler>
  </video>
</svg>
      
    

Such dynamic management of media objects can be arbitrarily extended to support continuous video streaming services whilst maintaining full control of in-memory footprint. This capability makes SVG 1.2 Tiny suited to long uptime services such as video on demand, etc.

Possibly one of the most useful features of SVG is the use of SMIL (Synchornized Multimedia Integration Lanuage) facilities within SVG.

By use of the SMIL facilities it is possible to synchronize presentation of graphical elements with media objects. An example of such synchronization is shown below. The SVG shows sub-title (or karaoke) text that is displayed on top of an SVG video. The text itself is timed relative to the 'begin' time of the media playback. Thus it will always be displayed in synchronization with the video whether the video is played immediately on load of the SVG content or in response to some external event such as a mouse click.

Example 2. Synchronized video sub-titles.

      
<?xml version="1.0" encoding="utf-8"?>
<svg xml:id="root" width="100%" height="100%" viewBox="0 0 852 460"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny"
     viewport-fill="black">
  <desc>Example subtitles</desc>
  <video audio-level="0.4" xml:id="miley" xlink:href="videos/mileycyrus_m480p.mov" type="video/quicktime"
         x="0" y="0" width="852" height="460" repeatCount="indefinite"/>
  <g fill="white" stroke="black" stroke-width="1" text-anchor="middle" font-size="36" font-family="FreeSans">
    <g display="none">
      <set id="line1" attributeName="display" to="visible" begin="miley.begin+3s" dur="0.5s"/>
      <set attributeName="display" to="none" begin="line1.end" dur="0"/>
      <text systemLanguage="en" x="426" y="430">One</text>
    </g>
    <g display="none">
      <set id="line2" attributeName="display" to="visible" begin="line1.end" dur="0.6s"/>
      <set attributeName="display" to="none" begin="line2.end" dur="0"/>
      <text systemLanguage="en" x="426" y="430">Two</text>
    </g>
    <g display="none">
      <set id="line3" attributeName="display" to="visible" begin="line2.end" dur="0.6s"/>
      <set attributeName="display" to="none" begin="line3.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">Three</text>
    </g>
    <g display="none">
      <set id="line4" attributeName="display" to="visible" begin="line3.end" dur="0.6s"/>
      <set attributeName="display" to="none" begin="line4.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">Four</text>
    </g>
    <g display="none">
      <set id="line5" attributeName="display" to="visible" begin="miley.begin+14s" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line5.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">I probably shouldn't say this</text>
    </g>
    <g display="none">
      <set id="line6" attributeName="display" to="visible" begin="line5.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line6.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">But at times I get so scared</text>
     </g>
    <g display="none">
      <set id="line7" attributeName="display" to="visible" begin="line6.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line7.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">When I think about the previous</text>
    </g>
    <g display="none">
      <set id="line8" attributeName="display" to="visible" begin="line7.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line8.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">Relationship we shared</text>
    </g>
    <g display="none">
      <set id="line9" attributeName="display" to="visible" begin="line8.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line9.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">It was awesome, but we lost it</text>
    </g>
    <g display="none">
      <set id="line10" attributeName="display" to="visible" begin="line9.end" dur="4s"/>
      <set attributeName="display" to="none" begin="line10.end" dur="0"/>
      <text systemLanguage="en"  x="426" y="430">It's not possible for me, not to care</text>
    </g>
  </g>
</svg>
      
    

The SVG content above would look like the image below:


Since SVG 1.0 it has been possible to control display of graphical elements based on criteria such as the system language of the users computer. This capability is exposed by use of the <switch> element.

In a multimedia presentation environment this can be used for dynamically switching displayed languages for things such as the sub-titles described above. An example of SVG content to perform dynamic language switching is shown below:

Example 3. Language switched sub-titles.

      
<?xml version="1.0" encoding="utf-8"?>
<svg xml:id="root" width="100%" height="100%" viewBox="0 0 852 460"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny"
     viewport-fill="black">
  <desc>Example language switchable subtitles</desc>
  <video audio-level="0.4" xml:id="miley" xlink:href="videos/mileycyrus_m480p.mov" type="video/quicktime"
         x="0" y="0" width="852" height="460" repeatCount="indefinite"/>
  <g fill="red" stroke-width="1" text-anchor="middle" font-size="36" font-family="FreeSans">
    <g display="none">
      <set id="line1" attributeName="display" to="visible" begin="miley.begin+3s" dur="0.5s"/>
      <set attributeName="display" to="none" begin="line1.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">One</text>
        <text systemLanguage="es" x="426" y="430">Uno</text>
        <text systemLanguage="it" x="426" y="430">Uno</text>
        <text systemLanguage="ja" x="426" y="430">1つ</text>
      </switch>
    </g>
    <g display="none">
      <set id="line2" attributeName="display" to="visible" begin="line1.end" dur="0.6s"/>
      <set attributeName="display" to="none" begin="line2.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">Two</text>
        <text systemLanguage="es" x="426" y="430">Dos</text>
        <text systemLanguage="it" x="426" y="430">Due</text>
        <text systemLanguage="ja" x="426" y="430">2</text>
      </switch>
    </g>
    <g display="none">
      <set id="line3" attributeName="display" to="visible" begin="line2.end" dur="0.6s"/>
      <set attributeName="display" to="none" begin="line3.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">Three</text>
        <text systemLanguage="es" x="426" y="430">Tres</text>
        <text systemLanguage="it" x="426" y="430">Tre</text>
        <text systemLanguage="ja" x="426" y="430">3</text>
      </switch>
    </g>
    <g display="none">
      <set id="line4" attributeName="display" to="visible" begin="line3.end" dur="0.6s"/>
      <set attributeName="display" to="none" begin="line4.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">Four</text>
        <text systemLanguage="es" x="426" y="430">Quattro</text>
        <text systemLanguage="it" x="426" y="430">Quattro</text>
        <text systemLanguage="ja" x="426" y="430">4</text>
      </switch>
    </g>
    <g display="none">
      <set id="line5" attributeName="display" to="visible" begin="miley.begin+14s" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line5.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">I probably shouldn't say this</text>
        <text systemLanguage="es" x="426" y="430">Probablemente no debería decir esto</text>
        <text systemLanguage="it" x="426" y="430">I probabilmente shouldn' la t dice questa</text>
        <text systemLanguage="ja" x="426" y="430">Iおそらくshouldn'tはこれを言う</text>
      </switch>
    </g>
    <g display="none">
      <set id="line6" attributeName="display" to="visible" begin="line5.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line6.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">But at times I get so scared</text>
        <text systemLanguage="es" x="426" y="430">Pero a veces me siento muy asustada</text>
        <text systemLanguage="it" x="426" y="430">Ma occasionalmente ottengo in modo da spaventato</text>
        <text systemLanguage="ja" x="426" y="430">しかし時々私は得たり従っておびえた</text>
      </switch>
    </g>
    <g display="none">
      <set id="line7" attributeName="display" to="visible" begin="line6.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line7.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">When I think about the previous</text>
        <text systemLanguage="es" x="426" y="430">Cuando pienso en la anterior</text>
        <text systemLanguage="it" x="426" y="430">Quando penso al precedente</text>
        <text systemLanguage="ja" x="426" y="430">私が前について考える時</text>
      </switch>
    </g>
    <g display="none">
      <set id="line8" attributeName="display" to="visible" begin="line7.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line8.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">Relationship we shared</text>
        <text systemLanguage="es" x="426" y="430">Relación que compartimos</text>
        <text systemLanguage="it" x="426" y="430">Rapporto che ci siamo ripartiti</text>
        <text systemLanguage="ja" x="426" y="430">私達が共有した関係</text>
      </switch>
    </g>
    <g display="none">
      <set id="line9" attributeName="display" to="visible" begin="line8.end" dur="2.1s"/>
      <set attributeName="display" to="none" begin="line9.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">It was awesome, but we lost it</text>
        <text systemLanguage="es" x="426" y="430">Fue incre€ble pero la perdimos</text>
        <text systemLanguage="it" x="426" y="430">Era impressionante, ma lo abbiamo perso</text>
        <text systemLanguage="ja" x="426" y="430">それは驚くばかりだったが、私達はそれを失った</text>
      </switch>
    </g>
    <g display="none">
      <set id="line10" attributeName="display" to="visible" begin="line9.end" dur="4s"/>
      <set attributeName="display" to="none" begin="line10.end" dur="0"/>
      <switch>
        <text systemLanguage="en" x="426" y="430">It's not possible for me, not to care</text>
        <text systemLanguage="es" x="426" y="430">No es posible para mi creer que no os importo</text>
        <text systemLanguage="it" x="426" y="430">It's non possibile per me, non preoccuparsi</text>
        <text systemLanguage="ja" x="426" y="430">It's 私のために可能ではないs気遣わないため</text>
      </switch>
    </g>
  </g>
</svg>
      
    

If the users computer was set for the Japanese locality, the SVG content could look like the image below:


One of the more interesting features of SVG 1.1 was the inclusion of arbitrary SVG content in the definition of font glyphs. SVG defined its own font format capable of mapping arbitrary SVG graphics to the displayed glyphs for a piece of text.

This capability allows accesibilty to be well addressed whilst providing complete creative control over the graphically displayed output for text data.

A consequence of this flexibility in glyph definiition is that glyphs can contain animation. This capability can be used for exciting graphical effects such as 'fire' fonts with glyphs that are animated illustrations of burning glyphs as a simple example.

Given this capability in SVG 1.1, an SVG 1.2 implementation should be capable of combining video objects into the font glyphs to provide video fonts for an even richer media experience.

It shoud be noted that SVG Tiny 1.2 at its core fails to support arbitrary glyph content and so is incapable of supporting font animation. However an SVG user agent capable of supporting SVG 1.2 Tiny in conjunction with SVG 1.1 Full modules can use video in font glyph definitions.

This sort of capability is especially useful for application areas such as advertising where a company logo can be part of a multimedia presentation yet accessibility capable user agents can get access to the raw text in the content.

An example of an SVG font containing glyphs that are ligatures with video is shown below:


SVG 1.1 Full supports the <textPath> object that enables content authors to place font glyphs along an arbitrary path.

By providing SVG Tiny 1.2 video capability alongside SVG Full textPath functionality, the content author is provded the freedom to display animated SVG fonts containing video placed along an arbitrary path for even greater creative freedom.

An example of an SVG font containing video placed on a path is shown below:


Given the advanced capabilities of SVG alone, it is important to address the capabilities of a combined user agent that handles both HTML and SVG content.

The combination of SVG and HTML and other dialects is known as a compound document. Such compound documents leverage the sum of their respective sub-sets and as a result can present display capabilities that are beyond any of the sub-set dialects in isolation.

For example, an HTML plus SVG plus SMIL user agent could combine an SVG graphic containing video inside a <div> element in HTML where the SVG graphic is animated using SMIL elements.

Some leading web browsers already combine HTML plus SMIL, whilst the addition of SVG brings another dimension to the creative options for authors.

An example of a compound document containing HTML, SMIL and SVG video is shown below at two different times during an active SMIL animation.



Whilst simple integration of SVG with HTML provides enriched capability, seamless integration of SVG with both HTML and CSS can provide even more enhanced features.

For example, if the font engine of a web browser is sufficiently abstracted, the selection of a font through CSS should be independent of the target font being selected.

Thus, the web browser should equally be capable of selecting an SVG font for display of HTML content. This ability has already been deployed in exisiting advanced browsers today.

Given the feasibility of such cross-content font selection, it is a logical extension that display of arbitrary SVG content can be made from within HTML textual data by use of SVG fonts defined in the content.

An example of an HTML page referencing SVG font glyphs containing video is shown below:


SVG with video brings many varied aspects of video manipulation, and an interesting one is exposed through the use of clip paths and the <use> element.

The <use> element creates a conceptual clone of the content it references for display (although in most implementations a real clone is not generated in order to be more resource efficient).

Applying a <use> element to a target piece of SVG content allows the author to place a single source video at multiple locations in the SVG graphic.

SVG Full also supports the clipPath element that defines a clipping polygon through which subsequent graphics may be clipped whilst rendered. Thus it is possible to combine clipPath with <use> to 'slice-up' video into pieces for display.

For example, a video clip could be sliced into four pieces by referencing it four times via <use> and applying a different clip path to each <use> reference.

The SVG below shows an example of slicing a video into four tiles:

Example 3. SVG generating four video tiles from a single source video.

      
<?xml version="1.0" encoding="utf-8"?>
<svg xml:id="root" width="100%" height="100%" viewBox="0 0 1600 900"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="full">
  <desc>Example slicing video in rectangular pieces</desc>
  <defs>
    <video xml:id="goods_thumb" xlink:href="videos/thegoods-tlr1_h720p.mov" type="video/quicktime"
           x="0" y="0" width="800" height="450" repeatCount="indefinite"/>
    <clipPath xml:id="tl_tile">
      <rect x="200" y="115" width="400" height="225"/>
    </clipPath>
    <clipPath xml:id="tr_tile">
      <rect x="1000" y="115" width="400" height="225"/>
    </clipPath>
    <clipPath xml:id="bl_tile">
      <rect x="200" y="560" width="400" height="225"/>
    </clipPath>
    <clipPath xml:id="br_tile">
      <rect x="1000" y="560" width="400" height="225"/>
    </clipPath>
  </defs>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1598" height="898"
        fill="none" stroke="blue" stroke-width="2"/>
  <use clip-path="url(#tl_tile)" xlink:href="#goods_thumb" x="200" y="115"/>
  <use clip-path="url(#tr_tile)" xlink:href="#goods_thumb" x="600" y="115"/>
  <use clip-path="url(#bl_tile)" xlink:href="#goods_thumb" x="200" y="335"/>
  <use clip-path="url(#br_tile)" xlink:href="#goods_thumb" x="600" y="335"/>
</svg>
      
    

The result of the sliced video tiles is shown below:


Given the slicing capability of video provided by <use> and <clipPath>, interesting presentation effects can be created by combining these with other SVG elements.

The most obvious candidate set of elements are in the animation set.

SVG <animateMotion> allows the author to define the movement of SVG graphics.

By combining SVG <animateMotion> with sliced video tiles, the author can 'fly' pieces of video around the display area for arbitrary video effect.

The SVG below shows a simple example of animateMotion applied to SVG video tiles.

Example 4. SVG video tiles with animated motion.

        
<?xml version="1.0" encoding="utf-8"?>
<svg xml:id="root" width="100%" height="100%" viewBox="0 0 1600 900"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="full">
  <desc>Example exploding video in rectangular pieces</desc>
  <defs>
    <video xml:id="goods_thumb" xlink:href="videos/thegoods-tlr1_h720p.mov" type="video/quicktime"
           x="0" y="0" width="800" height="450" repeatCount="indefinite"/>
    <clipPath xml:id="tl_tile">
      <rect x="400" y="225" width="400" height="225"/>
    </clipPath>
    <clipPath xml:id="tr_tile">
      <rect x="800" y="225" width="400" height="225"/>
    </clipPath>
    <clipPath xml:id="bl_tile">
      <rect x="400" y="450" width="400" height="225"/>
    </clipPath>
    <clipPath xml:id="br_tile">
      <rect x="800" y="450" width="400" height="225"/>
    </clipPath>
  </defs>
  <script type="text/ecmascript">
    function blow_up(evt)
    {
      document.getElementById("tl_motion").beginElement();
      document.getElementById("tr_motion").beginElement();
      document.getElementById("bl_motion").beginElement();
      document.getElementById("br_motion").beginElement();
    }
  </script>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1598" height="898"
        fill="none" stroke="blue" stroke-width="2"/>
  <rect fill-opacity="0"  stroke="none" x="400" y="225" width="800" height="450">
    <handler type="application/ecmascript" ev:event="click">blow_up(evt);</handler>
  </rect>
  <use clip-path="url(#tl_tile)" xlink:href="#goods_thumb" x="400" y ="225">
    <animateMotion xml:id="tl_motion" begin="indefinite" path="M0,0L-50,-50 Q -300,-475 -400,450" calcMode="spline" keyTimes="0;.5;1" keyPoints="0;.5;1" keySplines="0,.25,.75,1;.25,0,1,.75" dur="2s" repeatCount="1" fill="freeze"/>
    <animateMotion begin="tl_motion.end" from="-400,450" to="0,0" calcMode="discrete" dur="3s"/>
  </use>
  <use clip-path="url(#tr_tile)" xlink:href="#goods_thumb" x="400" y ="225">
    <animateMotion xml:id="tr_motion" begin="indefinite" path="M0,0L50,-50 Q 300,-375 400,450" calcMode="spline" keyTimes="0;.5;1" keyPoints="0;.5;1" keySplines="0,.25,.75,1;.25,0,1,.75" dur="2s" repeatCount="1" fill="freeze"/>
    <animateMotion begin="tr_motion.end" from="400,450" to="0,0" calcMode="discrete" dur="3s"/>
  </use>
  <use clip-path="url(#bl_tile)" xlink:href="#goods_thumb" x="400" y ="225">
    <animateMotion xml:id="bl_motion" begin="indefinite" path="M0,0L10,-50 Q 200,-475 400,225" calcMode="spline" keyTimes="0;.5;1" keyPoints="0;.5;1" keySplines="0,.25,.75,1;.25,0,1,.75" dur="2s" repeatCount="1" fill="freeze"/>
    <animateMotion begin="bl_motion.end" from="400,225" to="0,0" calcMode="discrete" dur="3s"/>
  </use>
  <use clip-path="url(#br_tile)" xlink:href="#goods_thumb" x="400" y ="225">
    <animateMotion xml:id="br_motion" begin="indefinite" path="M0,0L-10,-50 Q -200,-875 -400,225" calcMode="spline" keyTimes="0;.5;1" keyPoints="0;.5;1" keySplines="0,.25,.75,1;.25,0,1,.75" dur="2s" repeatCount="1" fill="freeze"/>
    <animateMotion begin="br_motion.end" from="-400,225" to="0,0" calcMode="discrete" dur="3s"/>
  </use>
</svg>
        
      

The Images below shows various stages of the SVG example shown above.


A capability available in SVG Full but absent in SVG Tiny 1.2 is opacity applied to video elements.

Use of opacity on video can be used for a variety of effects such as fade-in, fade-out, etc.

Web browsers or user agents capable of combining SVG Tiny 1.2 with some SVG Full capability can provide another dimension to the options available for content authors.

For example, combining motion with opacity for an SVG video element could be used in an advanced video on demand user interface.


One of the more interesting modules under development for SVG is the SVG 1.2 advanced compositing module.

That module introduces a number of alpha compositing effects that are very familiar to graphic artists using applications like Photoshop.

The compositing operators introduced have some overlap with existing SVG 1.0 filters but differ in an important way. Filters are stand-alone elements, whilst the compositing operators act as attributes on the SVG element. The distinction is subtle, but the graphical flexibility afforded by the composoiting operators is far more flexible than the more restricted filter model.

Compositing operators were first introduced into SVG implementations by proprietary extensions in the Adobe SVG Viewer version 3 and since then have been undergoing standardization for the purpose of highest possible compatibilitiy and fidelity with applications such as Photoshop, PDF, Java 2D and Apple's Quartz graphics model.

Incorporation of the compositing operator 'comp-op' into SVG user agents provides an extra dimension for creative visual effects when applied to <video>.

For example, the <plus> operator has traditionally been used as a cross-fade for motion pictures. SVG advanced alpha compositing brings this to all SVG content including <video>. Other blend modes, familiar to graphic artists provide a plethora of options for compelling SVG graphical content.

An example frame of SVG video with advanced alpha compositing effects is shown below:


Static application of advanced alpha compositing effects on SVG video can be of use for simple video effects, but these effects can be enhanced by application of standard SVG animation control.

Animating the applied compositing operator to an SVG graphic can be used to declaratively animate the visual effect, thus providing another degree of options for the author of the content.

For example a video transition may be enhanced by animating a compositing operator at the time of transition in conjunction with animation of opacity, whilst simultaneously animating the follow-on video that is being transitioned to.

Already SVG Tiny 1.2 with its video capability provides a rich, compelling multimedia presentation environment that can be utilized for all forms of rich media content.

Extensions of basic SVG Tiny 1.2 engines with SVG Full capabilities further provide amazing creative possibilites limited by ones imagination.

However, modern manipulation of video media for applications such as video on demand require capabilities not present in existing specifications.

Examples of desirable features from SMIL that would be of benefit to SVG video include the 'speed', 'clipBegin' and 'clipEnd' elements. 'speed' can be used to change the rate of playback of media objects, thus enabling fast-forward and rewind functionality. 'clipBegin' and 'clipEnd' may be used to manage the start end ending positions of media objects which facilitates more fine-grained control over playback presentation.

In attempting to emulate existing set top box functionality with pristine SVG, it is difficult to emulate the user visible capabilities of simple things like fast-forward, rewind etc. in a personal video recorder. These capabilities are easily supported by existing SMIL elements, the inclusion of which into SVG would be seen as greatly beneficial for the continued evolution of the standard.

SVG Tiny 1.2 as it stands brings a wealth of creative possibilities for a content author of multimedia content.

Hybrid implementations combining SVG Tiny 1.2 with some SVG Full features extend the creative possibilities available.

Proper integration of HTML with SVG and its well designed video capabilities provides yet another additional dimension to the creative possibiities exposed to authors of dynamic, compelling, rich visual media for tomorrows web.