Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 335

Scalable Vector Graphics should be preferred for all images that require basic shapes such as circles and
polygons, Bézier paths and curves, text, opacity, transformations (rotation, skew, scale, and so on), gradients, and
animations. 10 SVG content can also be combined with bitmap graphics.
Similar to PNG, the browser support of SVG should be taken into account in web design for the sake of backward
compatibility. The SVG support of older browsers was different for inline SVG, external SVG files, and SVG used as a
CSS background image. Prior to HTML5, external SVG files were usually embedded via the object element, while in
HTML5 you can embed external SVG files also with img or the newly introduced svg or embed element, or write the
SVG code directly in the markup (inline SVG). The browser support of the different SVG versions (1.0 and 1.1, Tiny
and Full variants) was also different across older browsers. The Gecko layout engine supports SVG 1.1 Full since 2005,
while WebKit since 2006, but early implementations were incomplete. Opera supports SVG 1.1 Tiny from version 8,
SVG 1.1 Basic fully and SVG 1.1 Full partially from version 9, and SVG Tiny 1.2 (including compressed SVG) partially
from version 9.5 onward. Modern browsers support SVG 1.1 Full correctly, which has a standardized second edition
since 2011.
Flash
Before HTML5, Flash used to be one of the most popular technologies for publishing active content on the Web.
For live video streaming, Flash is still the most popular. Unfortunately, the default embedding code provided by Flash
development tools is often not standard-compliant and has some browser-dependent issues. For Flash contents,
it is important to provide an alternate textual content that can be automatically activated if the Flash content cannot
be displayed.
Embedding Flash in XHTML
The first Flash implementations applied the embed element, which was deprecated in HTML 4 and XHTML in favor of
the object element but then was reintroduced in HTML 5.
To avoid browser- and vendor-specific code, various implementation methods have been introduced, including
duplication (the twice-cooked method ), the nested objects method , and Flash Satay . The latter one, Flash Satay,
provides robust and standard-compliant Flash implementation by including an additional movie parameter, and
suggested by the W3C [29]. Listing 9-15 shows an example.
Listing 9-15. Embedding Flash Using Flash Satay
<object type="application/x-shockwave-flash" data="australia.swf" width="735" height="677" 
id="flash">
<param name="movie" value="australia.swf" />
</object>
Note that the same Flash file is specified both as a data attribute value on the object element and as a movie
parameter value. Note that the classid and codebase parameters used by older methods are eliminated. If the
codebase parameter is left in the code when modifying a traditional Flash embedding code, it prevents Firefox from
rendering the Flash content, and the optionally provided alternate content appears instead (or nothing at all).
One of the known issues of the Flash Satay method is that the Flash movie is not streamed by some browsers such
as Internet Explorer. Waiting for the whole file to download and start to play afterwards works fine for small files and
fast Internet connections only.
If you develop a web page with layers above each other, it might be rather frustrating that Flash content appears
above all other web site elements by default. If you want to set the layer order on web pages with Flash content, an
additional parameter ( wmode ) is needed (Listings 9-16 and 9-17).
10 Similar effects are also supported by CSS3.