Making SVG a Web Service in a Message-based MVC Architecture

Keywords: SVG, Web Service, message, MVC, Publish/Subscribe

Xiaohong Qiu,
Ph.D student
EECS Department, Syracuse University.
Research work performed at Community Grids Lab, Indiana University
Bloomington, Indiana


Xiaohong Qiu's current research focuses on a universal modular design for next generation of software applications with a underlying messaging architecture that linkages services together. The model converges desktop applications, distributed applications, and Internet collaboration. Her dissertation topic is message-based MVC architecture for distributed and desktop applications.

Shrideep Pallickara,
Community Grids Lab, Indiana University


Ahmet Uyar,
Ph.D student, EECS Department, Syracuse University.
Community Grids Lab, Indiana University



We reformulate Scalable Vector Graphics browser in a Web Service architecture separating the rendering from the W3C DOM processing of events. We describe this in a message-based Model-View-Controller (M-MVC) architecture and implement it with a powerful publish-subscribe messaging infrastructure. A Web Services oriented architecture with services loosely coupled by the exchange of messages is becoming an increasingly important feature in the deployment of Internet applications. The broad applicability of this approach includes enterprise software, e-Learning, e-Science and e-Business. Our work provides a general framework for integrating Desktop and Web Service applications. We summarize the performance results from detailed tests of our prototype. These measurements demonstrate the viability of our approach and identify some key issues influencing the performance of message-based Web and Desktop applications. We note how our architecture elegantly supports the major paradigms for collaboration.

Table of Contents

1. Introduction
2. Background
3. Overview of MVC approaches
     3.1 Variants of MVC
     3.2 Message-based MVC and Web Services
     3.3 Message-based MVC and SVG
4. Performance
5. Conclusions

1. Introduction

In this paper, we discuss the conversion of Batik SVG browser [BATIK] , a desktop application, into a distributed system. Specifically, it includes decomposition of Batik SVG browser into separate "View" and "Model" components; modification of its architecture from traditional method-based MVC [MVC] into message-based MVC [M-MVC] . The "View" including client interface components (Swing GUI and GVT rendering) is dynamically downloaded to client. The "Model" consisting of DOM and JavaScript modules (see fig. 4) naturally becomes a Web Service running on a Web server. Event-based messages, which communicate through our messaging infrastructure ─ NaradaBrokering [NARADABROKERING] , play the role of the "Controller".

In the following sections, we first give a brief introduction to the state-of-the-art technology in areas of message-based (Web) service oriented technologies. Under the general background, we provide a roadmap towards our research effort of M-MVC as a generic solution in design space for building distributed applications. A summary of several variations of MVC applications follows by a detailed discussion in the SVG experiments. We give elaborate performance tests and analysis corresponding results to quantify the correlations between system behavior (semantic and performance), user interaction pattern (typical mouse event), and environmental factors (settings of clients and messaging broker, operating system, and network). Conclusions include the lessons we’ve learnt from these experiments.

2. Background

Rapid growth of network and Internet technologies has brought fundamental changes in the new generation of computer technology. Particularly, continuous improvement of computer CPU speed [MOORE] and network bandwidth [GILDER] enables design and implementation of new software architecture with satisfactory performance that allows development of many capabilities previously impossible. On the other hand, the latest deployment of Web Services [WEBSERVICE] and service oriented architecture ( SOA [SOA] ) with loosely coupled messages is expected to replace traditional client/server and distributed system models such as CORBA and provides a more general and dynamic framework that supports scalability and interoperability among distributed software assets.

From a technical perspective, there are some distinctive features. Traditional distributed object model employs exchanging coupled-messages through distributed version of method calls and returns, such as those in RPC-based and RMI-based platforms. Message-based approach produces lightweight loosely coupled services supporting asynchronous messages linkage (e.g. one-way transmission from sender to receiver). The messages are targeted but not directly coupled, which enable software level routing mechanism to provide platform independent communication paradigms (e.g. publish/subscribe) with excellent scalability. Further more, XML-based interface and specifications such as Simple Object Access Protocol (SOAP) [SOAP] and Web Services Description Language (WSDL) [WSDL] provide a generic interoperable platform among heterogeneous systems, which increase interoperability and reusability of existing software components.

