Adaptive Level-of-Detail in SVG

A script-free SVG document is just data with a fixed internal structure and exhibits only static graphic semantics. If SVG documents are not data but are programs, then one should be able to use SVG to create dynamic graphics, as the documents would be executed for its dynamic semantics. When SVG documents are used with scripting, one can achieve a certain level of dynamic graphics. However, the logics of the dynamic graphics is kept in the script, not expressed in the document itself. This is a drawback, as often one may like to express the graphic semantics entirely within SVG elements. For example, one may want to use only SVG elements to describe graphics that animate, or to express graphics with adaptive Level-of-Detail (LoD). Animation is supported in SVG with a built-in vocabulary, or even by the help of external vocabulary such as SMIL. Currently there is no support of adaptive LoD in SVG, although it is extremely useful in Geographic Information Systems (for adaptive zooming) and fractal geometries (for on-demand resolution-dependent visual presentation).

We show in the paper how to support adaptive LoD in SVG. The SVG DTD is extended by adding attributes to the elements (including visual elements and grouping elements). Information about the adaptation function and the current detail-level can now be kept with the SVG <g> element, which is a focal point to be further explored. When more details are demanded, these attributes are used to generate the next level of details for elements enclosed in the current focal point. The newly produced graphic elements then replace the old ones, and become the new focal points. Currently the adaptation functions are expressed by an ad hoc transformational language, and they are interpreted by an ECMA script. We note that existing XML transformational languages (such as XSLT) and vocabularies (similar to SMIL for animation) can also be used to express adaptation, and they can lead to a script-free but LoD-capable SVG.

1. Introduction

One of the main characteristics of SVG is vector-based scalable graphics. After loading SVG documents into a browser, users are allowed to "zoom" the graphics for details or an overview. However, this type of zooming does not change the appearance and presentation of the graphics described by the document. It just changes the scale. For example, the "zoom-in" operation will enlarge the graphics which is to change the visible area to the user. Neither extended information nor more details of the graphic will be generated actually. In other words, the concept of level-of-detail is not realized in current SVG zooming metaphor.

In many applications of SVG, the need of zooming with adaptive level-of-detail is evident. In Web-based geographic information systems (GIS), for example, users need to grasp a global understanding of the map at a larger scale with simple and approximate graphical presentation and symbolization. Without appropriate adaptive mechanism, complex presentations with detailed mapping features usually hinder users to derive the global understanding. Similarly, when users target at a specific part of the map, users would expect to percept comprehensive details of that targeted sub-area.

As the previous work of [Cecconi & Galanda, 2002] proposed, two main methods could be applied on the issue of preparing graphics with required Level-of-Detail (LoD). One technique is to pre-generate SVGs with various LoDs, such as maps with different scale levels (e.g., 1:5000, 1:25000). Another technique is to produce SVG documents dynamically at run-time if the required zooming effect can be generated or adapted on-the-fly by appropriate algorithms. In [Cecconi & Galanda, 2002] , a data-driven system for Web cartography incorporating these two techniques has been proposed. Thus the system could select or generate SVGs with required LoD to serve users. In this paper, such mechanism of changing the LoD of visual presentations dynamically is called Adaptive LoD. Nevertheless, knowledge of how to adapt a particular graphic is held by the centralized system in this kind of data-driven approach. In other words, [Cecconi & Galanda, 2002] used a centralized system that did not exchange and distribute SVG documents with associated adaptive functionality

In this paper, we demonstrate an approach to embedding the domain semantics of adaptive LoD into graphics by extending the DTD of SVG [Chang & Chuang, 2003] . We aim to achieve adaptive LoD with the following objectives

The overall goal of this paper is to investigate possible solutions of adding the feature of LoD in SVG. We also propose how to add a set of adaptive LoD vocabularies to the current SVG DTD.

2. Adaptive Level-of-Detail

In this chapter, the concept of LoD is explored further. We will describe different methods to attain the effect of adaptive LoD in SVG. A set of vocabularies is proposed as extensions to current SVG specification to fulfill the needs of these methods.

2.1 Methods of Level-of-Detail

