SVG for Embedded Systems

Damir Jezic
Intesis d.o.o.

Aleja Blaza Jurisica 9
10040 Zagreb
Hrvatska (Croatia)
fax: +385 1 232 8365

Keywords: Embedded System; IDE; SVG Scripting


Open, modular, and flexible design, based on standards, is an important prerequisite for efficient software products architecture. XML and its application SVG perfectly fit into these design requirements and open a new era in software products development and standardization.

XML and SVG are emerging as a real part of concrete applications for Personal Computers and the Internet world. Although these technologies could be immediately very useful in the Embedded Systems world, too, because of additional requirements for such systems, different technical and architectural problems must still be efficiently solved in order to gain possible XML and SVG benefits. Some of the benefits will be standardized, easy and powerful cooperation between Embedded Systems and Personal Computers applications over Internet, standardization of development tools and environments, standardization of problem domain libraries etc.

SVG specification creators have already adapted and modularized the SVG specification in order to make it suitable for different kinds of systems, and SVG Tiny and SVG Basic profiles are the first candidates to be really applied in the Embedded Systems world.

eSVG is a project aiming to close the mentioned gap between the expected benefits and present problems of SVG implementation in Embedded Systems. eSVG package offers efficient SVG Viewer and comfortable Integrated Development Environment (JS eSVG IDE) to speed up SVG-based systems development.



Embedded Systems, as a specific computer systems area, have particular design requirements. As the main difference towards the generally known Personal Computers world, Embedded Systems closely interact with the physical world surrounding them. Additional criteria, such as real-time behavior and reactivity, robustness, concurrency and optimal resources usage are of paramount importance in all the computation they perform. Embedded Systems are computer-based systems "embedded" in airplanes, ships, cars, security systems, telephones, manufacturing and process control systems, fax machines and printers, toys, audio and video equipment, weapons, robots, medical instruments etc.

Up to now, the Embedded Systems have been implemented using specialized, closed technologies and systems. Each particular implemented solution has its own controllers, communication infrastructure and user interfaces. But now, XML, SVG, SOAP and related web-based technologies could change these trends.

The eSVG project is already available at the market as unique product, i.e. as the package which contains stand alone, easy portable eSVG Viewer and very user friendly JS eSVG Integrated Development Environment. For Pocket PC and other Windows CE applications, eSVG already provides powerful JS eSVG ActiveX control, with large part of SVG Mobile specification implemented, including full ECMA JavaScript support.


Goals of the project

The main, already reached goal of eSVG project is to speed up SVG based systems development, and to provide simple portability and usability of stand alone eSVG Viewer. eSVG project offers to the market an very efficient SVG Viewer, SVG ActiveX control, and very powerful Integrated Development Environment (JS eSVG IDE). JS eSVG IDE supports rapid and comfortable development of eSVG applications containing both SVG and ECMA JavaScript files. It is optimized for run-time debugging either on the host PC (Simulator) or on remote target devices (UniOP, Pocket PC). During remote run-time debugging, eSVG application is executed just on the target device.

Generally, the eSVG project is aiming to close the mentioned gap between the expected benefits and present problems of SVG and JavaScript implementations in Embedded Systems. eSVG project scope is to bring into the embedded world all needed SVG and JavaScript advantages and to avoid their possible disadvantages.

Because of its modularity and easy portability, eSVG also becomes useful and reusable part of other projects, with similar scopes, to apply wide used web-based technologies in Embedded Systems.

As a partner of EXOR International, Intesis is involved in exciting R&D projects aiming to develop the next generation of Human Machine Interface architectures (HMI, somewhere called also Man Machine Interface - MMI), based on web-technologies and suitable for a different kind of Embedded Systems. One very interesting bigger project sponsored by EXOR International where eSVG is used is Web Control Panel (WCP [1]) system development, and important eSVG project goal is to give its maximum contribution to the WCP system, too.

The WCP is software framework designed to easily create, maintain and exploit web sites and user interfaces for web-based (remote) control applications. It contains web templates, libraries of synoptic symbols and software tools. It does not require any knowledge of web technologies to be effectively used.

