SVG Bitmapped Images or Musical Symbol Fonts

Is it possible to render a SVG bitmap image in a module. I was experimenting with Inkscape by importing a bitmapped image. This image shows up in Inkscape for the SVG file, but the image object is either not parsed by the Rack SDK, or is not rendered by the nanovg library. At least that is what it seems since I cannot see the image on the panel inside of my module. I’ve also tried “Object to Path” in Inkscape.

Alternatively, is there an open source musical symbol font that can be used within a Rack module? I can get a few symbols to render via nvgText() using “Alt codes” in my C code editor, but that is very limited.

I’m trying to add some capabilities from my Meander for Windows app, such as display a music staff and playing notes. If someone knows how to do this, I will continue playing with it, but otherwise I will probably drop it.

Thanks for any info anyone has.

MusiSync is an open and free to use font, no links, sorry. You can convert all symbols to paths and you can use svg just like sprites of images. Don’t know how to do it in Rack.

Object to path won’t work on bitmaps. You can vectorise images based on colour, but the result is not great and heavy on nodes in the resulting splines. An other option is to turn bitmaps rasterised images and turn the raster into vectors, you’ll get a news paper like print. Not what you’re looking for.

Maybe look here ?

You have to convert raster to vector. You can do so within Inkscape, though results will may not be desirable. Right click on the imported image and trace bitmap, setting scans to a higher number will layer more vectors. Bitmap support was dropped in v0.5 iirc.

1 Like

I was able to download MusiSync.ttf and use it with nvgText() in my module. Looks like it will probably do what I want. Thanks.

That looks very interesting. I will have to take a look at it. Thanks.

1 Like

That worked great! The converted bitmap file image shows up in my Rack module now. This gives me something to play with in addition to the ttf font files. Thanks!

Here are both approaches in my module. The top musical symbols are done via nvgText() and MusiSync.ttf font with unicode character codes in sprintf(). The lower clef symbols are from my old .BMP fonts I created for Meander many years ago. This came in via the SVG file.


1 Like

Continuing along this train of thought, is it possible in a Rack module to walk the object list that was loaded from the SVG file. In this case, I have a rasterized “image”, coming from the SVG file. Can I find that image object in my module and do things such as change its position coordinates on the panel?

Using MusiSync.ttf as a starting point, I’ve created a font for use in Rack that allows me to draw a fairly complete music score. You’re welcome to use it if you like.


I was looking at this on GitHub earlier today and was impressed. It is probably overkill for what I’m doing, but I will at least take a look at how you are doing things. Thanks for the offer.

I downloaded your source from GitHub and am browsing through it. It is giving me some good ideas on how to work with MusiSync.ttf . Thanks again.

It’s totally possible. The svg handle just is the nanoSVG api.

there’s an example of me grabbing all my switches and changing the color, for instance.


I built your plugin/module with no problems, and added it to a patch in Rack with no problem, but whenever I click on the panel Rack crashes. Does the GitHub project have all of the dependencies, etc.? I’m developing under Win10/64 and building with Rack SDK v1.1.5 and running Rack v1.1.6 .

It would not build if there was missing dependencies.

I should have said “resources” rather than “dependencies”.

Missing resources shouldn’t constitute a crash they just would not show.

That looks like what I was looking for. I’m have trouble understanding how this works. In the following, what object type is “frames” and how did you get it, or is it a member of the Rack/SDK API? I see one referenced to frames in your code, but that is within an if MAC conditional and has something to do with the callstack backtrace. I’m on Windows. Am I misinterpreting this?

Oh, I see. frames is a member of the SvgButton and SvgSwitch structure types and is a pointer to a Svg object.

So, I’m a bit hazy, how would I find the SVG image object that was within the SVG file?

I think I see. I have to find the NSVGimage* and then run through the ->shape list and look at the NSVGshape id[] to match up to the SVG file object. Right?

Rack-1/src/svg.cpp shows how to traverse the svg image in svgDraw() .