SVG Renderer

[Former Member]

Hello,

I find this link for svg renderer :

SVG Renderer - Content Development - SAP Library

But i don't find any documentation about this or example how to do : to render an svg to a png image.

please could some one help me

Thank you,

Ameni

[Former Member]

Hi,

For SVG Renderer you need to pass XML Data in the Input Variable.

This will return you a EncodedImage

Then you can use an ImageSaver action block to save this encoded image as an image file.

Regards,

Sriram

[Former Member]

Hi Sriram,

Please i need an example how to do it.

Thank you,

Ameni

[Former Member]

Hi,

Pls find the example below.

1) Create a Transaction Variable named"SVGData" with type XML and assign following data.

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" height="100" width="200">

  <rect height="99" id="MeterBackground" style="fill:rgb(255,255,255);stroke:rgb(0,0,0);stroke-width:1" width="199" x="0" y="0"/>

  <text id="Title" style="fill:rgb(0,0,0);font-size:14;font-family:Arial;text-anchor:middle" transform="translate(0 0) translate(0 0)" x="100" y="16">TITLE</text>

  <text id="Description" style="fill:rgb(0,0,0);font-size:12;font-family:Arial;text-anchor:middle" x="100" y="32">DESCRIPTION</text>

  <text id="MinLabel" style="fill:rgb(0,0,0);font-size:10;font-family:Arial;text-anchor:middle" x="40" y="76">MAX RANGE</text>

  <text id="MaxLabel" style="fill:rgb(0,0,0);font-size:10;font-family:Arial;text-anchor:middle" x="160" y="76">MIN RANGE</text>

  <text id="ValueLabel" style="fill:rgb(0,0,0);font-size:14;font-family:Arial;text-anchor:middle" x="100" y="92">VALUE</text>

  <rect height="20" id="ThermometerBar" style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:0" width="120" x="40" y="40"/>

  <rect height="22" id="ThermometerFrame" style="fill-opacity:0;stroke:rgb(0,0,0);stroke-width:2" width="122" x="39" y="39"/>

  <polygon id="LowLimitIndicator" points="34,62 40,52 46,62" style="fill:rgb(255,0,0);stroke:rgb(0,0,0);stroke-width:1" transform="translate(0 0)"/>

  <polygon id="HighLimitIndicator" points="34,62 40,52 46,62" style="fill:rgb(255,0,0);stroke:rgb(0,0,0);stroke-width:1" transform="translate(0 0)"/>

</svg>

2) Add SVG Renderer and Image Save action blocks as shown in the below screenshot.

Go to Links of SVG Renderer

Assign the Transaction variable SVGData to the Variable Input of SVG Renderer.

3) Right click Image saver action block and Mention path to Save SVG image file.

4) Goto Links of Image Saver and assign EncodedImage From SVG_Renderer to EncodedImage of ImageSaver.

5) Run the Transaction and you can see Image is created in the mentioned path in Image Saver.

This is to convert SVG to a Image. If your scenario is to pass some values to the SVG object then you need to follow below approach

1. Create Animated object [ Browse SVG object as input ]

2. Use Animation Renderer action block and pass values ex in above case Max,Min and Value

3. Output from the Animation renderer which is an Encoded Image you can save it using Image Saver.

Output will be following :

Regards,

Sriram