![]() |
SVG: putting XML in the picture | Table of contents | Indexes | XML &, digital printing | ![]() |
|||
Technical ![]() | SVG support in ILOG JViews Component Suite |
| Tissandier, Emmanuel |
| Emmanuel Tissandier |
| Project Manager |
France ![]() Gentilly ![]() ILOG S.A. ![]() | ILOG S.A.,
9, rue de Verdun Gentilly 94253 France Phone: +33 (0) 1 49 08 35 00 Fax: +33 (0) 1 49 08 35 10 email: etissandier@ilog.fr web site: www.ilog.fr |
| Biography |
| Jolif, Christophe |
| Christophe Jolif |
| Software Engineer |
France ![]() Gentilly ![]() ILOG S.A. ![]() | ILOG S.A.,
9, rue de Verdun Gentilly 94253 France Phone: +33 (0) 1 49 08 35 00 Fax: +33 (0) 1 49 08 35 10 email: cjolif@ilog.fr web site: www.ilog.fr |
| Biography |
| Abstract |
Introduction |
SVG ![]() | ILOG has been developing the JViews Component Suite since 1997. JViews is an object-oriented library written in Java that targets developers with advanced needs in two-dimensional graphics. Since last year, ILOG has been a member of theSVG Working Group in the W3C and has started implementing SVG in the ILOG JViews Component Suite. |
What is the ILOG JViews Component Suite? |
| The ILOG JViews Component Suite is composed of several packages addressing different types of application problems: |
What is SVG? |
| Implementing SVG in JViews consists of: |
| This paper is divided into the following parts: |
Part 1: Exporting SVG from ILOG JViews |
| Part 1 of this paper is divided as follows: |
The Drawing approach |
| The following Java 2D code (where g is an instance of Graphics2D): |
Rectangle rectangle = new Rectangle(10,10,100,100); //sets the current color to red g.setPaint(new Color(255, 0, 0)); // sets the line width to 10 g.setStroke(new BasicStroke(10)); // draws the outline of the rectangle g.draw(rectangle); // sets the color to blue g.setPaint(new Color(0, 0, 255)); // fills the rectangle g.fill(rectangle); |
| produces the following output: |
|
<rect x="10" y="10" width="100" height="100" style="fill:none;stroke:red;stroke-width:10.0" /> <rect x="10" y="10" width="100" height="100" style="fill:blue" /> |
The Object-oriented approach |
| A rectangle filled with blue surrounded with a red line of thickness 10 will be translated into the following SVG element: |
<rect x="10" y="10" width="100" height="100" style="fill:blue;stroke:red;stroke-width:10.0" /> |
Advantages and disadvantages of the different approaches |
Generating SVG in ILOG JViews |
| The second approach has been chosen for the ILOG JViews Component Suite. That is, we take advantage of the notion of graphic objects to produce the most suitable SVG for each graphic object class. |
Compression techniques |
Compression of path data |
<path d="M 100 100 L 140 100 L 120 140 z"/> |
| Compression of the ‘path’ element can take place in the definition of the path data. There are several techniques to compress the size of the path data. |
| The following examples display the same triangle: |
<path d="M10000 10000L10004 10004L9996 10004z"/> <path d="M10000 10000l4 4l-8 0z"/> |
| Another easy way to compress the path data is to use special command letters for the horizontal and vertical lines (H and V command letters). This leads to the following: |
<path d="M10000 10000l4 4h-8z"/> |
| This optimization is interesting in JViews when translating map data with coordinates that can be expressed as ‘large’ latitudes and longitudes and that displays only a small area of the world. |
Reusing styles |
| For example, the following SVG document containing two rectangles that have the same style: |
<svg> <defs /> <rect x="210" y="10" width="100" height="100" style="fill:blue;stroke:red;stroke-width:2" /> <rect x="10" y="10" width="100" height="100" style="fill:blue;stroke:red;stroke-width:2" /> </svg> |
| can be replaced with this one: |
<svg>
<defs>
<style>
<![CDATA[
.C0 {fill:blue;stroke:red;stroke-width:2.0}
]]>
</style>
</defs>
<rect x="210" y="10" width="100" height="100" class="C0" />
<rect x="10" y="10" width="100" height="100" class="C0" />
</svg>
|
| This reduces the size of the resulting SVG file when many objects have the same style. Of course, this operation is optional since re-using the same style may not be appropriate in all cases. |
Part 2: Importing SVG into ILOG JViews |
| Importing an SVG file into JViews is done in three steps. These steps are described in this part as follows: |
| The first two steps are distinct because SVG separates styles from shapes. Style is expressed with the CSS syntax while graphic elements are described using an XML grammar. |
Creating JViews graphic objects from SVG Elements |
| SVG uses an XML grammar to describe its graphic elements. The SVG document must first be parsed and then the parsed elements must be mapped to JViews graphic objects. |
Parsing an SVG file as an XML file |
| This is illustrated in the following example: |
<svg> <use x="0" y="0" width="100" height="100" xlink:href="#ref"/> <!-- Many other elements --> <rect id="ref" x="10" y="10" width="100" height="100"/> </svg> |
Mapping the parsed elements |
| This section describes how SVG graphic elements can be mapped to JViews graphic objects. These graphic objects are drawn using Java 2D primitives. The following elements are discussed: |
| Simple SVG graphic elements |
| For most SVG graphic elements the translation is very simple. |
| For example: |
<rect x="0" y="0" width="64" height="48"/> |
| can be translated to the following in Java: |
IlvGraphic object = new IlvRectangle(new IlvRect(0, 0, 64, 48)); |
| For example: |
<polyline points="0 0 64 48 100 100"/> |
| can be translated to the following in Java: |
IlvPoint[] array = new IlvPoint[3]; array[0] = new IlvPoint(0, 0); array[1] = new IlvPoint(64, 48); array[2] = new IlvPoint(100, 100); IlvGraphic object = new IlvPolyline(array); |
| For example: |
<circle cx="0" cy="0" r="10"/> |
| can be translated to the following in Java: |
IlvGraphic object = new IlvEllipse(new IlvPoint(0, 0), 10); |
| For example: |
<image x="0" y="0" width="64" height="48" xlink:href="image.png"/> |
| can be translated to the following in Java: |
IlvGraphic object = new IlvIcon("image.png", new IlvRect(0,0, 64, 48));
|
| The <text> element |
| The <path> element |
| The <path> element also has a counterpart in the JViews library: the IlvGeneralPath object. This object is based on the Java 2D java.awt.geom.GeneralPath object. |
| Here is a simple example of how to create a Java 2D java.awt.geom.GeneralPath corresponding to an SVG <path> element. |
<path d="M100 100L200 200l10 50v10C210 260 180 310 130 300z"/> |
| can be translated to the following in Java 2D code: |
GeneralPath path = new java.awt.geom.GeneralPath(); path.moveTo(100, 100); path.lineTo(200, 200); path.lineTo(200+10, 200+50); path.lineTo(210, 250+10); path.curveTo(210, 260, 180, 310, 130 300); path.closePath(); |
Applying a style to imported graphic elements |
| The second step when importing an SVG file into JViews is to apply a style to the imported graphic elements. |
Parsing styles described with a CSS syntax |
Applying the styles to the JViews Object using Java 2D |
| For example: |
<path d="..." style="fill:red; fill-opacity:0.5;stroke:blue; stroke-width:4;stroke-dasharray:2 4; stroke-linecap:round"/> |
| This SVG element will be styled using two java.awt.Paint objects and a java.awt.Stroke object. |
Paint fillPaint = new Color(1f, 0f, 0f, 0.5f); Paint strokePaint = Color.blue; float[] dasharray = new float[2]; float[0] = 2; float[1] = 4; Stroke stroke = new BasicStroke(4, BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER, 8, dasharray, 0); |
| Then the previous pure Java 2D objects are applied to the JViews IlvGeneralPath object: |
path.setFillPaint(fillPaint); path.setStrokePaint(strokePaint); path.setStroke(stroke); |
| More complex styling possibilities require extensions of the JViews toolkit or even extensions of Java 2D. Both these cases will now be described. |
| Extension of the JViews Toolkit |
| Extension of Java 2D |
| Both gradients have been implemented using the Java 2D java.awt.Paint interface and return a raster filled with the correct color gradient. |
Adding the results of parsing to the JViews Object Manager |
| For example, the ILOG JViews import feature ignores declared animations or scripts included in the SVG files. It also ignores metadata or third party namespace elements. |
| However, the linking mechanism can be dealt with through the <a> element. For example: |
<a xlink:href="http://www.sample.org/myfile.svg"> <rect x="0" y="0" width="100" height="100" style="fill:red"/> </a> |
| This adds a red rectangle to the JViews manager. When the user clicks on the rectangle, an object interactor is called and tries to load the referenced file in the manager. |
Part 3: Using JViews SVG generation in a thin-client context |
|
| However, using SVG on the client side raises some problems and questions for applications that use structured graphics very intensively, such as mapping applications. |
| In conclusion, we see that the SVG format opens many new opportunities for applications with complex needs in vector graphics. There are still many possibilities to explore. |
| Bibliography |
|
|
![]() |
SVG: putting XML in the picture | Table of contents | Indexes | XML &, digital printing | ![]() | |||