simple svg buttons

madbutter's icon

madbutter

Jun 21, 2013, 8:38 AM

I was trying to make a simple picture button from an svg and can't see an easy way to do it.

pictctrl is a pain and looks bad when you zoom and an size adjustments require a round trip to photoshop. An svg button could be resized at will just like other UI objects. Ideally it would also be very configurable in the inspector (everything solid in the svg could be colored using "textcolor", everything transparent would show through to "bgcolor", a border could be specified as well as hover and mouseDown colors for all the above).

JSUI and the svg_render functions of jit.mgraphics are too much work for a simple button or interface graphic.

It seems that this would be easy to implement as several of the M4L live.xx objects let you use svg files. I like the look and workflow of these UI elements so much that even though I don't have M4L I keep using them in my patches. But even with the M4L UI objects I don't see a simple svg button, just a version of umenu and tab that take svgs.

Also the Max authoring interface makes extensive use of svgs. I wanted to quickly re-purpose reload.svg for a button in my interface. I think Max should provide a folder full of SVGs for using in UIs that are easily configured with the inspector, as well as make it easy to add your own.

Does this already exist and I'm missing it? I did some forum searches and found several requests for simlar functionality and some of the above-mentioned workarounds, but no satisfying solution.

-bob

Dan Nigrin's icon

Dan Nigrin

Jan 4, 2015, 4:50 PM

This is an old thread, but I just had the same question and found the answer, so for the sake of the forum archives: Use the live.text object. It has an option to use images rather than text, and it supports .svg files.

szfpro's icon

szfpro

Jul 16, 2017, 8:16 PM

old thread still serving use. Thanks Dan for the response!
Would it be possible to stream the svg numbers into live.text without saving?
This is how SVGs work on the web if not mistaken.

Dan Nigrin's icon

Dan Nigrin

Jul 16, 2017, 11:53 PM

I don't believe that's possible, at least from what I know...

R Kumar's icon

R Kumar

Feb 9, 2022, 10:54 AM

Very old thread - But possibly we can use live.text control. This has a property where you can specify two svg files (separated by space) to be displayed.

Hopefully if this has answered your question, please mark it as resolved. I am a newbie to MAX and one of the issues seems to be that so many questions seem to still be open after so many years !!

Charlie  Thorstenson 's icon

Charlie Thorstenson

Jun 26, 2022, 7:14 PM

..Almost 10 years since the first post. Hah!

Im relatively new to Max and I’m at a point now where I want to add SVGs to make my device look nice.

As mentioned above I use live.text. But first I add the SVGs to my Patching Mode in the form of ”fpic”. Then I type the SVG-names into the inspector of live.text.
-It seems to work. But from time to time the SVGs disappear from my live.text button, not sure why..

-What would be the correct way to go about adding SVGs to live.text? (Am I on the right track..?)

Seems a bit strange that the fpic-SVGs just hang out in the patcher, but I can’t figure out any other way to let live.text know what files I’m pointing to.

Lastly. When Im done with my device, and it looks good and all, how do I ”embed” the SVGs to work properly on someone else’s machine?

Thanks for the help, much appreciated!

Ulysse Sacchettini's icon

Ulysse Sacchettini

Feb 14, 2025, 9:03 AM

Hey ! Now three years since the last post here haha

I was also trying to improve my user interface, and I asked Chatgpt where I could find the symbols I needed. He told me that the svg files used in other max patches were stocked in the installation files, and here are the access:

  • macOS : /Applications/Max.app/Contents/Resources/Cycling '74/interfaces/

  • Windows : C:\Program Files\Cycling '74\Max\resources\Cycling '74\interfaces\

Then I was able to type whatever file name in my live.text, for example: roundpause.svg roundplay.svg

Hope this will help someone.

TFL's icon

TFL

Feb 14, 2025, 10:01 AM

Also, in Max: File > "Show File Browser", type ".svg" in the search bar, and then when you click on a file you see its path. Paths starting with C74 means it's built in the app. Right click > "Reveal file" to show it in Explorer/Finder.