SVG Graphics for Audulus

Introduction emoji%20smile

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: Standard Icons for I/O and Controls.

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 clock%20green
red (input) : r:212 g:20 b:90 clock%20red
blue (output) : r:0 g:133 b:222 clock%20blue
gray (frames) : r:91 g:147 b:159
waveform%20grid

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)

5 Likes

I had forgotten that there was this topic, so I posted some stuff in another thread that should probably be here.

1 Like

Appreciate the help guys. Thanks.

1 Like

I have made some isometric cubes that some creative person may be able to use to add some dimensionality to their creations.Audulus_isometric_cubes_svg.audulus (34.6 KB)

1 Like

@stschoen this is something I have admired for a really long time, but had assumed it was something you could only do on Mac. Then when I saw @petermcclure’s post a second ago, it occurred to me that I think I (have no idea how to go about it, but I) can use Vectormator and its sister app, Fontinator to work on SVG (iinm). How does one go about making these things? I tried to make an icon for a Slack group I am a part of recently, and I have since concluded that decoding the Riddle of the Sphinx looks quite simple in comparison to using an app to make graphic designs. Any beginner tips on this beyond what is posted above?

yeah-I hear ya_ it is a riddle to me also-Im on a Mac and used a program called “hexels” to make the svgs . I have been trying to use Affinity Designer but just haven’t had any success with exporting-Im doing something wrong. It was fairly easy to make the isometric cubes in Hexels- Im hoping to see someone incorporate the cubes into their designs

1 Like
2 Likes

I just found a site that has Vectornator tutorials, in case anyone comes wandering through looking for the information I was seeking. It seems like it could be a good place to start!
Edit: just don’t provide any personal info or sign up for anything, as it appears that the site’s SSL cert is unavailable or expired, as I am getting the ‘Site Not Secure’ banner in my browser when heading to that page using Safari.

1 Like

Thanks-just downloaded Vectomator-

1 Like

3 Likes

I used Affinty to create all the SVGs I created. I listed the settings I use at the top of this thread.

1 Like

I have tried a number of times to create some icons in affinity to import into audulus- I have tried to follow your instructions but I am doing something wrong- I will have another go soon when i am less frustrated

  • but when i load svg into audulus - nothing appears

Did you try opening a patch, selecting the svg node, then option clicking the node to load svg?

Screen Shot 2020-12-16 at 5.23.28 AM Screen Shot 2020-12-16 at 5.23.45 AM

1 Like

I think I see the problem. You are using SVG flatten which will rasterize the document. Here’s mine

!

2 Likes

I see what I did wrong- on final export I did not use the export preset that I created according to your inputs- yay- such a simple thing- silly mistake by me

2 Likes

What vector graphics editor are you using?

I’m using Affinity Designer. I moved to their graphic suite when Adobe switched to the subscription model. I was a long time user of the Adobe creative suite but didn’t care for the idea of subscribing. I’ve found Affinity’s products to be well written and more than powerful enough for my modest needs. I have Photo, Designer and Publisher for macOS and Photo and Designer for iPadOS.

1 Like

Yeah I don’t think I will be renewing the creative suite this year and was casting about for alternatives. Affinity looks pretty solid!

I’ve been pretty happy with Affinity. They used to have a free trial but it looks like they’ve replaced it with a 14 day money back guarantee. I started with photo as a replacement for photoshop and liked it enough to get the rest of the suite. I mostly use designer these days but all the apps are pretty tightly integrated now. You can switch from vector to raster to layout without ever leaving the app.

1 Like