Vector graphics in vstgui

It seems that the UIDescription Editor only allows to use bitmap graphics. I can’t use SVG or other vector graphic formats from what I see.
However, the default knobs are scalable and it looks like they are indeed vector graphics. Is there a way to use vector graphics in the UIDescription Editor aka vstgui?

No, there’s no out of the box support for SVG. You have to render the SVG to a bitmap with a 3rd party library first. I did this once successfully with nanosvg.

OK, understood. What about the built-in knobs, they seem vector based, I can stretch and resize them and they stay sharp. Can I edit their appearance somehow or add styles to them?

Their appearance is hard coded. A few attributes are changeable, see the attributes in the UIDescription Editor.

1 Like

I have recently managed to get svg graphics working. Loading them from resources on Win, loading them directly from bundle on Mac. Parsing the file with nanosvg as said earlier.

Created class that inherits directly from CBitmap and overloaded draw() method for drawing the parsed svg. If anyone is interested, I could upload a sample, when I clean up the code.

1 Like

Please do.
Meanwhile I worked around it by putting all my graphics in a custom font and using that font for displaying them.
Unfortunately there is a glitch on Windows where the baseline is shifted up a few pixels. (with a fontsize of 90 it’s about 15 px)

Been there, done that :slight_smile: The font solution did not work crossplatform.

May I ask why? Anything else other than the slight offset?
Seems to work ok here, we do compendate for that in the uidescription for windows. Linux and Mac work well.

Honestly I didn’t spent a lot of time with this approach. I tried typesetting some custom logos with font and it looked fine on Win machine, but on macbook running Windows with 150% system zoom it displayed it wrong. So we decided to go other way.

We also compensate the offset on windows but for small fonts, around size 15 with common letters, not any special characters.

I render all my UIs with SVG paths. It’s not entirely user friendly. I have to parse the SVG and translate them to CGraphics paths first and then hardcode them directly into my applications. That being said, once you have them converted to CGraphics paths, you can size them very easily,.

I finished “cleaning” the code. Hopefully if will be helpful.

github. com/TheMates/VSTGUI-SVG-graphics
(it doesn’t let me include a link)

1 Like

Thank you for sharing!

1 Like