In order to add the feature of LoD into current SVG specification, here we firstly distinguish different methods to achieve the effect of adaptive LoD. The concept of LoD is relating to the concept of generalization and specialization of individual or a group of graphics elements. For example, a large-scale geographic map aimed to show international boundaries is a kind of generalization regarding to small-scale maps showing comprehensive details of official boundaries inside a specified area. Another type of LoD could be the change of visual symbols for the same information source. For example, the line shown in Figure 1 (a) could be thought as the result of a generalization for the graphics shown in Figure 1 (b). In other words, the graphic shown in Figure 1 (b) has a higher LoD than that in Figure 1 (a). The concept of LoD can be applied to many similar situations. For instance, the acronym "LoD" itself can be even thought as the generalized symbolization of the phrase "Level-of-Detail".

On the other hand, the remaining three methods shown in Figure 2 belong to the category of pre-generating LoD. The common characteristic of these methods is that SVG data with different LoDs are pre-generated. It is evident that these data can be pre-authored manually or pre-generated by the two types of algorithm we just mentioned. Note that generalization/specialization algorithms are applied off-line in this case. Once SVG data with different LoDs are pre-generated, the next task is to use and organize these pre-generated graphics properly to achieve the effect of adaptive LoD. Possible methods are

2.2 Augmenting DTD for Adaptive Level-of-Detail

We have described a taxonomy for adaptive LoD methods in SVG. We now consider how to describe/embed the semantics of adaptive LoD in the SVG documents by defining a set of extended vocabularies. Our previous works have proposed several approaches of embedding domain semantics into SVG documents [Chang & Chuang, 2003] . For this case of incorporating LoD semantics in SVG, we choose to add new attributes to SVG graphics elements for its simplicity. A set of SMIL-like full-fledged vocabularies for adaptive LoD could be developed further as well. The augmented DTD is illustrated below by using <svg> and <g> elements as examples.

It is natural to treat the process of adaptation as a type of content transformation. Therefore, the purpose of adaptation definition is to clearly describe the parameters and/or the locations of adaptation engines/services. Two types of adaptation definition are:

The 'zoom' attribute associated with the <svg> element indicates whether to enlarge or reduce the size of graphics or not after the process of adaptation. If the value was set as 'true', then the adaptation engine should invoke the zooming function of the SVG renderer to achieve the effects.

It is worth noting that for methods belong to the category of pre-generating LoD, defining new graphics elements in a pre-generated pool of cache would be necessary. For example, for the method of LoD selection, the task is to select and render the graphic with required LoD from a set of pre-generated graphics objects. Links to these pre-generated objects or resources should be described in the document properly. We choose to add these new elements as the child elements of the <defs> element. Figure 5 shows the DTD defining the two new elements: <pool> and its child element <lodobj>.

For the <pool> element, the attribute 'action' is used to specify how to render graphics in the pool with different LoDs. There are two candidate values for this attribute, 'replace' or 'filter'. If the attribute has the value 'replace', which is the default one, it means that the adaptation results, either at the (k+1)-th level or at the (k-1)-th level, will be used to replace previous graphics at the k-th level. This is also known as the method of LoD selection. However, if the value 'filter' is specified, it indicates that the method of LoD filtering will be applied.

Though we only demonstrate how to augment attributes of <svg> and <g> elements in this case, this type of augmentation can be applied to all graphics elements, such as elements of <path>, <line>, or even <text>. Nevertheless, for most cases, adding attributes to the SVG <g> element would be sufficient.

3. Examples

In this chapter, we present several examples to demonstrate how to use these DTD augmentation techniques to realize various adapitve LoD methods in SVG.

3.1 Algorithmic Adaptation

Figure 6 shows the fragment of a SVG document that illustrates algorithmic generalization/specialization. Graphic illustration of the SVG elements are in Figure 7 . The initial graphics described by the SVG document is shown as Figure Figure 7 (a). By using the SVG <g> element as the input, the resulting graphics transformed by the adaptation function adaptBox(1) is shown as Figure 7 (b). The method of adaptive generalization/specialization is employed for this task. When the level of detail increases, the adpatation function is used to specialize the graphic presentation. Similarly, when the level decreases, the mechanism of generalization is used. In this case, the adaptive function is adaptBox() which is a recursive function where the argument '0' inside the function is used as a landmark specifying the inital LoD of the rendered graphics. The other argument 'cache' is an ID reference to a <pool> element in the SVG document. The use of this "pool" element is to offer a cache storage to store backups of the graphics that have been generated by the adaption fucnction. When users request to reduce/increase LoD, the cached graphics elements could be checked and fetched diretly if they are available. In this implementation, the adaptation function is implemented in ECMA script which performs DOM node manipulation. We could also use a link to external services in the form of doLevel="res:href('http://tsm.iis.sinica.edu.tw:8080/adapt/')", or a delegation referring to an XSLT script, instead of the accompanying ECMA script.

