copyright © 2007 Takahiro Miyagi All Rights Reserved

A Structure-Oriented SVG Editor

Takahiro Miyagi, Graduate School of Informatics, Shizuoka University

Yasuto Shirai, Faculty of Informatics, Shizuoka University


This paper presents a structure-oriented SVG editor intended for SVG authoring.

Today many SVG-related software products, proprietary or not, are available. They range from those that provide native SVG support, such as Sodipodi, to SVG-enabled applications that read and/or write SVG. The latter include Illustrator by Adobe and Visio by Microsoft. These SVG authoring tools, however, do not necessarily take the full advantage of the XML-based nature of SVG.

An SVG document is in itself an XML document; therefore, it can be used to model semi-structured data, and can be manipulated at will. An SVG document may describe the semantics of CAD data in the data structure within itself; it may also model the hierarchical relationships among the elements comprising a drawing or an illustration. All this information is retained within an SVG file, and may be exchanged among applications or users that wish to make use of it without any loss of information.

Some elements in SVG, such as the °»title°… element, contain textual description only. These elements allow us to embed various information within an SVG file, thereby facilitating the ease of reference and reuse. In order to take the full advantage of SVG, an SVG editor should make use of such °»invisible°… elements.

The above observation has led us to the design and development of an SVG editor that is capable of manipulating the hierarchical structure within a document, and making use of non-graphical elements.

Design of the Editor

Our SVG editor has been implemented in Java as an SDI application. Its screen is divided into three areas: SVG tree in the top-left that allows for manipulation of a tree structure, Edit tab in the bottom-left for editing attributes, and Viewer in the right that displays the SVG (right).

SVG tree displays the elements comprising an SVG document arranged in a tree structure reflecting the hierarchy among them. Using a user interface similar to that of Explorer in MS Windows, it enables the user to navigate through and grasp the overall image of an SVG document. It also allows direct manipulation of tree nodes, adding, deleting and moving a node, if necessary, along with its descendants. For ease of editing, each node may be given a name. SVG tree accepts non-graphical elements as well, and thus allows for handling of various types of data, such as XML texts, comments, and CDATA, to name a few. SVG tree is used for manipulation of node; attributes are edited through Edit tab.

Currently, SVG tree provides various editing functions through menus, buttons and pop-up menus. Editing functions include Copy, Cut, Insert a copied node, Delete, Insert a new node, and Append a new node. A new node here may be an SVG element, XML text, comment or CDATA.

Edit tab is used for editing the element contents, the attributes, and the attribute values. Editing in Edit tab takes effect on the element selected in SVG tree. Edit tab displays a form that reflects the definition of the selected element. For example, it lists the names and edit areas for each of the attributes appropriate for the selected element type. Our current implementation, however, is somewhat restricted, and displays only °»some°… of the attributes. Non-SVG elements, such as XML tests, are entered through a text area.

Viewer simply displays the SVG file being edited as it is. It employs the Batik toolkit for displaying an SVG document, but currently does not support dynamic status. In the current implementation, Viewer is really just a viewer, and no manipulation is possible through it, and display is quite slow and lags behind the editing operation.

Sample Operation

Steps necessary to add and edit a °»rect°… element are described below.

First, in SVG tree, choose the node where you wish to add a °»rect°… element. It will be the parent node for the newly added °»rect°… node. With a right click on the mouse, select Add, then Node. Then, a dialogue pops up for selecting the type of the node; here we choose the °»rect°… node.

Now a °»rect°… node has been added to SVG tree, but its attributes have not been given any values. If you select the °»rect°… node just added, attributes are displayed in Edit tab, where appropriate values may be provided for each attribute. Finally, a rectangle is displayed in Viewer.

Familiar editing functions, such as Copy and Paste, are available through the menu bar at the top. An SVG tree shown thus created may be stored in a file. The file format used here conforms to SVG 1.1.

Depending on the values assigned to the attributes, an error may occur. In that case, a node containing an error and its descendants are ignored and not displayed in Viewer.

Concluding Remarks

We have developed a new type of an SVG editor. It explores the hierarchical nature of an SVG document, and allows structure-oriented manipulation of an SVG tree. Moreover, non-graphical elements, as well as graphical elements, may be edited if necessary. Non-graphical elements may be used to embed non-graphical information within an SVG file, such as texts and comments.

As an editor, the current implementation is still in a primitive stage. Operation is rather cumbersome and not very efficient. Editing functions commonly found in graphical software may be added for better user interface. Among them, the grouping function, which corresponds to the °»g°… element in SVG, is highly desired. Also, direct manipulation of an SVG document through Viewer is also desirable. It is planned to improve the current implementation through the addition of these new capabilities.