In architectural view, a virtual distributed operating system is forming as an intermediary layer over the conventional bit-level Internet infrastructure (physical network and protocols such as IP, TCP UDP, HTTP, and SSH) . One current effort focuses on building of messaging infrastructure that provides assurance of communication services (reliability, QoS, security, firewall tunneling, event notification, publish/subscribe, overlay, and peer-to-peer) tailoring for the support of diverse applications. The separation of top level application architecture from underlying messaging infrastructure simplifies the deployment overhead of applications and significantly increases application portability.

The overall innovation and advancement in computer technologies provides a great opportunity and foundation for deploying sophisticated distributed applications (e.g. Internet collaboration enabling virtual enterprises and large-scale distributed computing). Over the decade, the architecture of network-based applications keeps evolving ─ from earlier client/server, to multi-tier, middleware, peer-to-peer and overlay models. There’re also many systems provide framework and standard APIs to address interoperable relationship between client graphics user interface (GUI) and server side application behavior. Typical examples are JSP [JSP] for J2EE (or similarly ASP for .Net), JSR-168 [JSR-168] and WSRP [WSRP] , and REST [REST] . Each example addresses issues in targeted problem scope. However, one still needs a paradigm with a highly flexible architecture adapting to fast changes and requirements in real world. This motivates us to look into some intrinsic design concepts of client system (MVC [MVC] ), parallel system (messaging [MPI] ), distributed system (Web Services [WEBSERVICE] ), and Internet collaboration (double-linked multiple-stage pipeline model [FOX 2003] ). We pursue a generalization of the existing models aimed at simplicity of building applications with following properties:

As our approach is based on investigation of MVC paradigm and message-based Web services, which are fundamental design models from desktop to distributed applications, deployment of a uniform architecture for desktop and distributed applications with automatic collaboration capability has general importance and we have detailed discussions of the design principles in another paper [QIU-09-07-04] . In this paper, we will provide our solutions to the following questions with focus on SVG implementation:

3. Overview of MVC approaches

3.1 Variants of MVC

The concept of Model-View-Controller ((MVC) [MVC] initially appeared openly in Smalltalk-80 [SMALLTALK] . It inherited from object-oriented programming idea of Simula 67 [SIMULA67] with integration of graphical user interfaces and interactive program execution. MVC proposed the logical separation of presentation from behavior and data structure in an interactive multiple windows programming environment with the triad of Model, View, and Controller components. Classic MVC paradigm is frequently used in almost all modern desktop architecture design and is popular in interactive applications. As a design paradigm, MVC is nothing new in the object-oriented programming world. However, it is the realization ─ the MVC pattern is particularly well-suited to addressing many of the fundamental problems inherent in building Web-based or distributed applications that rejuvenates the MVC concept.

There’re many ways to classify MVC approaches according to the properties of decomposition strategies, interactive pattern, and communication mechanism. We present three examples to illustrate how interoperable relationship between the model and the view components impacts an application’s architecture. The approaches depicted in fig.1 are: a) classic method-based model; b) request/response model in method-based or message-based style; c) message-based publish/subscribe model. Note that the controller can be implemented as a separate class, combined with model and/or view components, or contained in messages in the scenarios. The sub-graphics of a, b, and c delineate a trend of system design from tight coupling to loose coupling, which fairly reflects the trace of evolution of standalone desktop application (single-user environment), client/server Web application, and distributed application with group communication enhancement. A more detailed summarization with each category and corresponding applications is shown in table 1.


In the communication column, "method-based" and "message-based" mechanism defines the interaction interface: either through a coupled pair of method call and return or uncoupled messages. Accordingly, the degree of coupling is indicated by this feature. However, in terms of timing, a typical runtime method call (e.g. Java) in a standalone single processor environment is at microsecond level while millisecond and 100 milliseconds are typically found for the communication in intranet and internet scope [FOX04] . As these different timescales imply different fundamental building ground for application architecture and viability, we give in depth analysis of performance through our experiments with batik SVG browser [BATIK] , which converts a desktop application to a distributed system.

