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 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 | |
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 | |
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.
){kind=link}