Icon Sizes

tutorial
reference
#1

These measurements were taken from screen shots on an iPad Air 2. I can create SVG icons with an iOS app. The Vectornator app worked well. I had issues with the Graphic app as it left black background rather than a transparent background for enclosed objects. I exported the SVG files to macOS, loaded them into a Cloud shared patch and they worked for both Audulus iOS and macOS.

Icon width height units
Inside Knobs 70 70 pixel
Button Square
outside
95 95 pixel
Input or Output
square outside
64 64 pixels
Osc rectangle 146 80 pixels
Waveform
display
880 300 pixels
1 Like
#2

Thanks for posting this!

Can you explain this a little more? Two different apps?

#3

Yes, these are two different iOS apps. With the Graphic app, the inside of objects ended up with a black rather than a transparent background (e.g. the middle of an “o” would be black).

If you knew what you were doing, you could probably use a text editor on the SVG files created with the Graphic app to fix this issue.

1 Like
#4

So you were able to make transparent SVGs that work with Audulus? If so can you upload one as an example? This is something other people haven’t been able to do yet.

#5

NoteBeat v1.1.audulus (549.0 KB)
Here’s an icon used to indicate note and pulse information on Dropbox as I can’t directly upload SVG files to the forum. To be clear, I did have to load the SVG file into a patch on Audulus for macOS and then opened the patch on iOS. Although the option to load SVG files is in the iOS version, it doesn’t do anything. The patch shows the icon and others I made on iOS.

1 Like
#6

I’ll get that fixed so you can upload them directly thanks for pointing that out!

#7

Should be enabled now - retry?

#8

I logged out and back in again but the approved upload types still didn’t include SVG.

1 Like
#9

Ok I’m out of the house at the moment but will look into fixing this when I get back :+1:

#10

The issue we were having wasn’t transparency. All the SVG files I’ve used had transparent backgrounds. The issue was the fill mechanism used for closed curves. The SVG library Audulus uses doesn’t support even-odd fills and as a result “holes” within closed curves such as an “o” are filled in. FYI I created the icons using Affinity Designer for macOS. I’ll post my settings and other info as soon as I get a chance

1 Like
#11

@stschoen I was mistaken and did have the shape with holes issue you mentioned with the Graphic app and the Vectornator app. I will have to do more research on this issue for my own edification.

2 Likes
#12

The SVG files exported from the Vectornator iOS app end up importing as a small dot into macOS. There’s information in its header section that causes this, I’ll have to research the SVG specs to see what I can do to edit the files so they work correctly.

1 Like