The communication patterns refer to the three models depicted in fig. 1. Interactive pattern describes the interoperating relationship between the model and the view: one-to-one, one-to-many, and many-to-many. The power of MVC modularity is enabling component reusability and we propose Single Model Multiple View (SMMV) and Multiple Model Multiple View (MMVC) as the models corresponding to the latter two patterns. SMMV is widely used in client/server Web applications with multiple clients (through Web browsers) accessing a server, as well as legacy interactive applications (e.g. Microsoft Windows and Office) with multiples window layouts sharing the same data structure. The problem of SMMV is that it does not provide direct support for universal access (for clients of heterogeneous platform or interface); rather it requires extra customization for the view. For example, to make a SVG browser accessible for both Windows and cellular phone clients with consistent semantics and visual output, an adaptor class is needed for the thin client rendering. MMMV is a generalization of SMMV, which enables ubiquity with the customization done from the model at server side. JavaServer Faces (JSF) [JSF] , which extends JavaServer Pages (JSP) [JSP] and Java Servlet [SERVLET] technology, allows a multi-tier model component with a JSP Web tier and backend business logic. This illustrates that our classification is incomplete as often the Web tier has multiple models but there is only single business logic. One would classify these systems as SMMV or MMMV depending on the relative importance of Web tier and business logic. For further discussion, we provided details of participatory learning vs. instructor-led learning as collaborative Web Service models based on MMVC vs. SMMV [QIU-09-07-04] , which extend the idea of “shared input port” vs. “shared output port” collaboration framework [FOX 2003] .

Web Services for Remote Portlets (WSRP) [WSRP] is a communication protocol between portal servers and backend portlet containers, while Java Specification Request (JSR) 168 [JSR-168] is a Java API for portlets to work with WSRP portals. These two standards enable aggregation of portlets so that different portal products are available to an organization, typically through a Web browser at client tier. JSR-168 and WSRP are in orthogonal direction in architecture space and they can be implemented in either method-based or message-based manner. However, they define the nature of the messaging for message-based MVC, which produces an important technology in support of Web Service applications.  

Representational State Transfer (REST) [REST] proposed a simplified version of message-based approach that extended from client/server Web application architecture. M-MVC and REST both are message-based architecture. The distinctions are: a) REST addresses scalability, reliability, tunneling through firewall and security (SSL) issues within the containing system; M-MVC assumes that application level architecture is separated from underlying messaging infrastructure and the latter provides various communication services (e.g. QoS, fault-tolerance, event notification, and publish/subscribe). b) REST is suitable for less time critical collaboration through sharing of application state over HTTP protocol; M-MVC support both asynchronous and synchronous collaboration through sharing of event (the change of application state) and allows dynamic binding to transportation protocols. For the timescales of synchronous collaboration, the affordable latency for an audio/video conferencing system (over UDP) is 200 milliseconds with client buffering and pre-fetching and 20 milliseconds for SVG Web Services experiment (over TCP) of this paper with vector events and combined rendering optimization. c) REST is designed for Web application; M-MVC is proposed as a uniform architecture for both client and distributed application. d) REST is a SMMV model that uses request/response interactive interface; M-MVC can be deployed in either SMMV or MMMV with publish/subscribe scheme.


In summary, table 1shows different MVC application examples that decrease in degree of coupling between model and view components - from client to distributed domain with method-based to message-based interoperation. At meanwhile, loosely coupled messages facilitate the overall system design with a more distributed, scalable and interoperable communication mechanism, which enables a general framework over heterogeneous platforms. M-MVC is a high-level application architecture that converges desktop application and distributed application with automatic collaboration and universal access support. Web Service is naturally fitting in to M-MVC and we elaborate the composition in subsequent section.

3.2 Message-based MVC and Web Services

Web Services provide interfaces for service oriented architecture ( SOA ). Ultimately, the services would offer GUI to end users for access. Nevertheless, Web Services (or SOA) do not address system decomposition issue and application developers have to determine which component should reside in the service vs. client interface. Instead of making general remarks based on component functions (e.g. business logic and query for database belong to service), here we illustrate a systematic approach with a Message-based MVC architecture.


