Data Visualization With SVG Files

Data visualizations are powerful tools for enabling business intelligence (BI) users to let their creativity flow and tell the story of their data unlike ever before. 

With TARGIT Decision Suite, our all-in-one BI and analytics platform, users are no longer tied to bar charts and pie graphs. They can display comprehensive maps, entire shop floors, images of trucks or animals, and virtually any relatable image to the business.

Those customizable images mentioned above are Scalable Vector Graphics, otherwise known as SVG files. These are what you see when you open or create a new analysis in TARGIT Decision Suite using the "area map chart" or "image chart" object types.

Categorizing a graphic as “scalable” simply means that you can zoom to any level of detail without distorting the image. This is opposed to standard bitmap graphics that would quickly become pixelated and distorted as you zoom.

Furthermore, SVG files let you identify individual areas, objects, or paths within the graphics. This is what enables you to use color agents to fill entire areas of the map or image. Areas could be anything from countries, states, and municipalities on a map to individual shops within the layout of a shopping mall to regions of the body in an image of a human body. The possibilities are only as endless as your creativity and needs.

We think maps are something that is most useful to companies, so TARGIT Decision Suite comes with a number of geographical SVG maps right out of the box. If you want more variety, it’s easy to add your own SVG images, whether those are images you’ve downloaded or those you’ve created yourself.

How to Create Your Own SVG File

To create your own SVG file, you’ll need to have some kind of graphics tool that is capable of creating SVG-type files. Many professional tools — such as Adobe Illustrator and CorelDRAW — will do the job, but it might also be worthwhile to examine one of the many free tools available online. Personally, I’m using the free, open-source Inkscape. No matter which tool you prefer, here are the steps you’d typically take to create your own custom SVG files:

1. Obtain a suitable bitmap graphic to use as a template for your SVG file. The more explicit the area borders are, the better. This file can either be downloaded from the internet or, if it’s an internal image, acquired through your marketing department.
2. Define the area borders as traces in the SVG file. Think of it as if you were putting a semi-transparent paper on top of a portrait photo and then using a pencil to draw the outlines of the face. This part can be done as a freehand process or as a semi-automatic procedure depending on the quality of the original image and the capabilities of the graphics tool.
3. Clean up the image. Usually, no matter how careful you’ve been, there will be parts of the image that need to be removed or corrected.
4. Fill in your defined borders with a default fill color. These filled areas are also what will end up as paths in the SVG file. When TARGIT maps dimension members to SVG maps, it is in fact these paths they are mapped to.
5. Delete the borders that you created in step 2. The only purpose of the borders was to create the filled areas/paths.
6. Use the graphics tool to give each path a recognizable ID. These IDs are the area names you will see when you start mapping a dimension to a SVG image.
7. Save the SVG file and add it to the list of available SVG images in your TARGIT client. A little mapping is needed, but otherwise, that’s it.