The WCP system consists of an editing tool (WCP Editor), a client part (WCP client) and a server part (WCP Server). By using of the WCP Editor and eGOs, users will be able to create powerful human machine interfaces quickly and easily. eGO is abbreviation for Exor Graphic Objects, and represents different domain specific graphic objects realized by standard, well-known and wide used web technologies. Example of eGOs for control systems world are: buttons, text fields, switches, gauges, alarms, trends etc.

JS eSVG IDE is important subsystem of WCP Editor, and resolves needed WCP functionality of efficient SVG scripting, by ECMA standard JavaScript. Except for the SVG scripting, JS eSVG IDE is also useful for scripting of other parts of Embedded Systems.

eSVG Viewer is important subsystem of WCP Client, and must be very configurable and easily portable to all kinds of possible WCP Clients. eSVG Viewer must be able to fulfill its demanding role inside the WCP system, to work efficiently on all kinds of devices, even those OS-less, or with minimal resources, or with maximum real-time constraints.

WCP system provides a simulation environment for testing created HMI before the upload on the WCP server. The simulation environment takes care to generate appropriate stimuli and values for the controlled data. Once developed and tested on the simulator, the HMI is uploaded on the WCP server, and it will act there both as controller and HMI.


WCP system

Figure 1: WCP system


Architecture of the System

eSVG project is based on ORMIDE concepts (Open architecture, Real time, Multithreading, Integrated Development Environment) [3]. Open architecture refers to both open-language and open-target architecture. There are two main applications: host level ODS (ORMIDE Developer Studio) and target-level ORE (ORMIDE Real Engine). ORE is remote target application that provides simple ORE components replacing, simple porting to any target, parallel running of more tasks and debugging support for ODS. ODS and ORE communicate via ARS (Asynchronous Response System) protocol. ARS protocol defines format for ODS commands and ORE responses.


eSVG system components

Figure 2: eSVG system components


In eSVG project ORE is configured to use SVG-based Shell and JavaScript Language. eSVG scripting is based on SpiderMonkey (JavaScript-C) Engine. XML parsing is realized using Expat.

ORE Core is the main ORE component that consists of the following modules: Interface processor, ORE kernel, Communication unit, and Debugging unit. ORE Core is compact, easy portable and completely written in ANSI C.


ORE Core modules

Figure 3: ORE Core modules


The main ORE strength are simple interfaces. Interfaces simplicity is provided by interface processor. It is an ORE Core module that translates interface entries to the internal demands and vice versa. Interface processor is the carrier of ORMIDE open architecture.


ORE Core Interfaces

Figure 4: ORE Core Interfaces


ODS is a local host windows application which provides simple and comfortable program writing, program file handling and parallel debugging of multiple tasks.
ODS consists of the following ODS modules: ODS views, MLE, Command processor, and Communication unit. ODS views are visual ODS modules. They provide the largest functional ODS part - advanced GUI. ODS views are:

1. Source View - for program writing by advanced language oriented editor: MLE (Multi-Language Editor). Task tracing through the program files is also performed in this view.
2. Workspace - for program file handling. It includes program file uploading from remote target, downloading to remote target, loading from local host, saving to local host and opening in ODS Source View.
3. Task View - the main view for parallel debugging of multiple tasks running simultaneously. It displays basic task context elements for all active tasks: task priority, repeating form, tracing position, and debugging state. It also displays basic program context element program name of the parent program.
4. Stack View - displays call stack for currently selected task in Task View. Call stack is a task context element.
5. Variable View - displays dynamic language objects for currently selected task in Task View. Language objects are language context elements. Language context is a task context element.
6. Output Window - consists of more panes that record various internal ODS events or external events received from ORE.

Command processor processes internal ODS requests between ODS views and external requests from ODS views to ORE. External requests are sent via the Communication unit.


ODS Modules

Figure 5: ODS Modules


ODS based JS eSVG Integrated Development Environment has the following basic properties:

- Remote handling of target device SVG and JavaScript files; includes remote file browsing, upload and download, but also remote activation, restarting and deactivation of eSVG applications
- eSVG syntax and application oriented file editing and printing
- Remote debugging of target device eSVG applications; includes parallel script tracing, tracing step logging, task (script) manager, variable watch, call stack, breakpoint manager, etc.
- Interactive help assistance


Developer Studio

Figure 6: Developer Studio


ORE based eSVG Engine is the functional core of all target device eSVG applications and ActiveX controls. eSVG Engine has the following basic properties:

