Proposed text per action 792 -http://www.w3.org/2005/MWI/BPWG/Group/track/actions/792


Use SVG only when appropriate

What it means
SVG is a vectorial format especially designed for its use in the Web. It is very useful when there is need to convey a lot of information making possible actions like zooming without loss of quality (e.g. a map or a chart). However, there are multiple cases where it is of the same value and safer (due to the lack of SVG support in several mobile browsers) to provide a raster alternative of the graphic.

How to do it
Use SVG only when it is necessary to exploit its vectorial nature. Otherwise, use a raster representation that is more likely be supported by mobile browsers.

Use the suitable SVG profile and be aware of deficient implementations

What it means
Nowadays, several mobile browsers support a SVG mobile profile called Tiny. The safest option is to use SVG Tiny 1.1 (SVG Tiny 1.2 is, at the time of writing, a candidate recommendation and is not widely implemented by mobile browsers). Even if SVG Tiny 1.1 is supported, it is recommended to be especially aware of two well-known mobile best practices: Take the reasonable steps to work around deficient implementations and carry out testing on actual devices as well as emulators.

How to do it
Minimize the size and complexity of the SVG graphics

What it means
Another mobile Web practice that is very useful in the SVG arena is Minimize. Here are some advices to promote a smaller size and complexity in the SVG. Note: This section is partially based on an informative section in SVG 1.1 recommendation. However it has been specifically adapted here taking into account mobile SVG Tiny 1.1 and current mobile SVG browsers Tiny 1.1 support.

How to do it

         Nowadays, Mobile Browsers that support SVG also support gzip compression. Compressed SVG files can be until 80 percent smaller than original ones. Note that the processing cost         of decompressing data should be balanced against the gains in transport efficiency. For more information on this please refer to section Use Transfer Compression for Content.  

         Some of the language facilities such us defs and use tags allow to define one geometric figure once and reuse as many times as needed. Other elements such us g allows to         make groups of elements and to make possible property inheritance. SVG's path data definition was defined to produce a compact data stream for vector graphics data: all         commands are one character in length; relative coordinates are available; separator characters do not have to be supplied when tokens can be identified implicitly.


Use some SVG capabilities smartly

What it means
Even if SVG Tiny 1.1 features are used, other advanced features of SVG can be simulated with the available capabilities. Next section introduces some examples:

How to do it

         Some effects that are typically made using Javascript can also be achieved by means of SMIL atributtes. See the following example.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript"><![CDATA[
function changeColor(evt)
{var target=evt.target;
 var style=target.style;
 style.setProperty('fill',"black",null);
}
]]></script>

 <rect width="100%" height="100%" fill="white" />

 <rect x="30" y="50" width="240" height="100" fill="red" />
 <circle cx="150" cy="100" r="80" fill="red" />
<!-- -->
 <text x="150" y="125" font-size="60" text-anchor="middle" fill="white" onmouseover="changeColor(evt)">SVG</text>

</svg>
This is a simple example of interactivity. When a user moves the mouse over a SVG text a javascript event is launched and the text changes its colour.
This effect can also be achieved without using Javascript like in the following example:

[...]
<rect width="100%" height="100%" fill="white" />
<rect x="30" y="50" width="240" height="100" fill="red" />
<circle cx="150" cy="100" r="80" fill="red" />

<text x="150" y="125" font-size="60" text-anchor="middle" fill="white" visibility="hidden">SVG
<set attributeName="visibility" attributeType="CSS" to="visible" begin="2s" dur="4s" fill="freeze"/>
<set attributeName="fill" attributeType="CSS" to="black" begin="mouseover" end="mouseout"/>
</text>
</svg>
The support of the path element is limited in Tiny profile, especially due to the unavailability of the useful arc curve command. However this feature
can be partially simulated by means of other geometry elements such us the polyline or even simpler paths commands like moveTo, lineTo and so on.
The following samples show a pie chart sector made by means of path arc commands (neither Tiny 1.1 nor 1.2 compliant) and path line commands or polyline element (both Tiny 1.1 compliant).


Provide graceful degradation to the SVG graphics

What it means

There are several browsers that do not have SVG support (or its support is limited) so the mobile application should be prepared to provide similar functionality in case SVG is not (fully) available. The aim of this practice is to preserve the user experience by degrading the graphic accordingly. For example, a statistical chart could be degraded in the following steps:


How to do it