A Modular SVG Engine Architecture for Information Appliances

Keywords: SVG, architecture, mobile, Internet applications

Hajime MORITA
ACCESS
Japan
hajime@access.co.jp
http://www.access.co.jp/

Biography

Hajime Morita is the chief architect of ACCESS NetFront SVG Viewer. His main interest is to make the Web more attractive for every people. He beleaves that SVG will take central role for building the next generation, attractive Web experience.

Toshihiko YAMAKAMI
ACCESS
Japan
yam@access.co.jp
http://www.access.co.jp/

Biography

Born in Hokkaido, Japan. He got his master degree in Information Science, University of Tokyo. After he joined NTT, he was engaged in research in computer communication and international standardization of distributed application services. He got a Yamashita-Award of Information Processing Society of Japan in 1995.

He has been Evangelist, Research and Development, Access since 1999. His current research interest includes (a) the mobile Internet and (b) socio-technical analysis of technologies and business models. He has been engaged in international standardization activities in CCITT(ITU-T), ISO and W3C and other industrial consortia since 1989.

He was co-Editor of W3C XHTML Basic and Editor of WML2 in WAP Forum.

Tomihisa KAMADA
ACCESS
Japan
tomy@access.co.jp
http://www.access.co.jp/

Biography

Dr Tomihisa Kamada is a co-founder of ACCESS CO., LTD. Kamada received a doctor degree in computer science from University of Tokyo, and now is executive vice-president and chief technology officer of the company. His fields are network protocols, programming languages, visualization, and distributed computing.

He is the original developer of "Compact HTML", which is a subset of HTML for mobile phones, and submitted it to W3C (World Wide Web Consortium). His vision is "Net-enabling consumer devices could reduce Digital Divide".


Abstract


We propose architecture for the SVG engine to address this challenging problem. The engine is designed for NetFront3 ™, popular browser software for Non-PC devices. Our "flow centralization" architecture promotes the modularity and customizability. This facilitates loose coupling among Slave modules, provides encapsulation in Slave implementations. This makes the Slave customization easy and tunable, and improves the software maintenance in a wide range of porting environments. It facilitates the footprint optimization in the embedded digital appliance environments.


Table of Contents


1. Introduction
2. Background and Challenges
3. Proposed Approach
4. Application Examples
     4.1 Stand-alone player and Browser Plug-in application
     4.2 Image Decoder
     4.3 Map Viewers
     4.4 Compound Document Browser
     4.5 Other Applications
5. Discussion
6. Conclusion
Bibliography

1. Introduction

Rich user experiences such as interactive, dynamic graphics and animated GUIs are required for Non-PC devices (Information Appliances), as they penetrate into every day's life [cerf01] . This leads to the new architecture framework for multimedia applications in the embedded application domains [yam2002pcm] . In the past, these rich media requirements were pursued by the proprietary solutions. In the emerging rich media Internet demands, the standard-compliant rich GUI is needed. With the ubiquity of browsers and web markup document formats across a range of platforms and devices, many developers are using the browser environment as a platform-independent application environment. SVG is one of platforms that can deliver such user experiences, and are aligned to the standard Internet technologies and then have compatibility with Web architecture and XML applications like XHTML and SMIL [smil12] . The XHTML Basic [baker00] , an XHTML variant for constrained device provides the basic framework. Because of its presentation capability and interoperability, SVG [svg01] catches developer's attention. The number of commercial implementations is increasing. The authors discuss the footprint-optimized solution for SVG in order to lead the SVG potentials in the ubiquitous digital appliance environment. The authors propose the flow centralization techniques. Then, the authors demonstrate the SVG applications implementations using the proposed technique. Finally, the authors compare the proposed solution with the existing approaches.

2. Background and Challenges

Non-PC devices, which include mobile phones, digital TV sets, car telematics, have various and limited resources compared to desktop PCs. These resources include small memory size, CPU power, small screen size, restricted input methods, and network bandwidth. This paper focuses the first two critical resources: memory size and CPU power. The diversity includes 200KB to 10 MB in memory and 10MHz to 1GHz in CPU power. This limitations and diversities poses a serious challenge for interoperability, portability and software quality management in SVG implementations. Not only the diversity in the target execution environment, the emerging demands in the rich media Internet applications drive the wide variety of the applications with vector graphics:

