SVG (Scalable Vector Graphics) based Visualizations

Applies to: Kyvos Reporting

Kyvos Reporting enhances data storytelling through custom, interactive visualizations using SVG templates. Beyond traditional charts, you can now display maps, floor plans, vehicle images, or any business-relevant SVG graphics to create rich pictograms and contextual dashboards.

Step 1: Upload the SVG Template

Place the SVG template folder (which may include .svg, .html, and .css files) in one of the following locations:

File System Path:
<Kyvos Reporting Installation Folder>\Kyvos Reporting\ReportEngine\templates\ihtml
Portal Path:
Go to Administration > Configure > Config Files > iHTML Template Files and upload your template.

Step 2: Map SVG Template to Ad Hoc Template

Navigate to Design > Ad hoc Template.
Open or create a template that you want to link with the SVG layout.
Under the iHTML section, select your uploaded SVG template.
Click Save to apply the configuration.

Step 3: Create an Ad Hoc Report Using the Template

Navigate to Design > Ad hoc Report.
Select a Query Object as your data source.
Set Report Format to iHTML.
Choose the mapped template from the Template list.
The SVG Mapping tab now appears on the Ad hoc toolbar.

Step 4: Configure Chart and Map it to SVG Container

Go to the Chart tab and create the desired chart.
Switch to the SVG Mapping tab.
Select a container within the SVG image.
Link the container to the created chart.

Note
A single chart control can be linked to only one SVG container.

Step 5: Run the Report

Run the Ad Hoc Report to view your customized chart displayed within the SVG image.