Introduction 
One of the basic building blocks in Audulus is the SVG node. SVG or Scaleable Vector Graphic is an XML based markup language for describing two dimensional vector based graphics. Because the Audulus UI is dynamically scaled depending on the current zoom level, SVG is an excellent way to specific user created graphic elements for the UI. SVG images are primarily used to create icons which serve as an alternative method for identifying the function of inputs, outputs, knobs, triggers, etc… In addition to providing a language-neutral method of labeling UI elements, SVG icons typically use less space than text based labels and allow modules to be reduced in size. Currently (Audulus V3.5) the SVG node is available on macOS and iOS with plans to add it to an upcoming Windows update. The information in this tutorial is based on the SVG library currently used by Audulus and may change with future releases. At the moment macOS is the only platform capable of importing SVG files, but iOS devices can copy and past SVG images from existing Audulus files. The markup in SVG files is embedded directly in the Audulus file and is not linked to the original file after import. We are currently working on a standard set of icons for commonly used controls and I/O and suggestions are welcome at: https://discourse.audulus.com/t/standard-icons-for-i-o-and-controls/207?u=stschoen.
Tools
SVG graphic files can be created using a wide variety of graphics applications. I have personally used both Adobe Illustrator and Affinity Designer to create SVG graphics for Audulus, but any application capable of exporting a compatible SVG file can be used.
Settings
Designer is my primary graphics tool and I use the following settings for Audulus graphics:
Document resolution: 72 PPI
Grid Size: 10 pixels (I sometimes reduce it to 5 for smaller images)
Line width is usually 1.5 to 2 pts.
Colors:
green (knobs,LEDs etc.): r:31 g:239 b:128 
red (input) : r:212 g:20 b:90 
blue (output) : r:0 g:133 b:222 
gray (frames) : r:91 g:147 b:159
File Export:
File Format: SVG
Export selection without background
Rasterize: Nothing
Downsample Images Above 108 DPI
Resampler: Bilinear
Use DPI: 72
Allow JPEG compression Quality 85
Use Hex Colors
Flatten Transforms
everything else is de-selected.
For Adobe Designer CS5:
Styling - Presentation Attributes
Font - SVG should be OK since no text
Images - Embed
Object ID’s - Minimal
Decimal - 2, Minify - On
Responsive - off
(Note I do not have access to the current version of Designer so there may be some changes needed)
Sample Icon Sizes
(Note: Because SVG graphics are scaleable, the size which is ultimately rendered in Audulus depends on both the resolution and dimensions. The following assume 72 PPI.
Small control frame 120 X 40
Trigger button 30
I/O circle 20
A graphic will fit inside a knob if smaller than 20x20. Almost all of the icons I have created are approximately this size.Audulus has an internal grid for positioning UI elements and using this size will allow the icons to be properly positioned.
Limitations
The SVG library currently used by Audulus is lightweight and fairly fast, but does have some limitations. Text, CSS styles, and even-odd fills are not supported. There is some limited support for raster images in the library, but they should be avoided since they don’t scale well and are processor intensive. The lack of support for even-odd fills means that, at least for Designer, converting text to curves results in filled in centers for letters like o and b which have internal “holes”. My current work-around is overlaying the “hole” with the background color (usually black)
Resources
I have attached my icon collection as of 03/07/2018 both as a zip file and an Audulus document. The icons in the Audulus document are in the same order as the zip. I have tried to stay consistent with the general appearance and color scheme of Audulus.
STS SVG graphics 03-07-2018.audulus (364.5 KB)
Audulus SVG graphics 03-07-18.zip (269.0 KB)