The portability is not only the multiple execution environment, but the embedding configuration may be diverse. The embedding configurations include:

The third party products include browsers and stand alone viewers. With the embedding configuration variety, the target resource environment is restricted due to the limited resource in the digital appliances. It makes a challenge for the SVG component software to cope with these two key requirements:

3. Proposed Approach

We propose an architecture for the SVG engine to address this challenging problem. The engine is designed for NetFront3 ™, de fact browser software for Non-PC devices. Our "flow centralization" architecture promotes the modularity and customizability. This facilitates loose coupling among Slave modules, provides encapsulation in Slave implementations. This makes the Slave customization easy and tunable, and improves the software maintenance in a wide range of porting environments.

Flow centralization architecture consists of two components: Kernel and Slave. All messages and events are pulled by a central component "Kernel" from following "Slave" component. Then, the Kernel passes it to other appropriate target Slave component. All the Slave component are passive (static). The Kernel is the unique active component to perform application specific operations and control Slaves. This achieves loose coupling, a key of the modularity. Because Slaves have no direct dependency to other Slaves and Kernels encapsulate such dependencies instead. The kernel slave architecture is shown in Figure 1 . This architecture facilitates the flexibility that the Kernel itself can be a slave for another Kernel.

kernel_slave_architecture.png

Figure 1: Kernel Slave Architecture

The Kernel enables the module abstraction in Slave component implementations. This architecture also facilitates the application specific performance tuning. SVG applications include a web browser plug-in, an image decoder, a map navigator and GUI widgets. The requirements and implementation strategies differ in each application. We can reuse the Slave components in each application when we tune the Kernel to cope with the different requirements. In a web browser plug-in case, it needs user interactions, animations and DOM bindings. It requires XML document trees as an intermediate data model and compiled rendering streams like OpenGL's display lists. An image decoder case does not need these functions. In this case, separate Kernel implementations provide the optimal footprint and performance. The customization configuration for choosing hot spot applications is depicted in Figure 2 . This approach has an advantage that the dependency can be flexibly managed by the centralized Kernel module. It enables the customized selection of slave modules. It realizes the customized footprint for the best suit configuration for each digital appliance. The Kernel is customized for each SVG application. The slave components include the following:

application_hotspot.png

Figure 2: Customization Configuration for Choosing Application Hot Spots

4. Application Examples

4.1 Stand-alone player and Browser Plug-in application

The Player configuration is shown in Figure 3 This depicts the full implementation of the flow-centralization approach. There is no removable component. This facilitates the maximum footprint version.

player_configuration.png

Figure 3: Player Configuration

4.2 Image Decoder

The Image decoder configuration is shown in Figure 4 The removable components include:

This is an example of the minimum footprint version. It facilitates the one-pass rendering because the render obtains the input directly from SAX parser. There are several restrictions when the one-pass rendering is realized. The restrictions include:

These restrictions are shared with librsvg implementations.

image_decoder_configuration.png

Figure 4: Image Decoder Configuration

4.3 Map Viewers

The map viewer configuration is shown in Figure 5 The removable components include:

The DisplayList needs customization. When the DisplayList is customized, the performance can be improved. In this case, the dynamic style change does not occur, the DisplayList can utilized the dedicated data structure to improve the performance. The examples include the aggressive cache use. The DisplayList obtains the input directly from the XML parser module without DOM intervention.

map_viewer_configuration.png

Figure 5: Map Viewer Configuration

4.4 Compound Document Browser

The compound document browser configuration is shown in Figure 6 The removable components include:

The modules are shared with the main browser. The network, XML Parser, and DOM are embedded in the main browser part. DOM handling is managed by the main browser. The DisplayList obtains the input from DOM. Each slave module is independent. This features the abstraction of the DOM API because SVG side does not define the DOM API. It enables the porting to a wide range of browsers.

compound_document_configuration.png

Figure 6: Compound Document Browser Configuration

4.5 Other Applications

