How to create custom SVG files to improve BI dashboards? When we design new features for TARGIT Decision Suite, we want BI users to be able to let their creativity flow when telling the story of their data unlike ever before.
Users are no longer tied to bar charts and pie graphs. Now, they can display comprehensive maps, entire shop floors, images of trucks or animals, and virtually any relatable image to the business. The only limits to displaying data is the user’s imagination.
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 either of the two new object types: area map chart or image chart.
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 from the net. 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:
- Obtain a suitable bitmap graphic that you can 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.
- 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.
- 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.
- With well-defined borders around your areas, you can now fill these areas 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.
- At this point, you should delete the borders that you created in step 2. The only purpose of the borders was to create the filled areas/paths.
- Finally, in the graphics tool, give each of the paths a recognizable ID. These IDs are the area names you will see when you start mapping a dimension to a SVG image.
- Once the SVG file has been saved, you can open a TARGIT client to add it to the list of available SVG images. A little mapping is needed, but otherwise that’s it.
Now have fun creating your new SVG files.