Among many decomposition possibilities, fig. 2 delineates M-MVC architecture being deployed in a three-stage pipeline model. A complete pass of an interactive process starts with an input event initiated by user input (e.g. a mouse click or a key stroke), interpretation and computation along the multiple stages, and ends with an output mostly consisting of text or graphics for re-display of the updated image buffer, each stage effectively is passed by twice during the procedure ─ one is along event propagation path; the other is on rendering approach. Mapping to the SVG browser experiment (see fig. 4), Raw UI events represent mouse (or key) events while High Level UI and Semantic events imply DOM and application events. Note that decoupled messages are exchanged via event brokers of our underlying messaging infrastructure, NaradaBorkering [NARADABROKERING] , in a publish/subscribe scheme. We’ve elaborated this mechanism in another paper for two collaborative patterns based on SMMV and MMMV model [QIU-23-07-04] .

The Web Services composition of M-MVC is further depicted in fig. 3, which embracing three elements: NaradaBrokering (NB) that provides communication services (e.g. HTTP, UDP, and TCP transportation protocols); SOAP (header, body, and encoding rules) ; and application (event messages) . Normally, SOAP messages use text encoding (XML format) and are carried with HTTP protocol through port 80. However, the overhead of replicated information in each envelope and header, XML parsing, and HTTP protocol etc. added up can make this approach very inefficient. We use a high performance approach ─ namely, only keeping initial negotiation message (e.g. message 1) with XML format whilst encoding subsequent messages ( message i ) with agreed “mapped SOAP” format (e.g. native format for serialized event object) through NB transports in a changed port. This can be achieved by special encoding rules with proper settings in SOAP header [HPSTREAMING] . Next release of NaradaBorkering will include implementation of this algorithm in support of high performance streaming for Web Services. Apart from performance gains, which particularly important for time critical applications, it allows a uniform interface for native transportation and Web Services conformation. Our performance testing with SVG experiments generate consistent results for both scenarios..


3.3 Message-based MVC and SVG

Traditionally, desktop applications employ MVC paradigm in method-based interactions between the components to achieve high performance for interactive applications. Publish/subscribe scheme enables event-based programming to link event source component and event listeners’ components asynchronously through callback methods while event messages are hidden at system level. This approach is widely used in object-oriented systems including Java AWT, Swing, and applications built on top of them such as Batik SVG browser. We propose a different approach of “explicit message-based MVC” paradigm (M-MVC) for applications deployment [QIU-23-06-03] , which replaces hidden method-based events at Java run-time level by exposed messages. By doing so, the tightly coupled connections between different parts of an application are replaced by a loosely coupled messaging linkage service model with flexibility, distribution, and scaling advantages.

We have a complete analysis of constituent components and their interactive relationship for the Batik SVG browser. The logistic components can be decomposed into a three-stage pipeline, as illustrated in fig. 4. Theoretically, any parts with natural event linkage between client user interface and computation core can produce web services coordinated in a single application. We performed substantial experimentations to find the best decomposition point, which preserved system functionalities while avoiding excessive re-engineering of the software. We chose to split the SVG browser between the DOM and GVT tree, which allows generalization to other DOM applications.


4. Performance

We have performed a series of performance measurements to test the effectiveness of our approach. There are many variables including position of Model, View, and Event Broker NaradaBrokering and the choice of type of host computer and network connection. One can also vary the application running in the Model Web service. One can investigate either the single Model and View or the collaborative models. We list scenarios for a set of performance tests in this paper: system configurations in table 2 and testing environment settings in table 3. Tables 4 to 6 contain a selection of measured data while more extensive information including histograms can be found in [M-MVC] .


The results tables 4 to 5 record times between the processing markers T0, T1, and T4 shown in fig. 4 (times for other markers are given in [M-MVC] ). Each row of the table corresponds to averages over many event processing sequences i.e. to averages over processing of mouse events with understanding that for efficiency strings of mouse move events (generated by the system as each pixel is passed) are passed as single vector events. Note from the figure that events start on the View as a User Interface Mouse action and the pipeline sends them through the Model and back to the View. In tables 4 and 5, we used the same JavaScript chess program described in earlier papers [SVGOPEN03] . All events are W3C DOM compliant as required by the SVG application. T0 represents the time that messages are transmitted from View to Mode after initial processing in View of mouse event. T1, recorded in the View, represents the time that the associated events are returned from the Model to the View. A given user interface event generates several model events which are sent back to the Viewas separate messages and we record in tables 4 and 5 the times of the first and last messages in this returned sequence. The final time recorded T4 corresponds to the end of the rendering update in the View component. All times are recorded relative to the processing marker T0. We record mean, statistical error in the mean and standard deviation of the distribution. Essentially all plots show broad distributions with large standard deviations.