Other applications include editors and dynamic UI components. The dynamic UI components are used for implementing the telecom carrier specific fancy graphic user interfaces in the advanced mobile handsets. This kind of visual interface is expected to improve the user interface of digital appliances with its highly dynamic capabilities. It also facilitates the context-aware user interface embedded in the digital appliance use scenes.

5. Discussion

The Mozilla SVG [mozillasvg] is a compound document browser in an open source project. The processing model is an enhancement of the legacy HTML browser. The DOM engine and the CSS engine are shared with the Mozilla browser. These components construct the basic framework of the SVG applications, therefore, it is difficult to separate these components.

Batik [batik] is a SVG toolkit in an open source project. In this toolkit, DOM is an independent module. It assumes the GVT processing model. Therefore, it cannot implement one-pass graphic rendering.

One of the image decoder and browser plug-in examples is librsvg [librsvg] . It facilitates the one-pass graphic rendering. It does not have any internal processing model and lacks the support of DOM.

The customizability is compared among these implementations in Table 1 .

Customizability Comparison
Network XML Parser Style Resolver DOM Internal Model SMIL Animation Renderer
Mozilla N/A
Batik N/A N/A
librsvg N/A N/A N/A N/A
Flow Centralization

Table 1

All implementations need a style resolver and a renderer. Our approach is flexible to customize all other components. It also enables the flexible integration of SMIL. This flexible integration can cover the other XML applications. The proposed approach is modular and highly flexible in the footprint optimization in a wide range of SVG applications. In the embedded Internet application development, this approach depicts the third stage of the footprint optimization. In the first stage, the compactness was achieved in an all-in-one approach. In the second stage, the modular approach was taken to cope with the expanding Internet applications. In the third stage, the micro component provides the flexible component integration to a range of XML applications like SVG application in a diverse and restricted digital appliance environment.

6. Conclusion

The proposed flow centralization architecture provides the portability and customizability with the optimal footprint and performance. The advantage of the architecture is shown in several SVG application examples. This approach enables embedding SVG features into a wide range of execution environments without restricting any embedding configurations. This improves both of portability and footprint optimization in the rich media digital appliance environment. This approach facilitates the context-aware dynamic visual interface in the wide range of digital appliances.

Bibliography

[smil12]
Ayars, J. et al (Ed): Synchronized Multimedia Integration Language (SMIL 2.0) , W3C Recommendation 07 August 2001 (Aug. 2001) ( available at http://www.w3.org/TR/2001/REC-smil20-20010807/ )
[baker00]
Baker, M., Ishikawa, M., Matsui, S., Stark, P., Wugofsky, and T., Yamakami, T.: XHTML ™ Basic, W3C Recommendation 19 December 2000, (Dec. 2000). ( available at http://www.w3.org/TR/xhtml-basic )
[cerf01]
Cerf, V.: Beyond the Post-PC Internet, CACM, Vol. 44, No. 9, pp. 34--37 (Sep. 2001)
[svg01]
Ferraiolo, J. (Ed): Scalable Vector Graphics (SVG) 1.0 Specification, Recommendation 04 September 2001 (Sep. 2001) ( available at http://www.w3.org/TR/2001/REC-SVG-20010904/ )
[mozillasvg]
Flitze, A.: Mozilla SVG Resources (2004), ( available at http://www.croczilla.com/svg )
[librsvg]
librsvg project: The leading free SVG renderer for UNIX, ( available at http://librsvg.sourceforge.net/ )
[wap02]
WAP Forum ™: XHTML ™ Mobile Profile, WAP-277-XHTMLMP-20011029-a.pdf, ( available at http://www.wapforum.org/ )
[batik]
xml.aparch.org Project: Batik - Architecture Overvierw (2002), ( available at http://xml.apache.org/batik/architecture.html )
[yam2002pcm]
Yamakami, T.: Leveraging information appliances: A browser architecture perspective in the mobile multimedia age., In Y.-C. Chen, L.-W. Chang, and C.-T. Hsu, editors, Advances in Multimedia Information Processing - PCM 2002, Third IEEE Pacific Rim Conference on Multimedia, volume LNCS 2532, pages 1--8. Springer Verlag, December 2002.

XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.