Using SVG in Oracle Business Visualizations

Vincent Hardy

Senior Director, Development
Oracle Corporation Enterprise Performance Management, Business Intelligence

                            Santa Clara
                            5450 Great America Parkway

Vincent Hardy works at Oracle on graphical, interactive and animated user interfaces in the field of Business Intelligence, contributing to making large sets of complex data visually understandable, in order to help users navigate data sets, detect trends or find anomalies.

Prior to Oracle, Vincent worked at Sun Microsystems for 10 years where he focused on graphical, animated and interactive technologies, mainly the Java 2D API and the Scalable Vector Graphics format (SVG). Vincent co-founded and led the Batik project at Apache, an open source Java toolkit for manipulating, viewing or transcoding SVG content. Vincent contributed to the development of the Scalable Vector Graphics specification and its version for mobile devices, SVG Tiny. He chaired the Compound Documents Format (CDF) effort in W3C. Vincent is the author of the "Java 2D API Graphics" book and has a passion for graphical design.

Hugh Zhang

Senior Software Engineer
Oracle Corporation ADF Data Visualization Tools

                            10 Van De Graaff Drive

Hugh Zhang works at Oracle as a software engineer in the ADF Data Visualization Tools group, which provides rich visualization components for Oracle's ADF Faces application development framework. Focusing on the Graph and Gauge, he has developed many visual and interactive features for the DVT components, including the custom graphics support for the Gauge. Prior to joining Oracle, Hugh received a Bachelors of Science and Masters of Engineering from Cornell University.

Table of Contents

Using SVG in Oracle's ADF Data Visualization Components
Background on ADF Faces and ADF Data Visualization Components
SVG as an Output Format
SVG as an Input Format for Custom Graphics
Simple Example
Advanced Examples
Using SVG for dynamic, interactive graphics
Important Features and Qualities
Room for improvement
Wish List, Dreaming out loud

Another use of SVG is in the custom graphics feature for the gauge component. Over the years, there have been many requests for graphical styles that were different from the default gauge. While the user could always specify the colors and gradients on the gauge, the shapes and geometries were not customizable. As a component development team focused on creating reusable building blocks for applications, it's not efficient for us to create all of these graphical variations for the gauge. Instead, we implemented a feature that allows the application to specify the graphics directly, using SVG as the input format.

There were four main requirements that led to the choice of SVG as the input format. First, the custom graphics specification should be easy enough to use that artists can provide the graphics directly, ideally without the help of a developer. Second, there must be some way to identify the objects in the custom graphics definition as specific elements in the gauge. For example, the indicator needle in the graphics definition must be identifiable by the gauge so that it can be properly positioned and rotated. Third, the custom graphics must be supported in any of the rendering formats that the gauge supports. Finally, the custom graphics must be easily resized and rotated.

Given these requirements, SVG was clearly the best choice. A W3C recommendation, SVG can be directly exported using many of the popular vector graphics editors making it easy for artists to create the custom graphics. To identify subcomponents in the gauge, the id attribute of the SVG graphics elements is set to some predefined constants, such as id=”plotArea”. This sort of metadata is easy to add since SVG is XML based, and would not have been possible with an image format such as PNG. In order to support all of the gauge’s output formats, the SVG graphics are parsed during the layout stage of the gauge rendering and converted into the same Java shape definitions as the built in graphics. When passed to the gauge renderers, the custom graphics are indistinguishable from the default graphics and can be displayed in any of the supported formats. This is all possible only because the SVG specification is public and well defined. This leaves just the last requirement, which is fulfilled by the definition of SVG. As scalable vector graphics, SVG doesn’t lose fidelity when rescaled and can be easily rotated and transformed.

Besides its features leveraged for input and output, SVG also supports rich interactivity which could be leveraged for business graphics.

The SVG features provide some excellent benefits. There are also some areas which could be improved to help make SVG an even better environment for developing business graphics.

Debugging is pretty easy in most browsers. At least, the debugging of SVG scripts is at the same level as it is for HTML based Ajax applications. Debuggers such as Firebug provide a fair debugging environment. Developers find support for variable watch, step debugging and profiling. This is a rich development environment, although not quite at parity with development environments for languages such as Java (e.g., JDeveloper, NetBeans, Eclipse) or C++. Note that this comparison reflects on JavaScript more than on SVG itself.

SVG offers the features needed for developing advanced, interactive business graphics. Combined with the dynamic nature of JavaScript language, it creates an environment where rich graphics features can be expressed concisely.

The following features are obvious but still core to business graphics:

It is easy to create JavaScript helper methods to create and initialize graphical shapes with a simple JSON object circumventing the DOM API's verbosity. Likewise, JavaScript's dynamic features make it easy to bind data to graphical elements.

var svgElement = ...;
var attributesBag = {
    "fill": "red",
    "stroke-width": "4",
    "stroke": "rgb(255, 255, 0)",
    /* more attributes ... */
setAttributesOnElement(attributesBag, svgElement);

function setAttributesOnElement (attributes, element) {
    for (var p in attributes) {
        if (attributes.hasOwnProperty(p)) {
            element.setAttribute(p, attributes[p]);

The following treemap example illustrates the use of DOM Events (for displaying tooltip information), linking (to open a URL on click) and very basic shapes (rectangles and rounded rectangles) and text.

This section discusses features that would make it easier to write advanced business visualizations in SVG, or would make these applications more performant.

Currently, the SVG DOM attribute updates are done piecemeal with the setAttribute(NS) method calls. There are two issues with this. First, it is pretty verbose and difficult to read. Second, it is not very efficient because it requires multiple back and forth between the application and the SVG engine. The work by the SVG Woking group in this area seems very much in-line with the type of APIs we use internally and we are hoping they get finalized and implemented in browsers.

The implementation of ProgressEvent, specified in the SVG Tiny 1.2 recommendation, will let applications track the loading progress of images (or other resources), which is not currently possible.