In table 4, we record the difference between types of mouse events by recording both all mouse down processing sequences and the results averaged over mouse move, mouse down and mouse up. Table 5 records times for a special bounce back event generated automatically for these runs by the Model component as soon as it receives a message from the View. Table 6 does not concern Batik and SVG at all. It records times for the View sending a message to NaradaBrokering and recording its return (2 hop events in table 6); the 4 hop events correspond to messages going from View location to NaradaBrokering to Model location and back. In all cases for table 6, a simple Java program generating events of the same structure as used in SVG was used. However this program did no further work on the message – only its communication. So this table 6 records the natural overhead from NaradaBrokering. This is about 2 milliseconds per event but is increased in some entries in table 6 and in the bounce-back event of table 5 by interference between communication and other active threads on the Model and View computers. This interference probably accounts for the broad distribution seen in essentially all results. We have studies of clean unloaded Linux and Windows machines documenting the 2 millisecond per hop NaradaBrokering natural overhead. Note configuration 2 includes the fastest client – desktop3 – and this impact is very clear in all the tables. It is worth noting that Moore’s law helps M-MVC for increasing client performance will reduce the M-MVC overhead and the better results on desktop3 highlight this.


Note that much of the time delay from Model to View comes from waiting for a CPU that has been scheduled to a different (from the communication) Batik thread. For example comparing the first two rows of tables 5 and 6 (Bounce back time versus 4 hops), the two tables are measuring the same computation and communication time but table 5 is 10-20 milliseconds longer than table 6. This can be explained by the large (extraneous to message passing) computations on the Model and View in table 5 which delay the processing of messages which increases both the mean and the standard deviation – as this delay in scheduling the communication thread has a large variability.

The measurements in the first two columns are an upper limit on the overhead due to the decomposition and this varies from 20-40 ms with most measurements at the lower end of this range. This holds for all broker positions from collocation in the desktop to remote location (in Indianapolis with the Clients in Bloomington). We call this an upper limit as it is processed concurrently with essential computation (the thread scheduling issue) and we get some improvement in M-MVC due to concurrent processing between Model to View for operations sequentialized in the conventional version. The difference between column 1 and column 3 of table 5 measures the 30 ms typically spent on Model processing; this is an underestimate as it does not include the scheduling delay discussed above – an overestimate is gotten by replacing column 1 numbers from table 5 with the 4 hop measurements of table 6. Comparing columns 1 and 2 of table 4 shows that mouse down events are processed quicker than average – that is because most of chess application processing used in the Model occurs for Mouse up events. Comparing columns 1 and 2 of table 5 shows the 10-15 ms processing needed on the Model before any events are generated in response to a given mouse event received from the View.

In summary, these early results show the main issues to be the algorithmic effect of breaking the code into two, the network and broker overhead, and thread scheduling interference of operating system between interfaces of SVG application and messaging brokers. Our initial tests show the client to server and back transit time is only 20% of the total processing time in the scenarios where the message broker is local. Note that the Batik SVG Browser already uses a 20 ms buffer in its rendering engine to collect all updates occurring in time windows of this size; M-MVC adds a similar overhead. Little optimization has been attempted as the current results indicate that the processing overheads to be already acceptable. We will in the near future use Linux clients and study the large thread scheduling effects in more detail.

5. Conclusions

We've presented a uniform architecture with message-based MVC (M-MVC) service model which unifies desktop and Web applications. Our experiments with SVG suggest that the structural change from traditional method-based MVC to message-based MVC is a viable approach that converts a tightly coupled system to a distributed system of SOA with loose messaging linkage. However, building applications centered on messages should provide consistent functionalities and acceptable performance for both design spaces. This approach requires the procedure of deployment to follow some principles: it is essential for the system to have a strict modularized structure for the split (or distribution), an effective interactive model with sequential event processing design for synchronization, and serialization capability of streaming event messages for communication. The performance testing results show that the overall system performance is influenced by factors inherent from the logistic split of the code into two, messaging cost (e.g. network latency and overhead of event broker) and environment fluctuation (e.g. operating system and thread scheduling). Other research is undergoing in our laboratory in extension of these ideas to other presentation style applications including OpenOffice and PowerPoint using vendor APIs.


