SVG Import?
  • Has anyone had any luck importing an SVG graphic using the SVG node? I was fooling around with Adobe Illustrator today and thought I'd give it a try. All I get after the import is a tiny dot. I suspect it's something in the file, but I'm not sure what to look for. I tried to attach a sample file but the Forum won't allow an SVG upload.
  • Yeah, I can't get it to work either :-/
  • I finally figured out what was wrong. After inspecting the SVG file with a text editor I figured out that Audulus was having trouble with the image size in the file being set to 100% of the viewbox size instead of specified directly in co-ordinates. Seems that Audulus is a bit picky about some SVG tags. I was using Affinity Designer tonight and it has an option to not specify a viewbox when exporting. When I turned the viewbox off it worked. I was also able to successfully export an SVG from Adobe Illustrator and import it into Audulus. I'm looking forward to doing some custom graphics.
  • @stschoen - if you can make & share templates that outline the size of the knobs, meters, buttons, etc, that would be amazing! I'm not very familiar with SVG stuff myself, but it would be cool to get this going.
  • @biminiroad I'm not sure exactly what you're looking for. Do you just want an outline of each element? Also the software you guys use for the Forum is set to prohibit upload of SVG files. I tried to upload a sample when I was trying to figure out what was wrong and the Forum wouldn't allow it. I guess I could embed them in a patch and upload the patch. Copy and paste seem to work fine :)
  • Taylor continues to amaze me. I was playing with some SVG images I imported and I wondered how they would behave in a sub-patch. I grouped an image and a knob and lo and behold the image has an expose option when in a sub-patch. So with a little work you can have a custom graphic for your module! Sweet.
  • Heres a patch with my simulated fader graphic. After playing with it a little more I realized you would probably want the SVG files separately. You can copy and paste an embedded SVG graphic but you are really pasting a link to the same file. Delete one and they all go away.
  • @stschoen - you can probably put them in a .zip file and that will work. It's probably balking at the .svg extension.
  • I was wondering if a zip file would be OK. Good to know. What kind of images were you looking for? Here's a modified clock module (silly I know, but I'm intrigued by the possibilities) and the SVG file.
  • Here's something that might actually be useful. @SansNom mentioned marks for the knob.
    Knob with Marks.audulus
  • @stschoen - that's badass! but would you mind making the hash marks a little larger so you can see them when the knob is being turned? right now, they disappear when you go to modify the knob. Good job though!

    And I was thinking as far as templates go - like how did you figure out the diameter of the knob, and could you do the same for the button as well? maybe the diameter for the "resting" knob and the "turning" knob?
  • I got the diameter of the knob through trial and error. Now that I have a handle on how things work, I should be able to standardize the sizes in the drawing tool I'm using (Affinity Designer). Designer is a new tool for me, but I'm weaning myself off the Adobe Creative Suite. I can't really justify subscribing to the Creative CLoud and my version CS5.1 is getting pretty flakey on the current macOS. I'll make the hash marks a bit larger and repost.
  • WHAT!? I need to go back and more carefully understand how you did this. I am really itching to put a more personal touch on some of my modules.
  • How's this? (7-1 updated files)
    Knobs with Bigger Marks.audulus
  • @RobertSyrett, what graphics tool are you using?
  • @biminiroad, as long as I am playing around, here's a fader closer to your original design as well as a hybrid.
    Alternate Fader.audulus
    Final Fader.audulus
  • @stschoen I think the second slider is more in keeping with the overall aesthetic of Audulus. Also I like the larger marks as they become useful when you are adjusting the knob.

    I am using Creative suite Illustrator CC 2017.
  • My version of Illustrator is pretty old and it looks like they've changed thing a bit, but you want to select the graphic you want to export and choose Export Selection rather than exporting the whole artboard. The larger frame may not display in Audulus, but it will prevent you from selecting anything under the frame. I can open an SVG in Audulus exported from AI CS5.1 but in my case you have to choose "Save for Web and Devices" to export SVG and I had to manually crop the document before export.
  • I tried exporting selection, but there was no option for saving for web. When I imported to audulus nothing showed up :-(. Also, why can't we upload svg files?
  • I'm making headway on getting the scale correct. Here's some basic elements that are pretty close. SVGs are blocked for some reason. Zip files work. Adobe removed the save for web and devices option from the current CC product. I don't have CC to play with, but I would be willing to bet that your problem is something in the export options. Send me a file and I'll have a look. (7/1/17 - updated the file)
  • Much appreciated!
    Asset 1
  • Here's my Illustrator file along with the SVG export and an Audulus sample. Your file opens fine in Safari, but when I open it in Affinity Designer it's blank. I'll do a little more digging.
    Adobe Trigger
  • @RobertSyrett, turns out that Affinity Designer chokes on embedded CSS styles, perhaps it's the same with Audulus. Try flattening the file to one layer, select the graphic then export the selection with the following options: Styling - Presentation Attributes, Font - SVG should be OK since no text. Images - Embed, Object ID's - Minimal, Decimal - 2, Minify - On, Responsive - off
  • IT WORKED! Thanks for all the settings info, because every single default was wrong. I would like to know how the scaling works, but this is a good start. Thanks a million @stschoen!
    FLUX CAT.audulus
    Screen Shot 2017-06-28 at 8.57.58 PM.png
    1611 x 1063 - 174K
  • @RobertSyrett, I've found that if I set the canvas to 72 dpi then the small control frame is 120 px X 40 px, a trigger button is 30 px and an I/O circle is 20 px. Line widths are 1.5 to 2 pts. I did a screen capture and imported it to grab the colors.
  • @biminiroad, what did you think of the basic shapes I posted earlier (as well as the hybrid fader and enlarged knob marks)? I would be happy to create an SVG document with outlines of all the basic nodes that you could cut and paste from, If you think it would be useful. I can't currently generate sound from Audulus on my mac but that doesn't stop me from playing with the graphics.
  • +1 @stschoen happy svg document
  • Oh, I have wanted to do this for a long time....
    Screen Shot 2017-06-30 at 11.48.45 AM.png
    846 x 731 - 85K
    Mini Osc.audulus
  • Here's an assortment of basic shapes from the Audulus toolkit. Copy and paste as needed. I thought a single document would be more useful than a set of files.
  • very handy!
  • You wouldn't happen to have the light diameter available would you?
  • How's this?
  • Wow. I didn't even notice that node...
  • How to load a SVG on iPad? Nothing happens when I tap on "load SVG".
  • The iPad unfortunately doesn't have a traditional file system, so there is no way to browse to an SVG file. That's why the SVG node isn't available in the iPad node browser. It is possible to cut and paste an existing SVG image from one patch to another. Select the SVG image (if it is internal to a module you will need to open the module first) then select copy, close the patch, open the target patch and select paste.
  • Thank you. I will import them with my MacBook and synchronize the patches via iCloud. Should do the trick.