Render SVG Content

Node Development
1

Hi, 

I have developed a node to generate SVG images. The node dumps the XML text into SVGCell.TYPE. Pseudo - code:

...

String svg = new SVGCell("<xml> .... bla bla bla")  

...

 

The SVG content is generated using a combination of CDK and Batik. Attached you will find a zip file which contains an example (1.svg). You can open it using Internet Explorer. The image is displayed correctly. 

My problem is the SVGCell displays an empty image in the KNIME table. See the attached 1.png. 

I don't know what is wronng with the content of the XML [1] to be not displayed using the SVGRenderer. 

Has anybody experienced similar behaviour ? What could be the root of the problem ?

Maybe it is just an specfic paramenter of the SVGGraphics2D object (Batik) that should be tuned.

Thanks in advance. 

OScar

PS: I cannot use the node 'Renderer to Image' because some images get clippled.  

[1]

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" stroke="black" text-rendering="auto" stroke-linecap="square" stroke-miterlimit="10" stroke-opacity="1" shape-rendering="auto" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
  <!--Generated by the Batik Graphics2D SVG Generator-->
  <defs id="genericDefs" />
  <g>
    <g stroke-linecap="round" transform="scale(78.0128,78.0128) translate(0.3791,4.1902)" text-rendering="optimizeLegibility" color-rendering="optimizeQuality" image-rendering="optimizeQuality" stroke-linejoin="round" color-interpolation="linearRGB" stroke-width="0.0931">
      <path fill="none" d="M0.3325 0 L1.3283 0 M0.457 0.266 L1.2038 0.266" />
      <line y2="-1.1548" fill="none" x1="1.3283" x2="1.9925" y1="0" />
      <line y2="-1.1548" fill="none" x1="1.9925" x2="3.3269" y1="-1.1548" />
      <path fill="none" d="M3.3269 -1.1548 L3.991 0 M3.1793 -0.8778 L3.6774 -0.0117" />
      <line y2="-2.3037" fill="none" x1="3.3269" x2="3.991" y1="-1.1548" />
      <line y2="0" fill="none" x1="3.991" x2="5.3194" y1="0" />
      <path fill="none" d="M5.3194 0 L5.9836 -1.1548 M5.1718 -0.277 L5.67 -1.1431" />
      <line y2="-2.3037" fill="none" x1="5.9836" x2="5.3194" y1="-1.1548" />
      <path fill="none" d="M5.3194 -2.3037 L3.991 -2.3037 M5.1533 -2.0377 L4.1571 -2.0377" />
      <path fill="red" d="M0.2656 -2.125 Q0.2656 -2.7812 0.4531 -3.2188 Q0.6094 -3.5469 0.8594 -3.8125 Q1.1094 -4.0781 1.4062 -4.2031 Q1.8125 -4.375 2.3438 -4.375 Q3.2812 -4.375 3.8516 -3.7812 Q4.4219 -3.1875 4.4219 -2.1406 Q4.4219 -1.1094 3.8594 -0.5156 Q3.2969 0.0781 2.3438 0.0781 Q1.3906 0.0781 0.8281 -0.5078 Q0.2656 -1.0938 0.2656 -2.125 ZM1.1562 -2.1562 Q1.1562 -1.4219 1.4922 -1.0469 Q1.8281 -0.6719 2.3438 -0.6719 Q2.8594 -0.6719 3.1953 -1.0469 Q3.5312 -1.4219 3.5312 -2.1562 Q3.5312 -2.9062 3.2109 -3.2656 Q2.8906 -3.625 2.3438 -3.625 Q1.8125 -3.625 1.4844 -3.2578 Q1.1562 -2.8906 1.1562 -2.1562 Z" transform="translate(-0.2476,0.2328) scale(0.1045,0.1045)" stroke="none" />
    </g>
  </g>
</svg>

2

Hard to say... I only see that Batik has problems determining the images real width and height. Both are almost zero and therefore the scaling factor goes nuts. If I open and save the image in Inkscape it's rendered fine.

3

Probably setting the SVGValueRenderer constants to the Properties might help in showing the image in the port view?

4

thor, abor, thanks for your comments. They helped me to find out the solution.

Basically, it is mandatory to specify the width and the height in the outermost svg element. (as thor as commented it seems that Batik had problems to determine real width and height because they were not specified in the svg element)

Following I attach a pseudo-code - example for anybody who run into the same problem

(line in bold defines the width and the height in the <svg> element):

....

DOMImplementation domImpl = GenericDOMImplementation.getDOMImplementation();
Document document = domImpl.createDocument(null, "svg", null);
SVGGraphics2D svgGenerator = new SVGGraphics2D(document);
svgGenerator.setSVGCanvasSize(new Dimension(550, 500));
MyPainter painter= new MyPainter();
painter.paint(svgGenerator, new Rectangle(width, height));

.....

Oscar