A Structure-Oriented SVG Editor

Keywords: SVG Editors , Structure-Oriented , manipulating the hierarchical structure

Mr. Takahiro Miyagi
Graduate School of Informatics
Shizuoka University
Hamamatsu
Shizuoka
Japan
gs07048@s.inf.shizuoka.ac.jp

Biography

Takahiro Miyagi is currently a student of Master's degree.

Yasuto Shirai
Faculty of Informatics, Shizuoka University
Johoku 3-5-1, Naka-ku
Hamamatsu
Shizuoka 432-8011
Japan
shirai@inf.shizuoka.ac.jp

Biography

Yasuto Shirai is currently an associate professor of computer science at Shizuoka University.


Abstract


We have developed a "structure-oriented "SVG editor. Being "object-oriented" implies that our editor is capable not only of creating and editing an SVG document but of manipulating a non-rendered elements. Inkscape, a well (if not best) known SVG editor, does not necessarily stand up to our expectation in this respect, On the other hand, our editor is equipped with an editor called "SVG Tree" for manipulating the hierarchical structure of an SVG document, and allows a direct manipulation the element tree.


Table of Contents


1. Introduction
     1.1 Why Structure-Oriented Editor?
     1.2 Existing SVG Editor
2. Inkscape
3. Structure-Oriented SVG Editor
     3.1 Design Outline
          3.1.1 SVG Tree
          3.1.2 Edit Tab
          3.1.3 Viewer
     3.2 Extent of Supported Capability
     3.3 Other Remarks
     3.4 Sample Operations
          3.4.1 Example1: Draw a Filled Rectangle
          3.4.2 Example2: Cut and Insert
4. Concluding Remarks
Acknowledgements
Bibliography

1. Introduction

During an investigation into a possibility of new SVG (Scalable Vector Graphics) authoring tools, it came to our attention that diversion from direct manipulation of geometric objects might lead to a new type of tools. It was the starting point of our effort that has led to our structure-oriented editor.

1.1 Why Structure-Oriented Editor?

Why do we need a structure-oriented editor for SVG?

SVG is an XML-based format for describing 2D vector graphics. It allows us to build a 2D graphics using a broad range of 2D objects, including various 2D shapes, texts and images. The "g" element adds a structure to SVG by bundling a set of elements into a group; this grouping process may continue recursively to build a multi-layered hierarchy . This characteristic renders SVG appropriate for creating a semantically rich document, such as a CAD document whose semantics is embedded in the geometrical layout of the objects defined there. In more common forms of 2D graphics, such as illustrations and drawings, a group defined using a "g" element is equivalent to a layer found in many graphics software. Moreover, information embedded in a group is retained through a transmission of the document over the internet. SVG has non-visual elements, such as "title", that are not displayed on the canvas as a part of graphics; they may be used to carry certain information that may enhance the ease of reference and reuse of the graphics contents. Due to the nature of these elements, they are difficult, if not possible, to support in a drawing-oriented tool. It is necessary to provide an appropriate user interface to take full advantage of these characteristics of SVG; that is exactly what a structure-oriented SVG editor is intended for.

1.2 Existing SVG Editor

Today many SVG-related software products, proprietary or not, are available. They range from those that provide native SVG support, such as Inkscape (Section 2), to SVG-enabled applications that read and/or write SVG. The latter include Illustrator by Adobe and Visio by Microsoft. These software products offer an intuitive interface, are easy to use, and are most common way of creating and editing an SVG document. Unfortunately, however, they are basically drawing tools; they offer a facility for manipulating what is visually conspicuous to our eyes, but fail to support operations on document structure and non-visual elements. If you are to alter the hierarchical structure of a document or any of non-visual elements, you need to directly edit the XML file using a general-purpose XML editor.

2. Inkscape

Inkscape is an Open Source, native SVG editor, and may be considered a descendant of Sodipodi. Though filters, animation, and fonts are not fully supported, it is already in wide use. With much active effort, Inkscape is rapidly growing; a change in its base of interface from GTK+, as used in Sodipodi, to gtkmm has improved usability.

