SVG advanced personalization

Describes the default conversion of graphic objects to SVG and explains how to define the way user-defined graphic objects are converted to SVG..

Describes the default mechanism for conversion to SVG and mentions reasons for customizing it.

Describes how to customize the conversion of a graphic object to SVG by subclassing an existing graphic object, creating a translator, and setting up the builder configuration for the SVG stream factory.

Lists the unsupported and supported properties and elements for the SVG reader.

Overview of conversion to SVG

The JViews SVG generator uses a generic translator ( GenericGraphicTranslator) by default to convert graphic objects, including those that you have defined, to SVG. It is not mandatory to define the way your objects are translated to SVG, but you may want to for reasons such as custom interactions. To do this, you will need to write some additional code. This may also be necessary if you want to redefine the way a standard JViews graphic object ( IlvGraphic ) is translated.

Customizing the conversion of a graphic object

Subclassing a graphic object

Assume your graphic object is a subclass of a rectangle that draws a blue Bezier curve into a rectangle from the left bottom point to the right top point. The code is as follows:

 

package mypackage;

 

import java.awt.*;

import ilog.views.*;

import ilog.views.graphic.*;

 

public class MyGraphic extends IlvRectangle

{

  private IlvPoint[] pts = new IlvPoint[4];

  private float[] dash = {4, 2};

 

  public MyGraphic(IlvRect rect)

  {

     super(rect);

     for (int i = 0; i < 4; i++)

        pts[i] = new IlvPoint();

     computeBezier();

  }

 

  private computeBezier()

  {

    pts[0].x = drawrect.x;

    pts[0].y = drawrect.y + drawrect.height;

    pts[1].x = drawrect.x + drawrect.width / 4;

    pts[1].y = drawrect.y + drawrect.height / 4;

    pts[2].x = drawrect.x + 3*drawrect.width / 4;

    pts[2].y = drawrect.y + 3*drawrect.height / 4;

    pts[3].x = drawrect.x + drawrect.width;

    pts[3].y = drawrect.y;

  }

 

  public void draw(Graphics g, IlvTransformer t)

  {

     super.draw(g, t); // will draw the rectangle

     // Will draw a Bezier in blue

     g.setColor(Color.blue);

     IlvGraphicUtil.DrawBezier(g, pts, 4, 1,

                               IlvStroke.JOIN_MITER, IlvStroke.CAP_ROUND,

                               dash, t);

  }

 

  public void applyTransform(IlvTransform t)

  {

     super.applyTransform(t);

     computeBezier();

  }

 

  // ...

}

Creating a translator and setting the builder configurator

If you do not want your object to use the generic translation mechanism, you should implement the SVGDocumentBuilderConfigurator.GraphicTranslator interface to be able to translate MyGraphic instances to SVG Element instances.

The translate method of your class should build a new Element instance, and, after filling it with the information contained in the graphic object and applying a style, should return that instance. To fill the Element, you can use regular DOM methods ( Element.setAttribute() ) or the methods provided by the SVG DOM. Note, however, that only limited support of SVG DOM is implemented in JViews, and not all the methods are accessible.

The following code shows how to create the translator.

 

import org.w3c.dom.*;

import org.w3c.svg.dom.*;

 

public class MyGraphicTranslator

       implements SVGDocumentBuilderConfigurator.GraphicTranslator

{

  // Method that translates the graphic to SVG

  public Element translate(IlvGraphic graphic, IlvTransformer t,

                           SVGDocumentBuilder builder)

  {

    SVGDocument doc = builder.getDocument();

 

    // The SVG ’group’ element will contain

    // all drawings necessary to display MyGraphic.

    SVGGElement group = (SVGGElement)doc.createElementNS

                                        ("http://www.w3.org/2000/svg", "g");

 

    // First add to the group the element corresponding

    // to the parent class of MyRect (IlvRectangle).

    group.appendChild(builder.getConfigurator().

       getTranslator(“ilog.views.graphic.IlvRectangle”).

       translate(graphic, t));

 

    // Create the SVG element corresponding to

    // the drawing added at MyGraphic level.

    SVGPathElement path = (SVGPathElement)doc.createElementNS

                                        ("http://www.w3.org/2000/svg", "path");

    IlvRect rect = graphic.boundingBox(graphic, t);

    SVGList list = path.getPathSegList();

    // Go to the beginning point of the Bezier.

    list.appendItem(path.createPathSegMovetoAbs(rect.x,

                                                rect.y + rect.height));

    // Add the Bezier.

    list.appendItem(path.

      createPathSegCurvetoCubicAbs(rect.x + rect.width,

                                   rect.y,

                                   rect.x + rect.width / 4,

                                   rect.y + rect.height / 4,

                                   rect.x + 3*rect.width / 4,

                                   rect.y + 3*rect.height / 4));

 

 

    // Start to style the path.

    builder.startStyleElement(path, null);

    // Really apply the style (blue color...).

    builder.appendStyle("stroke", "blue");

    builder.appendStyle("stroke-width", "1");

    builder.appendStyle("stroke-join", "miter");

    builder.appendStyle("stroke-cap", "round");

    builder.appendStyle("stroke-dasharray", "4 2");

    // Finish to style the path.

    builder.endStylingElement();

    group.appendChild(path);

 

    return group;

  }

}

Customizing the SVG stream factory

You should create a well-configured builder configurator that refers to the new translator. If you are using an SVGOutputStream you can write the following code:

 

SVGStreamFactory factory = new SVGStreamFactory();

factory.getBuilderConfigurator().putTranslator("mypackage.MyGraphic", new

 MyGraphicTranslator());

Do not forget to set this new stream factory on your manager instead of the regular one.

If you are in SVG thin-client context, you just have to call putTranslator method on the SVGBuilderConfigurator instance you used for your Servlet.

SVG features supported when reading an SVG file

To help you build SVG files that will be fully understood by the SVG reader of JViews, use the following tables to see which SVG elements and CSS properties are supported/unsupported.

Supported SVG elements 

Element name

Attributes not supported on this element

a

xlink:role, xlink:acrole, xlink:actuate display

circle

display

clipPath

clipPathUnits

defs

 

desc

 

ellipse

display

g

display

image

display

line

display

linearGradient

 

metadata

 

path

display

pattern

patternUnits, patternTransform

polygon

display

polyline

display

radialGradient

 

rect

display

stop

 

style

!important rules are not supported

svg

zoomAndPan display

switch

display

symbol

refX, refY, viewBox, preserveAspectRatio, display

text

textLength, lengthAdjust, display

textPath

textLength, lengthAdjust, startOffset, method, spacing, display

title

 

tspan

multiple values x, y, dx, dy (single values supported), rotate, textLength, display

use

 

Property name

Remark

Supported CSS properties 

 

clip-path

URI local to the file only.

color

 

color-interpolation

Supported on linearGradient and radialGradient.

fill

URI local to the file only, ICC colors are not supported.

fill-opacity

 

fill-rule

 

font-family

 

font-size

Relative identifiers are not supported.

font-stretch

Relative identifiers are not supported.

font-style

 

font-weight

Relative identifiers are not supported.

opacity

Supported on basic shapes, paths, and g (group) elements.

stop-color

ICC colors are not supported.

stop-opacity

 

stroke

URI local to the file only, ICC colors are not supported.

stroke-dasharray

 

stroke-dashoffset

 

stroke-linecap

 

stroke-linejoin

 

stroke-miterlimit

 

stroke-opacity

 

stroke-width

 

text-anchor

 

visibility