Adaptive Level-of-Detail in SVG

Keywords: Adaptive Level-of-Detail, Adaptive zooming, Rich/Smart graphics, Scalable Vector Graphics (SVG).

Yi-Hong Chang
Tyng-Ruey Chuang
Hao-Chuan Wang

Institute of Information Science, Academia Sinica.
Nangang 115, Taipei Taiwan
{yhchang, trc, haochuan}


A script-free SVG document is just data with a fixed internal structure and exhibits only static graphic semantics. If SVG docuements 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 achive 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 with SVG elements. For example, ones may want to use only SVG elements to describe graphics that animate, or to express graphics with adaptive level-of-details (LoD). Animation is supported in SVG with a built-in vacabulary, or even by the help of external vacabulary 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 two attributes to the element type g. Information about the adaptive function and the current detail-level can now be kept with the g element, which is a focal point to be further explored. When more details are demanded, the two 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 adaptive functions are expressed by an ad hoc transofrmational languge, and they are interpreted by an ECMA script. We note that existing XML transformational languages (such as XSLT) and vacabularies (similar to SMIL for animation) can also be used to express adaption, and they lead to a script-free but LoD-capable SVG.

Table of Contents

1. Introduction 2. Augmenting DTD for Adaptive LoD 3. Conclusion Bibliography

1. Introduction

One of the main characteristics of SVG is the feature of vector-based scalable graphics. After loading SVG documents into the browser, users are allowed to "zoom" the graphics via interaction. However, this type of zooming does not change the appearance and presentation of the graphics described by the document. For example, the operation of "zoom-in" 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 level-of-detail (i.e., adaptive zooming) is evident. Ex. In Web-based geographic information systems(GIS), users would have the need to grasp a global understanding of the map at a larger scale with simple and approximate graphics. Without appropraite adaptive mechanism, complex presentations with detailed mapping elements usually hinder users to derive the global understanding. Similarly, when users target at a specific part of the map, users would expect to percept exhaustive details of that targeted sub-area.

As previous work in [Cecconi & Galanda, 2002] proposed, one technique to this issue is to pre-compute SVGs with various LoDs. Besides, it is also viable to generate SVG document fitted to required LoD dynamically at run-time if the target to be zoomed can be generated on-the-fly by suitable algorithms. In [Cecconi & Galanda, 2002], a data-driven system for Web cartography based on these techniques is proposed. Thus the system could select or generate SVGs with required LoD to users. 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, there is no description of LoD embedded in the SVG document. At some sense, the resulting graphics of zooming are generated by the system with its database and trasformation engine, not adapted by processing the original ones. Therefore, we cannot exchange and distribute the SVG with associated adaptive behaviors in pairwise.

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

2. Augmenting DTD for Adaptive LoD

We treat the adaptation of SVG documents as a form of transformation. Note that such kind of transformation could be, but must not be an XSLT transformation. Using an SVG document as the input, the task of adaptation is to modify part/all elements/attributes of that document to derive the required ouput. Adapatation function is the mechanism between for such transformation. If the adaptation conforms to particular heuristic or metaphor of adding/reducing details, this type of adaptation is so-called adaptive LoD. From this point of view, what we need to do is to establish the linkage between SVG elements and the adaptation function with suitable descriptions.

