Component sizes in Inkscape vs Rack

Development
1

To plan out my components when I’m making a panel, I will open SVGs for knobs and stuff from the Rack/res/ComponentLibrary, and copy those into my project. But when I build the module and open Rack, the components are larger than they are in Inkscape. Is there something I’m missing? How can I make these the same size?

I’m using Linux, and the only thing I’ve found (the link in this post) isn’t getting me anywhere, changing the default CSS pixel size hasn’t changed anything.

2

#1 no need to copy the Rack resources, unless you’re going to modify them. If you want to do that, make sure that the license allows you to do that. If you aren’t changing them, your module can simply reference them at runtime without copying the files:

Svg::load(asset::system("res/ComponentLibrary/WHATEVER.svg"))

CSS is not applicable to SVGs in rack.

Rack’s assets are in a mix of mm and pixel units, so copy and pasting across files with different units can get messed up. The default mm to px conversion in Inkscape (based on 96 DPI, I seem to recall) isn’t the same as Rack’s (based on 72 dpi).

Inkscape’s DPI doesn’t agree with the nominal DPI in Rack, so they’ll never look quite the same. As long as your components are in the right proportion to the size of Rack modules (increments of 15 pixels by 380 pixels for a module), you’re fine.

Things will be easier if you work in pixel units. Forget using mm. If you want things the same size, count the pixels.

For tips on making panels and working with SVGs for Rack in Inkscape, see my rack-dev-notes. (The Panels article, specifically). I include instructions for good Inkscape Document Settings for Rack panels.

1 Like
3

I think you mean 75 DPI, as set here: Rack/include/window/Svg.hpp at 061ccf63c1758599396ac1bb10d47345d9d34076 · VCVRack/Rack · GitHub

Since Inkscape is recommended, and has a default of 96 DPI, it’s kind of interesting the same wasn’t used, especially since it’s arbitrary, as the comment says.

1 Like
4

Thanks. To be clear, I don’t include them in the finished panel, I have a layer than I hide when I’m finished that I use mostly just to make sure my knobs and things have enough space between them and see what the finished thing will look like. As I’m writing this I’m realizing that it might actually be more straightforward to just shapes to represent knobs and stuff, and to make them the sizes I want for the custom stuff I’m intending to make. I’ll check out your dev notes, I’ve only been to glance at it right now but it looks like it answers all of my follow-up questions.

5

The Dev notes include a template file of pre-sized (pixel unit) plain placeholders for common Rack widgets: lights, knobs, switches, buttons, and ports (but not all Rack widgets (yet).

But yes, it can be helpful to have something more visual for visualizing the final template. I haven’t prepared such a reference for Rack widgets - not sure that publishing that would be acceptable use under the license for Rack assets. That’s something I’ll need to investigate.

Many Rack widgets are composed of multiple SVGs and runtime-drawn elements like some shadows. A faithful visual would compose the components and simulate the runtime drawing.

6

thanks for this. Looking through your dev notes, could you give me an example of how to use the svg helper? Specifically, I’m confused what I should enter as arguments for itemBounds(). I tried using the ID I entered in inkscape (“k’“) and I receive this error when building:

could not convert ‘(const char*)"k"’ from ‘const char*’ to ‘std::shared_ptr<rack::window::Svg>’

the referenced line is this:

addParam(createParamCentered<Davies1900hWhiteKnob>(svg_query::itemBounds("k").getCenter(), module, Blank::KNOB_PARAM));

I’m assuming it is wanting a reference to my panel SVG, but I’m not entirely sure how to do that

7

The object names in Inkscape are not ids: they appear in the svg xml as inkscape-label attributes. To edit ids in Inkscape, you have to use the object properties tool.

Myself, I edit these in a text editor (delete the inkscape-generated id and find/replace “inkscape-label” with “id”, and inkscape generally preserves them.

1 Like
8

The signature for item bounds is:

::rack::math::Rect itemBounds(std::shared_ptr<::rack::window::Svg> svg, const char* id);

It’s looking up information from your SVG, so you need to pass it the loaded panel Svg.

The are three helpers to retrieve the Svg from your panel, assuming you’re using standard Rack panels.

// Get a panel Svg(s)
inline std::shared_ptr<::rack::window::Svg> panelSvg(::rack::app::SvgPanel* panel) { return panel->svg; }
// The Light Svg panel is used by default
inline std::shared_ptr<::rack::window::Svg> panelSvg(::rack::app::ThemedSvgPanel* panel) { return panel->lightSvg; }
// Can also use the Dark Svg of a themed panel
inline std::shared_ptr<::rack::window::Svg> panelDarkSvg(::rack::app::ThemedSvgPanel* panel) { return panel->darkSvg; }
1 Like