Apache Batik project of Scalable Vector Graphics at
[FOX 2003]
Geoffrey Fox, Hasan Bulut, Kangseok Kim, Sung-Hoon Ko, Sangmi Lee, Sangyoon Oh, Shrideep Pallickara, Xiaohong Qiu, Ahmet Uyar, Minjun Wang, Wenjun Wu, Collaborative Web Services and Peer-to-Peer Grids , presented at 2003 Collaborative Technologies Symposium Orlando January 20 2003.
Geoffrey Fox, The rule of the millisecond, CISE magazine, March/April 2004. Available at
George Gilder, Telecosm: The World After Bandwidth Abundance, Free Press, 07 May, 2002, Gilder's law is an assertion which states that "network andwidth grows at least three times faster than computer power."’s%20Law
Geoffrey Fox, Harshawardhan Gadgil, Shrideep Pallickara, Marlon Pierce, Robert L. Grossman, Yunhong Gu, David Hanley, Xinwei Hong, High Performance Data Streaming in Service Architecture, technical report, July 2004.
Sun Microsystems, JavaServer Faces (JSF) Technology , Sun Microsystems.
Sun Microsystems, JavaServer Paces (JSP) Technology, Sun Microsystems.
Sun Microsystems, JavaServer Page Technolgoy – White Paper, Sun Microsystems.
Sun Microsystems,Java Specification Requests: Portlet Specification, Sun Microsystems.
Xiaohong Qiu, Message-based MVC Architecture for Distributed and Desktop Applications, Ph.D. dissertation, Syracuse University, 2004.
Gordon E. Moore, co-founder of Intel Corporation, Moore’s law on computer performance increasing exponentially in time.’s_Law According to Moore’s law, computer processing powers can double every 18 months.
MPIF,MPI: A Message Passing Interface Standard,
G. Lee, Object oriented GUI application development, Prentice Hall, 1994. ISBN: 0-13-363086-2.
Community Grids Lab NaradaBrokering system at
Xiaohong Qiu, Bryan Carpenter, and Geoffrey Fox, Internet Collaboration using the W3C Document Object Model , Proceedings of the 2003 International Conference on Internet Computing, Las Vegas, June, 2003.
Xiaohong Qiu, Desktop Applications with Web Service in a Message-based MVC Paradigm, IEEE International Conference on Web Services, San Diego, California, July 2004.
Xiaohong Qiu and Anumit Jooloor, Web Services Architecture for e-Learning, International Conference on Education and Information Systems: Technologies and Applications, Orlando, Florida, July 2004.
Roy Thomas Fielding, Architectural Styles and the Design of Network-based Software Architectures, Ph.D. dissertation, 2000. Representational State Transfer (REST) is the name of the architectural style for distributed hypermedia systems of the thesis.
Sun Microsystems, Java Servlet Technology, Sun Microsystems.
Graham M. Birtwistle, Ole-Johan Dahl, Bjoern Myhrhaug, and Kristen Nygaard, SIMULA BEGIN, Studentlitteratur, Lund, Sweden, 1973. ISBN 91-44-06211-7. Simula67 was the first object-oriented programming language and a predecessor of Smalltalk and C++.
A Goldberg, Smalltalk-80: The Interactive Programming Environmen, Addison Wesley, 1984
Service Oriented Architecture Service Oriented Architecture or SOA is a loosely coupled linkage of distributed software. See D. DeRoure, A. Dunlop, G. Fox, P. Henderson, A. Hey, N. Paton, S. Newhouse, S. Parastatidis, A. Tefethen, and P. Watson, Web Service Grids: an Evolutionary Approach, UK e-Science Core Programme Directorate Position Paper, July 2004.
W3C, Simple Object Access Protocol (SOAP) , W3C.
Xiaohong Qiu, Bryan Carpenter and Geoffrey C. Fox, Collaboration SVG as A Web Service, Proceedings of SVG Open 2003, Vancouver, Canada, July 2003.
W3C Web Services at
W3C, Services Description Language (WSDL) 1.1, W3C, March, 2001.
OASIS, Web Services for Remote Portlets (WSRP) standard , SWRP is a standard for Portals to access and display portlets that are hosted on a remote server.

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