- Multithreaded preemptive script execution
- Clear and simple OS and application shell interface
- Touch/Mouse and Keyboard event processor for script activation
- Interactive debugging support
- External data exchange between eSVG and shell application
- Scripts dynamically access SVG elements via standard SVG DOM 2 API


Because of different kinds of existing Embedded Systems, and their very different functionality demands, general eSVG based Embedded System architecture contains a mix of a traditional native code object libraries and a web based components (Exor Graphic Objects - eGOs). JavaScript and SVG standards offer a big flexibility and maximum compatibility with the Internet world, while the libraries offer a high execution speed and fulfill even strongest real-time requirements.


eSVG in Embedded System

Figure 7: eSVG in Embedded System


- DES and WCP are visual editing tools responsible for the definition of user interfaces (DES for the local ones and WCP for the remote ones).
- Graphic Engine efficiently handles a specific graphic subsystem, which is needed for particular Embedded Systems functionality, if it is not already the standard part of eSVG Viewer or of the underlying OS.
- HMI Agent gives particular HMI properties to the Embedded System.
- TpICU [2] provides an efficient connection to the physical world.


JS eSVG IDE - short overview

This part shows the comfortable usage of JS eSVG IDE [3].

In every moment, the help assistance pane interactively informs users about currently available actions, offering the most expected ones.

Help assistance

Figure 8: Help assistance

Debug with Simulator action automatically opens docking windows for Call Stack, variable and task watching. Task is a JavaScript instance started on certain event.
Simulator is usually used in the first development phase, before eSVG program testing and debugging on the real target. eSVG program basically means standard SVG file with JavaScript code usage.

Target selection

Figure 9: Target selection

After the connection with eSVG Engine is opened, from the JS eSVG IDE point of view, it is not important whether eSVG Engine runs on local host or on remote target.
Activate program action opens dialog for browsing for SVG files through remote target file system.

Activate Program

Figure 10: Activate Program

eSVG programs are shown and handled in Workspace window.

Workspace window

Figure 11: Workspace window

Double mouse click on the function item in Functions pane will open eSVG program file on the position of the JavaScript function body.

Opened SVG file

Figure 12: Opened SVG file

JS eSVG IDE Editor is oriented to both SVG and JavaScript syntax. It supports language-oriented features like syntax coloring, smart auto indentation, word suggesting, method suggesting, quick help, active language object handling and others.

JS eSVG IDE Editor

Figure 13: JS eSVG IDE Editor

JS eSVG IDE supports simple and complex breakpoint types like passing, conditional and combined.


Figure 14: Breakpoints

User can add additional conditions to any of existent breakpoints with Edit breakpoints action.

Breakpoints Dialog

Figure 15: Breakpoints Dialog

JS eSVG IDE supports parallel tasks tracing. Basic tracing actions are Go, Step into, Step over, Step out, Run to cursor and Global step into.


Figure 16: Tracing

JavaScript variables (including SVG objects) are displayed in Variables window.

Variables window

Figure 17: Variables window

The next picture shows comfortable variables handling.

Variables handling

Figure 18: Variables handling

Only a part of JS eSVG IDE features has been presented in this paper. Detailed descriptions can be found in eSVG documentation [3].


eSVG examples

Presented examples show ActiveX eSVG control implemented into the Visual Basic project, on both Windows for PC and Windows CE for Pocket PC.

eSVG on PC

Figure 19: eSVG on PC


eSVG on PC

Figure 20: eSVG on PC


This simple example is a photo of eSVG usage on Pocket PC.

eSVG on Pocket PC

Figure 21: eSVG on Pocket PC

These and many other examples can be found in eSVG documentation [3] and on eSVG Web site.




This paper presents the main components of eSVG system architecture. This system mixes traditional and web based solutions for efficient and advanced Embedded Systems design. eSVG project relies on the fact that SVG standard offers a good framework for graphical subsystem of Embedded Systems improvements.
Next eSVG releases will offer complete architecture for reliable viewing and HMI scripting in Embedded Control Systems. Efficient and ready-to-use interconnection between the eSVG HMI and the process control world will be established through TpICU and OPC standard.



[1] "WCP Web Control Panel", EXOR International. Available at:

[2] "TpICU Project", EXOR International. Available at

[3] "eSVG and ORMIDE Documentation". Available at

Valid XHTML 1.0!