skip to main content
Diagrammer > Programmer's documentation > Rogue Wave JViews Framework Advanced Features > Scalable Vector Graphics > SVG advanced personalization
 
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..
*Overview of conversion to SVG
*Describes the default mechanism for conversion to SVG and mentions reasons for customizing it.
*Customizing the conversion of a graphic object
*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.
*SVG features supported when reading an SVG file
*Lists the unsupported and supported properties and elements for the SVG reader.
Overview of conversion to SVG
The Rogue Wave 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 Rogue Wave 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 Rogue Wave 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 Rogue Wave 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
 
Supported CSS properties 
Property name
Remark
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
 

Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.