MBMS [10] | PSS [9] | DASH [11] (see note) | MMS [13] | MTSI [12] | |||||
---|---|---|---|---|---|---|---|---|---|
SMIL 2.0 3GPP SMIL profile [14] | - | CM | - | CM | - | ||||
DIMS Mobile Profile Level 10 [16] | CM | CM | - | - | - | ||||
XHTML Mobile Profile [15] | - | - | - | R | - | ||||
NOTE:
DASH may have inherited a scene description solution from PSS, but this is not stated anywhere and may be incomplete.
CM:
conditional mandatory
R:
required
-:
no indication
|
Features/Language | HTML5 | SVG | SMIL |
---|---|---|---|
Vector Graphics (native) | NO (but possible via embedding SVG or WebGL) | YES | NO (but possible via embedding SVG; though limited) |
3D Graphics | NO (but possible with embedding WebGL) | NO | NO |
Animations | TBD | YES | YES |
Media Synchronization | YES (but limited compared to SMIL?) | YES (based on SMIL) | YES |
Application features (e.g. app cache, storage, etc.) | YES | NO | NO |
<!DOCTYPE html> <html> <body> <input id="startButton" type="button" value="try it" /> <svg> <ellipse id="Ellipse" cx="150" cy="100" rx="50" ry="50" fill="blue"> <animate attributeName="rx" begin="startButton.click" dur="4s" values="50;150;50" repeatCount="indefinite"/> </ellipse> </svg> </body> </html>The attribute that is modified is the "rx" attribute. After the button is clicked "rx" increases from 50 pixels to 150 pixels and then back to 50 pixels within a duration of 4 seconds. The refresh rate is not stated and is left to the browser. The SMIL code itself is part of the "animate" element, which is a child element of the object being animated. So the SMIL code is closely integrated with the SVG element. Below, consider the JavaScript code that accomplishes the same thing:
<!DOCTYPE html> <html> <body> <input type="button" onclick="ellipse_animate(50,1)" value="try it" /> <svg> <ellipse id="Ellipse" cx="150" cy="100" rx="50" ry="50" fill="blue"/> </svg> <script> function ellipse_animate(x,step) { document.getElementById("Ellipse").setAttribute("rx",x); if (x>150||x<50) // Are we at the boundary and we need to reverse? step=-step; x+=step; setTimeout(function() {ellipse_animate(x,step)},20); //display the new ellipse every 20msec } </script> </body> </html>In this example the JavaScript code is at least slightly more complex and now the animation script is no longer closely integrated with the SVG element being animated. In addition, the animation author specifies how often the graphic should be redrawn so that the animation is smooth, instead of leaving this for the browser implementation. With SMIL, the programmer is freed from have to script timed loops using the setTimeout() or setInterval() methods.
Spatial | Structure | Temporal, Scripting, and Media | |
---|---|---|---|
XHTML | Text module Basic tables module Presentation module | Structure module Hypertext module List module Forms module Metainformation module Link module Base module Style sheet module Inputmode attribute module | Intrinsic module Scripting module Target module |
DIMS | Basic shapes, Text, Paths Painting | Styling Linking Fonts Metadata | Interactivity and events Media Elements ECMAScript Scene Updates |
SMIL | Layout Module | Linking Module Metainformation Structure Module | Content Control Modules Media Object Modules Timing and Synchronization Modules Transition Effects Module |