Reading time: 1 minutes and 48 seconds.
Create an icon for your visualization mod
What is an SVG icon?
SVG stands for Scalable Vector Graphics, and is an open standard XML-based vector image format. SVG images can be created and edited with any text editor, as well as with drawing software. All major modern web browsers have SVG rendering support.
How do I create an SVG for my mod?
There are a number of ways to create SVG icons; either you can create them in a web-based SVG editor, using a licensed program on your computer, or using a web-based design program.
One easy way to make an SVG icon is to use a web-based SVG editor, where you can create the icon directly in the web browser. Two examples of web-based editors are: https://editor.method.ac/ and https://vectr.com/
You can also use installed programs on your computer, such as Adobe Illustrator, Sketch, or Adobe XD. However, use of such programs might require previous knowledge to be efficient.
Figma is another alternative. This is a web-based resource to create digital design, and has a free for all license. A tutorial on how to create your own visualization mod icon using Figma can be found below.
Specifications for the Spotfire visualization icons
Sizes of SVG icons in Spotfire
The main container of SVG icons is called a viewbox. The preferred size to create an SVG icon for a visualization mod is 24x24 px. This icon is then scaled up to 32x32 px and down to 16x16 px depending on where in the UI it is placed. See examples below.
Examples in use within Spotfire:
Colors
Spotfire visualizations have icons with three distinct colors. For a consistent style, it is recommended that you use the same pattern.
Opacity
In order to add tinted areas, you can use opacity, as seen in the example below.
How to create your visualization mod icon using Figma
This guide describes how to create your icon in Figma. Figma is an interface design application that runs in the browser. It has a free-for-all licence and all you will need is an email account. Read more and download Figma here:
Below is a tutorial on how to create an SVG icon for a donut chart.
Step 1:
Download the template file to begin:
Step 2:
Follow the tutorial to create your icon:
Click here for a video tutorial on how to create an SVG icon for your visualization mod.