SVG on an Image - SAP Documentation

SVG on an Image

You can position and configure an SVG on an image.

Features

You can configure an SVG image in one of the following ways:

By scheduling a transaction that will update the SVG file in the web content of the project at regular intervals. The transaction can be scheduled using the Scheduler screen on the SAP MII administration screen. For details, see Animated Objects.
Configuring an Xacute query on the Self Service Composition Environment screen
Manually by adding custom code in the Source Code tab page in Self Service Composition Environment screen

For details, see the section Configuring SVG Image in the Activities section.

Note Note

You must include Viewbox attribute while creating a SVG object else the object will not be displayed properly on the image.

End of the note.

Activities

Configuring SVG Image

Method 1: Scheduler

On the SAP MII administration menu, choose System Management Scheduler . For more information on configuring, see Working with Scheduled Jobs.
Render an SVG object in SAP MII Self Service Compostion Environment.
Choose Choose SVG Display.
Enable Refresh Automatically and enter a value in Refresh Rate.

Method 2: Configuring an SVG Object

In Self Service Composition Environment, choose Choose SVG Display.
Enable Refresh Automatically and enter a value in Refresh Rate.
From the Choose Query Template, choose an Xactue query.

Note
Only Xacute queries are displayed. The output of the Xacute query must be of type XML, which returns an SVG object.

End of the note.
Choose Apply.

Method 3: Manual Scripting in the Source Code Page

In the Self Service Composition Environment, choose Source Code.
The Source Code page displays the HTML source code for the selected SVG image.
You can add the existing methods, updatesvg(url, callbackfunction) and refreshsvg(refreshrate, callbackfunction) in the section marked for user-entered script.
Additionally, you can also add Javascript code other than the existing methods.
Choose Apply.