I noticed a mismatch in the size of knobs and inputs/outputs svgs from the Component Library. When I import them in inkscape they are smaller then when the module appears in VCV: see image. Also, the knobs Rogan1PRed/Blue… look different if I drop them in Inkscape. I did scale everything as instructed in the Development Tutorial. Thanks for any help!
2 Likes
I’ve seen this also. There’s something funky that Inkscape does with some of these SVGs when importing.
What I’ve found that works better for working up a design using the component library SVGs, is to open the library SVG separately as a file in Inkscape, then copy and paste into your panel. This does a better job of maintaining the size and appearance of the components.
Keep in mind that many of the components have two layered SVGs, so if you want an accurate mockup, you need to emulate the same layering with the background SVG (and or light).
When it comes to building the actual panel svg to be included with the module, these must be removed or put in a hidden layer. Personally, I use design master files, then for the module svgs included in the package, I strip out all the Inkscape goo and design-level layers.
1 Like
Blockquote Personally, I use design master files, then for the module svgs included in the package, I strip out all the Inkscape goo and design-level layers.
thanks! What do you mean by design master files? How do you strip the Inkscape goo…?
Yes, I also tried to follow the tutorial guidance, and ran into similar scaling problems.
Then I looked at the source code for the VCV Free (nee Fundamental) modules, and discovered that VCV did not follow the recommended standard! The VCV svg files use pixels as the unit, with a height of 380 pixels, and a width of 15 pixels per hp. I adopted that practice, and everything has scaled perfectly. I am able to read the pixel coordinates directly from inkscape and use them when I add the widgets in code. Actually I read the upper left corner of my widget, as well as the width and height, so I can then compute the center point.
Within the svg, I typically get the width and height of the component svg and then create a geometric shape with those dimensions in my faceplate (using a layer that can be hidden). Again, I use pixels as my units. I have also had some success simply pasting the component svg into my faceplate svg (again on a dedicated layer). But pasting the actual svg can sometimes be finicky.
I have yet to have any problems with this approach.
2 Likes
My workflow is not what most devs do. I happen to have past experience with low level SVG stuff because I find it interesting.
There is a broad spectrum of how folks manage their designs. Some devs use SVGs very little and draw everything in code. I tend to do a lot of the drawing in code, because I need to parameterize for theming and it can be easier to do everything in one place than to keep code and SVG in sync.
I keep separate SVG files in the repo (in a design folder) for making full-mockup designs. I copy them to the res folder and strip the unnecessary info manually using a text editor (VSCode). Someday I might write some code or a script to do this stripping, because it’s entirely mechanical but haven’t bothered to do that yet.
Once a module is stable, if there are small UI changes needed (like nudging some element), I can usually do that directly editing the SVG as text. If I’m redesigning or adding a lot of elements, I go back to working in a design master in Inkscape.
I use VSCode for development and there are some decent SVG extensions in the library that provide side-by-side preview, making it easy to see what you’re doing.
Like @DaveVenom I work all in pixels rather than millimeters. This makes it much easier to translate between SVG and code without using a lot of runtime conversion with mmToPix. One reason to use millimeter is if you’re working from Eurorack hardware designs.
The Rack component library, Core modules, and Fundamental modules are not consistent on using mm vs pixels. Some svgs are very clean and minimal, and but others carry over extras from whatever editor was used (mostly Illustrator and Inkscape).
1 Like
Thanks @pachde and @DaveVenom this is all very helpful. The pix unit measurement seems to be the ne detail that makes it all come together. They should really update the tutorial 