1. Selecting a SVG image

First of all, we need a SVG image. Not any will fit.

As you can see, each of the picture’s elements is a kind of separate unit. Most likely, if we look at this picture as html (open it in any text editor), we will see that a unique ID is assigned to each element. Looking ahead, I will say that we will need this very ID to set up filters in the application, so it is very important to choose the appropriate picture at the very beginning.

Oops, we’ve got a problem:(

The image seems to be perfect and broken down by elements, but it only looks good. If we open the html, we will most likely see one element (with a single ID respectively), which governs the entire image. This limitation leaves us no choice. If only you want a shape made of a single color.

2. Processing SVG

After choosing a high-quality and suitable picture, it would be good to override the element IDs and make them more easy-interpretable. Let me remind you that we will use them as a filter. Let's continue with the example of the sheep.

Initially, some non-obvious code was written in ID. After we renamed it, it became clear that the element from the example below controls the grass in the picture.

Thus, it is better to rename all the elements that you want to paint.

*In order to understand what any element in the picture is responsible for, you can simply cut it out of html and update the SVG in the browser. Something will disappear, and you will understand the element’s function and what new name should be assigned to its ID :)

3. Preparing table data

When all the required IDs are renamed, let’s create a table with ID data.

You can select any tabular format convenient for you, including db, xlsx, csv, and qvd. The only requirement is that this format is supported by Qlik Sense. As you can see from the figure below, in the first column we write the IDs that we have previously renamed in html.

Then we add a count column that will be used to calculate and override colors. Later, when we load this table into the Qlik Sense app, we will create a measure that depends on these values, something like: if count> 49, color all such elements in green.

*You can choose other column names in your table, as well as the number of columns.

4. Working with QS, first steps

So, we already have the prepared image and a file with its data. Let’s start working with QS!

The plugin that will enable us to process such images is called svgReader. Make sure that it is installed on your computer. To do so, switch to the Admin Dashboard, open the Extensions tab and search by name.

After that, we need to download the SVG image as open content to display it in the application via the absolute path. Open the Admin Dashboard and switch to the Content Libraries tab where the default content is available, and click it. The dialog box appears (see screenshot below) -> select Contents (bar to the right) -> upload -> select SVG –> once loading is completed, copy URL (this will be the absolute path).