This page is a work in progress.

Overview

The GUI uses glyphs in many of its views. Glyphs are an abstraction of the SVG path element and are useful because they can scale up and down without any loss of quality. The ONOS GUI has a Glyph API for installing and using glyphs, which we will be referencing in this tutorial. By the end of this tutorial, you will be able to create, install, and use your own custom glyph in your application.

If you need to create your own application, follow this tutorial on creating an app, and this tutorial about injecting a UI component.

Creating your Glyph

Before you can use a glyph that doesn't come with the ONOS GUI, you need to create it.

Path Data

The ONOS GUI uses path data defined in the defs element for all of its glyphs.

The ONOS GUI only uses single paths – not rectangles, strokes, circles, or anything else. One path definition has to be used for the entire glyph. Getting path data is covered later.

The structure of SVG path data is below.

<svg>
	<defs>
		<symbol id="play" viewBox="0 0 10 10">
			<path d="M2.5,2l5.5,3l-5.5,3z"></path>
		</symbol>
	</defs>
</svg>

The string after d= in the path element is the definition of the path within the given symbol's viewBox. It specifies how this element is to be drawn inside of the viewBox. See this tutorial about the differences between different viewBox sizes.

Creating a Single-Path Glyph in Adobe Illustrator

Getting Path Data from SVGs

You can get path data from any SVG. SVG files can be opened with text editors, and if the glyph is already one path, then you can just get the data directly from the SVG.

Underlined in red is the single path used in for the glyph. Copy this string or save this text file in a memorable place, because you will need it later. Also make note of the viewBox, outlined in purple.

Installing your Glyph

Loading the Glyph into the Glyph Library

Using your Glyph