When creating your own KPI objects, we have a few best practices, that helps you get the most out of the KPI object. Be sure to follow the below settings for your SVG editor.
Namespace
To ensure valid SVG, there has to be defined a namespace:
<svg xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidyMid meet" id="Layer_1" viewBox="0 0 400 120">
Aspect Ratio
For browser scaling purposes, preserveaspectratio should always be added to the <svg> tag with the xMidyMid meet value:
<svg xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidyMid meet" id="Layer_1" viewBox="0 0 400 120">
Layers
All layers, where values or colors need to be handled in TARGIT, should be named using id’s. It is possible to have up to one title, three labels, three values, and three shapes. The numbers indicate their relation to each other. Shape1 can be colored based on the measure value for value1, etc.
The below list shows which id the objects should have in the SVG file.
- title
- label1, shape1, value1
- label2, shape2, value2
- label3, shape3, value3
Any layer that does not have an id will be shown and will not be affected by any changes in TARGIT.
Example
<text id=”value1”>Value</text>
Text Alignment
In SVG, text is centered using the text-anchor attribute. Adobe Illustrator does not support this, so it is necessary to run the file through e.g. Inkscape if the file contains centered or right-aligned text, that needs to be dynamic.
In SVG, text alignment is called “Anchor”, which can be set to “Start”, “Middle”, and “End”.
Alternatively, use BoxySVG, a lightweight SVG editor that contains the features needed by most, and creates SVG that is valid.