The next example demonstrates a fractal graphics, the Dragon Curve generated by the algebraic system, L-system [Weisstein, 1999] . Figure 8 shows part of the SVG document. Figure 9 (a) shows the initial graphic. Figure 9 (b) shows the result after adaptation by DOM manipulating at run-time. Note that the structure of the SVG document in Figure 8 is somewhat different to the box example we show in Figure 6 . In Figure 8 , we can observe that the static description of the graphics is hidden. Since the pattern of dragon curve can be best described by a well-defined algebraic system (i.e., L-system), but not by SVG's graphics vocabularies in a static manner (i.e., purely with <path> elements), thus it would be more sensible to express this pattern completely by the adaptation function itself. This adaption function fractalInit() plays two roles actually. On the one hand, it is an adaptation function for adaptive LoD; on the other hand, itself describes the fractal graphics, via an algorithmic means.

3.2 Resource Linking

The method of resource linking is useful and simple to implement. In the fragment of SVG document shown in Figure 10 , four distinct graphics elements are described and drawn. The rendered results are shown in Figure 11 . For each distint element, we specify resources for adapting itself in attributes 'doLevelUp' and 'doLevelDown'. Note that if these attributes were not annotated, then that element will not be replaced when changing the LoD. For example, the red circle with id="a" will not be adapted no matter adding or reducing the level of LoD. That is because neither 'doLevelUp' nor 'doLevelDown' were annotated in that element. In this example, the 'zoom' attribute of the <svg> element is given the value 'true'. Therefore, each time we change the LoD, the size of the viewBox will be modified as well.

3.3 Level-of-Detail Selection and Filtering

LoD selection and filtering could be the most popular methods for tackling LoD issues in geographic mapping as introduced in Section 2.1 . Here we present two examples to demonsrate LoD selection and filtering.

Figure 12 shows an SVG fragment for Lod selection. Corresponding graphics of the SVG fragment are shown in Figure 13 . The <pool> element is employed in this example as a storage for pre-generated (i.e., authored) graphics elements. These pre-generated graphics are embedded in the container element <lodobj> along with the attribute 'sn' specifying the identifiers of the elements. Figure 13 (a) shows the initial presentation of this document. The graphics embedded in <lod sn="0"> is selected and rendered initially. After adjusting the level of LoD from 0 to 2, the initial graphics is replaced by another graphics embedded in <lod sn="2">. The result is shown in Figure 13 (b).

The next example illustrates the method of LoD filtering. Actually, the descriptions of LoD filtering shown in Figure 14 is almost the same as that of LoD selection shown in Figure 13 . The only difference is that we annotate the attribute action="filter" in the <pool> element in this case. This annotation enables a different strategy on rendering the graphics with various LoDs. The difference is between rendering only one graphics element (the case of LoD selection) and rendering multiple layers of graphics simultaneously (the case of LoD filtering). In the method of LoD filtering, each <lodobj> element is treated as a graphics layer. And these layers can be mixed altogether to form more comprehensive graphics. Figure 15 (a) shows the initial graphics before any adaptaion. Figure 15 (b) shows the scenario after setting the level of detail to 2. It can be observed that graphics elements with sn="0", sn="1" and sn="2" are all fetched and rendered. Comparing this result to the result of LoD selection shown in Figure 13 (b), the difference is quite evident.

4. Conclusion

In this paper, we investigate the isseus of realizing adaptive Level-of-Detail(LoD) in SVG. We present a general model to address the LoD issues in SVG in a sensible way. We observe that the issue of adaptive LoD is still at the beginning but the needs for such a mechanism is evident. In the working draft of SVG 1.2, the funtionality of alternating the content based on display resolutions has been proposed via extending the <switch> element [SVG 1.2, multiple resolutions] . However, it seems that the consideration of conditional or alternative content could be part of the conceptual framework of adaptive LoD. The design in SVG 1.2 is closer to the method of LoD selection mentioned preciously in this paper. Just as what we have shown in this paper, there are other methods worthy considering when designing for LoD vocabularies in SVG.

In the future, we expect to incorporate this approach with system-level methods (e.g., the data-driven approach) such as those described in [Cecconi & Galanda, 2002] for further practical applications. In particular, it would be quite beneficial to incorporate the method of adaptive LoD into the Taiwan Social Map system for advancing the usability of multi-facets social and geometric mapping [Chang & Chuang, 2002] .