fig1.png

Figure 1: A Screen Shot of Inkscape

With Inkscape, we make a drawing by placing basic shapes and by defining curves along paths, and use layers to manage graphical objects. Inkscape, except for unsupported features, is very much like a full-featured drawing tool, and may be operated in a quite intuitive manner.

In order to consider the structural manipulation facility , we focus here on the handling of "g" elements. A "g" element constitutes what is equivalent to a layer often found in a drawing software. A drawing may be constructed as a set of layers; one layer is translated by arbitrary amount with the other layers left untouched, objected may be is transformed among layers, and a layer may defined within another layer as its sub-layer.

Suppose a layer is to be embedded within another existing layer. Since Inkscape's graphical editing facility does not allow a layer as a whole to be moved elsewhere, we resort to the XML editor provided with Inkscape and do the textual manipulation to move a "g" element to the inside of another "g" element. Non-rendered elements must be edited using the XML editor, too.

It can be inferred from the above that Inkscape is a good drawing tool, but not suitable for structural manipulation.

fig2.png

Figure 2: XML Editor of Inkscape

3. Structure-Oriented SVG Editor

This section discribes the sturucure-oriented SVG editor we have developed (Fig. 3).

fig3.png

Opening scrren.

Figure 3: A Screen Shot of our Structure-Oriented Edito

The current design of our editor places emphasis on the structural manipulation cabability. Its characteristics include: it enabels the user to grasp the overall image of a document, it offers a facility to navigate through a document, it allows for alterations to a document structure, and it supports non-rendered elements. Sincse the design is in its preliminary stage, it lacks some editing capabilities often found in a graphics software. For example, we cannot draw a figure directly inside the canvas using a pointing device.

3.1 Design Outline

Our editor is implemented in Java, and is made up of hree componets: SVG Tree, Edit tab and Viewer (Fig. 4).

fig4.png

Figure 4: Components of our Editor

SVG Tree displays the hierarchical structure of an SVG file being edited, and also allows an operatioin on each elements. Edit Tab is used for operating on the attributes of an element selected in SVG Tree. Viewer shows the redered image of the SVG file being edited. It employs Batik SVG Toolkit to render an SVG file.

Description of each component follows below.

3.1.1 SVG Tree

SVG Tree is built on the JTree class of JDK, and comprises the central part of our editor. It displays the elements of an SVG document arranged in a tree structure reflecting the hierarchy among them. Using a user interface similar to that of Explorer in Microsoft Windows, it enables the user to navigate through and grasp the overall image of an SVG document. It also allows for editing of tree nodes: adding a node, deleting a node, and moving a node, if necessary, along with its descendants.

SVG Tree treats any element in an SVG document equally as a node. It 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.

fig5.png

Figure 5: Explorer of Microsoft Windows

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

3.1.2 Edit Tab

Attributes play a very important role in SVG; information vital to 2D graphics is often given as attribute values, such as, coordinates, fill/stroke styles, and colors. While SVG Tree is used to manipulate nodes, Edit Tab is used to edit the attributes and the values of each node.

It is intended that a form is displayed in Edit Tab for editing attribute values of the element selected in SVG Tree. That is to say, Edit Tab "knows" about the attributes of each SVG element, and, depending on the element selected in SVG Tree, shows an appropriate list of attributes, and prompts the user to enter necessary information. Our current implementation is somewhat limited, and displays only "some" of the attributes for the selected element.

Non-SVG elements, such as XML texts, are entered through a text area.

3.1.3 Viewer

Viewer simply displays a rendered image of the SVG document being edited. It employs the JSVGComponent included in the Batik toolkit. Currently, it does not support the dynamic status; so Viewer is no more than a viewer, and no manipulation on the geometric objects is possible through a displayed image.

3.2 Extent of Supported Capability

Development is still in a preliminary stage, and only a part of the full SVG recommendation is currently supported. The SVG elements recognized by the current implementation are listed below:

In addition to these elements, our editor allows for the handling of XML texts, comments, and CDATA. Also, it does not accept XML elements from other name spacess.

3.3 Other Remarks

3.4 Sample Operations

Below we use a couple of examples to illustrate the capability of our editor.

3.4.1 Example1: Draw a Filled Rectangle

A series of operations necessary to draw a new rectangle is described.

First, in SVG Tree, choose the node where you wish to add a "rect" element (Fig. 6). It will be the parent node for the newly added "rect" node. With a right click on the mouse, select 'Add', then 'Node'.

fig6.png

Figure 6: Add a New Node

Then, a dialogue is displayed for selecting the type of the new node. Here we choose the "rect" node (Fig. 7).

fig7.png

Figure 7: Choosing the "rect" Node

Now a newly created "rect" node has been added to SVG Tree.

At this stage, no attribute values are specified for the new node. By choosing the "rect" node in SVG Tree, attributes are displayed in Edit Tab so that we may give a value to each attribute. In Fig. 8, Edit Tab displays attributes for specifying the location and the size of the rectangle.

fig8.png

Figure 8: Specifying Coordinate Attributes

To paint, or fill, the inside of the rectangle, you select "Fill/Stroke Setting" tab in Edit Tab and give necessary information. FIg. 9 shows a window for setting the fill style; here the color "white" with opacity one is chosen as the fill style.

fig9.png

Figure 9: Setting the Fill Style

Finally, a white rectangle is displayed in Viewer Fig. 10).

fig10.png

Figure 10: A White Rectangle

3.4.2 Example2: Cut and Insert

The second example demonstrates a structural manipulation.

First, the node to be cut is selected in SVG Tree. Then with a right click on the mouse, a menu pops up for possible operations. Fig. 11 shows where a 'filter' element, along with all its descendants, is just being cut.

fig11.png

Figure 11: Cutting a Node

Now we need to specify the target point where the node is to be inserted. In Fig. 12, the '"comment" node is selected as the target node. Note that the cut element and all its descendants remain displayed in a more color for reference.

fig12.png

Figure 12: Inserting a Node

After insertion, the "filter" node is located just before the "comment" node. Note that a series of operations described here effectively "moves" a subtree to another location.

fig13.png

Figure 13: SVG Tree after Insertion

4. Concluding Remarks

We have described feature of our structure-oriented SVG editor. It displays the structure of an SVG document in SVG Tree, and enables the user to gain the overall understanding of an SVG document as a whole The editor also allows for the editing of non-graphical elements and the comments. So, it goes beyond what a usual drawing software offers.

Given a high degree of versatility and extensibility of XML, an XML document may be very rich in its contents. For example, the data itself and its metadata may be embedded within one XML document. SVG is also capable of carrying metadata, along with the graphical contents. And our editor make it possible to edit the non-graphical, and often information-rich, part of an SVG document, as well as the graphical part.

As already mentioned elsewhere, our structure-oriented editor is in a preliminary stage of development. It does demonstrate some features not found in common SVG-based editors, but it also needs much improvement in many aspects. For example, its graphical editing facility is quite primitive. Direct manipulation of the geometry through a canvas, which is close to a "must" in today's successful applications, is of very high priority. Tree-editing through SVG Tree leaves much room for improvement, too.

Also, currently Edit Tab recognizes only some of the SVG elements. For our editor to fully support the SVG recommendation, it must know about all elements and all attributes. So, we must build some kind of knowledge base to store information on the SVG recommendation.

Acknowledgements

Authors would like to extend their gratitude to the unanimous referees for valuable comments, and to the members of Shirai Laboratory at Faculty of Informatics, Shizuoka University for supports and encouragements.

Bibliography

[BOOK1]
SVG Scalable Vector Graphics (SVG) 1.1 Specification. http://www.w3.org/TR/SVG/
[BOOK2]
Inkscape Inkscape. http://www.inkscape.org/
[BOOK3]
Batik Batik SVG Toolkit. http://xmlgraphics.apache.org/batik/

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.