How Can I Use Custom Icons in my Datylon Chart?

Learn how to create custom data marks and legend icons to use in Datylon charts

You can design and upload custom data marks and legend icons into Datylon's chart editors: Datylon for Illustrator, Datylon for PowerPoint, and Datylon Report Studio. This is done by pasting an SVG in the Datylon custom icon field.

Understanding SVG

SVG, or Scalable Vector Graphics, is an image format that utilizes an XML-based markup language to define vector graphics in a structured manner. SVG files are essentially code that provides instructions for rendering shapes, colors, text, and layout. To function correctly as custom icons in Datylon, the SVG code must adhere to specific guidelines.

You have two main approaches to creating SVG code for custom icons:

1. No Coding: Using an SVG Editor: This is the easiest method and involves copying SVG code generated by an SVG editor directly into Datylon. Adobe Illustrator instructions are provided below.
   
   
2. Coding: Writing SVG Code Directly: If you prefer to work directly with XML, refer to section Advanced SVG Code Information for the necessary rules.

Creating a Custom Icon in Adobe Illustrator (No Coding)

This method leverages Adobe Illustrator to generate the required SVG code.
We are using Adobe Illustrator 2025.

Preparing Illustrator for SVG Export

Before designing your icon, adjust Adobe Illustrator's SVG export settings.

This only needs to be done once as the settings are saved.

1. Select any object on your Illustrator artboard.
2. Go to File > Export Selection.
3. Under Formats, choose SVG.
4. Click the Cogwheel icon to open the settings.
5. Select SVG and set
   1. Styling to “Inline Style”.
   2. Font to "Convert to Outline"
   3. Images to "Preserve"
   4. Objects ID to "Minimal"
   5. Decimal to "2"
   6. Minify: ON
   7. Responsive: OFF
6. Click Save Settings.
7. You can now cancel the export.

Important: If using a different SVG editor, ensure the generated code uses Inline Styling.

Creating and Uploading a Custom Icon

Custom icons support any single color or multiple colors.

However, only the elements that are filled with black, at any opacity, can be changed into one single other color in the Datylon editor. All other colors in your icon, including white, will retain their original colors and cannot be changed in Datylon. Transparency in your icon design will be retained as well.

Follow these steps to design and upload your icon:

1. Design your icon in Adobe Illustrator
   Follow these guidelines when creating icons for use in the Datylon editor:
   • Design your icon with dimensions that match approximately the expected display size in the Datylon editor. Typically around 50 x 50 pixels. Ensure the width and height are at least of a similar order of magnitude.
   • Use multiple paths, objects, and colors as needed to achieve your desired design.
   • Convert all strokes to outlines by selecting Object > Path > Outline Stroke.
   • Fill any parts you intend to color later in the Datylon editor with black at any opacity and no stroke.
     
2. Ensure a square boundary box.
   Mainly for ease of use, we recommend designing your icon within a square boundary box.
   
   • If the boundary around your icon is not exactly square, create a square box tightly around it, with the icon centered inside.
   • Set the square box's Fill to None, or any color, and remove any Stroke.
   • The center of this box will serve as the icon's anchor point.
     
     
3. Copy the icon and the square box (Command+c or Ctrl+c).
   
   • The icon is now stored as SVG code on your clipboard.
     
     
4. In the Datylon editor:
   Go to Styling > Data Marks > Symbols > Type: Custom > IconSVG or
   Styling > Legend > Symbols > Type: Custom > IconSVG
   
   
5. Delete the default code and paste your SVG code (Command-v or Ctrl+v) into the IconSVG field.
   
   
6. The custom icon will appear on your chart and you can now adjust its color, opacity and size.

Example

The following example showcases a design featuring various elements. The largest petals of the flower are filled with a solid black color at 100% opacity, allowing them to be recolored within the Datylon editor.

In contrast, the smaller petals are rendered in shades of grey, with varying levels of transparency that create a deeper tone on the larger petals.

The center is filled with white at 100% opacity. 
You can download the .ai file containing this custom icon here. 

Advanced SVG Code Information

When creating SVG code outside of the Illustrator method, keep these points in mind:

• Custom icon code must always begin with an `<svg>` tag.
• Objects without any fill attribute (not even fill:none) can be colored in the Datylon editor with one custom color. 
• The viewBox attribute should be omitted, or have exactly the same size as the boundary box of the icon. 
• The boundary box of the icon (comprising width, height, and viewBox) does not necessarily need to be square, as mentioned in the Adobe Illustrator section. However, if the boundary box is not square, it is essential to ensure that the width and height properties in the Datylon editor maintain the same aspect ratio as the icon's boundary box to achieve the desired visual outcome.
• The following SVG elements will be removed when pasting into the IconSVG field: `defs`, `symbol`, `use`, `switch`, `hatch`, `hatchpath`, `foreignObject`, `audio`, `video`, `tref`, `title`, `desc`, `metadata`, `script`, `style`, `set`, `animate`, `animateMotion`, `animateTransform`, `view`, `cursor`.