We have described methods of embedding domain semantics into SVG documents in [Chang & Chuang, 2003]. By considering the concerns we have mentioned and the characteristic of the task, we choose to add new attributes to SVG elements. The augmented DTD is very simple as illustrated below

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"" [
          <!ATTLIST g
            adaptation CDATA #IMPLIED
            initlevel CDATA #IMPLIED>

For most cases, adding attributes to the SVG element <g> could be sufficient. However, it is also viable to do so to other elements such as the element <svg>.

Here we present some examples to show how it works. Figure 1 shows a piece of SVG which describes the graphic of Figure 2. The graphic described by the SVG document is shown as Figure 2(a). By using the <g> element as the input, the resulting graphic transformed by the adaptation function adapt(2) is shown as Figure 2(b). Arguments inside the function are associated parameters needed by the function, which depends on the task domain. In this case, adapt() is a recursive function where the number '2' inside the function means the number of iterations.

<g id="box"  adaptation="adapt(2)" initlevel="1">
   <line x1="40" y1="40" x2="80" y2="40"/>
   <line x1="80" y1="40" x2="80" y2="80"/>
   <line x1="80" y1="80" x2="40" y2="80"/>
   <line x1="40" y1="80" x2="40" y2="40"/>

Figure 1: SVG document (partial) of the box shown in Figure 2.


Figure 2: A box. (a) the initial graphic described in the SVG document (b) the graphic adapted by the function adapt(). (SVG source at box-lod.svg).

The use of initlevel attribute is to setup a coordinate system for adaptation. The concept of LoD is bi-directional in general, but the adaptation function is actually unidirectional. In general, to achive bi-directional adaptation we need another inverse function for this task. But in practice, we can cache graphics with different LoDs generated by the adaptation function, and reuse them in subsequent interactive events. Hence the initlevel attribute offers a baseline for adaptation which would be quite helpful for practical use.
In implementation, the adaptive function could be implemented in ECMA Script which performs DOM node manipulation intuitively. Besides, a link to external service in the form like adaptation="link('')" or a delegation toward XSLT transformation are all possible.

Another example demonstrates a famous fractal graphic, the Dragon Curve computed by the algebraic system, L-system [Weisstein, 1999]. Figure 3 shows the SVG descriptions. Figure 4(a) shows the initial graphic with its initlevel="8". Figure 4(b) shows the graphic after adaptation with the unvisible change (i.e., adapt) of initlevel="9" with DOM manipulating at run-time.

<g id="dragon" adaptation="L_fractal('X','','-FX++FY-','+FX--FY+',0,45,3)"
   initlevel="8" onload="render(evt)"/>
<path d="" id="template" style="stroke-width:0.7;fill:none;visibility:hidden"/>

Figure 3: SVG document (partial) of the fractal, Dragon curve shown in Figure 4.


Figure 4: Dragon curve fractal. (a) the initial graphic generated by the function at run-time (b) after adapt the value of initlevel. (SVG source at dragon-lod.svg).

Note that the structure of SVG document in this case is quite different to the box example we mentioned previously. In Figure 3, we can observe that the static description of the graphic is absent. Only an invisible dummy element <path> is described here. This dummy element is employed by the L_fractal() function as the brick for constituting the fractal pattern at run-time. Since dragon curve can be best described by a well-defined algebraic system, but not SVG's vocabularies, it is simple and intuitive to describe the pattern completely by the function. Thus the function plays dual roles. On the one hand, it is an adaptation function; on the other hand, it self-described the graphic in an ad hoc way.

3. Conclusion

In this paper, we investigated the problems of realizing adaptive level-of-details in SVG. We also presented a general method to address this issue in a sensible means. We expect to incoporate this approach with system-level methods (e.g., the data-driven approach) for further practical applications. Especially, it would be quite beneficial to incoporate 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].



[Cecconi & Galanda, 2002]
Alesandro Cecconi and Martin Galanda, Adaptive Zooming in Web Cartography. In SVG Open / Developers Conference. Zurich, Switzerland, July 2002. Available at
[Chang & Chuang, 2002]
Yi-Hong Chang and Tyng-Ruey Chuang, Online aggregation and visualization of census data: Population mapping with SVG, XML, and free software. In SVG Open / Developers Conference. Zurich, Switzerland, July 2002. Available at The system is accessible at
[Chang & Chuang, 2003]
Yi-Hong Chang and Tyng-Ruey Chuang, Embedding Domain Semantics in SVG. In SVG Open Conference. Vancouver, Canada, July 2003. Available at
[Weisstein, 1999]
Eric W. Weisstein, Dragon Curve. from MathWorld--A Wolfram Web Resource. Available at

Valid XHTML 1.1!