You are making your job too difficult. Start with very simple panels made entirely in Inkscape, and make sure the “bounding box” is the full panel. Only then move on to more complex panels. Use other tools at your own risk. There are many things that can go wrong, and very few people to help you with this.
@Squinky gives good advice: It might be easier to start with a working blank panel, then add your inputs, knobs and outputs:
You can use this repo as a template to get started:
GenericBlank: Template for a VCV Rack Blank module (github.com) This template uses px as the base dimension, but this is easily changed to mm in Inkscape Document Properties.
Once you have this module working and displaying the SVG and your inputs and outputs, you can glitz it up with the PCB look of the original design.
The dimensions within your SVG are similar to this snip from your SVG:
<circle
style="fill:#ff00ff;fill-opacity:1;stroke-width:1.02601;stroke-miterlimit:4;stroke-dasharray:none"
id="LED"
cx="4024.5566"
cy="3229.4419"
inkscape:label="LED"
r="4.9212499">
<title
id="title4057">Volume LED</title>
</circle>
An x,y point of 4024.5566mm, 3229.4419mm is well outside the dimensions of a 20.32mm x 128.5mm panel.
I was curious what it would take to get this fixed up, so I actually did it rather than share what I think would need to be done 
Fixed SVG and plugin are here on OneDrive: multi-fixed.zip
The SVG was a lot of work to clean up. There is a lot of unnecessary stuff in there for a VCV Rack panel. I had to learn the weird tricks you need to do to get Inkscape to reduce the transforms to plain coordinates. All in all, it went from 215K to 39K nin size, so It’s going to load and render much faster.
I removed the masks and invisible things and reduced all of the transforms to panel coordinates. There may be a thing or two slightly out of position, and I accidentally removed the light blue ring around the volume knob, and it seems like there’s a missing fourth output, but these are simple to fix at this point.
It is now useless for fabricating a PCB, and there’s no fix for that ;-).
1 Like
hi many thanks for all @pachde today i ask to my bother who work as a graphic designer, to make me a simple layer from my file and once opened in affinity, unfortunately I discovered that there were many more layers than I thought, that’s why I saw it blue in VCV. i have try so with a light version made by my brother but i continue to doesn’t see interactive element, aniways now i can match a working file wit my file. god of bits and semiconductors bless you.
I’m happy it helped!
The zip includes a corrected version of the CPP file, so you can see how it places the outputs on the panel. If the SVG element you’re looking at has a transform/translate/scale applied to it (directly, or on the group or layer it’s in), then the coordinates can’t be copied to the CPP file.
It’s helpful to open the SVG in a text editor to see the details of what Inkscape is doing. It unfortunately tends to add a transform every time you move or resize something. I’m in the habit of typing in the coordinates rather than using a mouse. For anything but initial designs or prototyping, I edit the SVG as text in VS Code and use one of the SVG previewer extensions to see the result.
Another approach is to start with a blank panel SVG, throw your knobs, input, and outputs on the panel using code, then build the SVG around that, copying coordinates from your code.
1 Like
many thanks for the fast reply, aniways, comparing the two files i see the only difference is the coordinates. i have adjust it many times and i havn’t never see interactive elements, so. there is somewhere a sheet who can help me understand the origin and the value of coordinates of the svg files?
if you really want to you can read up on SVG files and learn all the details. It’s pretty complex, but if you would rather do that than make VCV modules, that is of course your choice.
many thanks for the fast reply, aniways
I learn better by looking at working files and trying to write them, than just with theoretical documentation. however what I asked pachde is if there is a file/documentation that makes me understand how the coordinates of an svg file are structured, how they are interpreted by vcv rack and where its origin is usually positioned and how the coordinate values are developed .
if then your comment wanted to be a sterile and not very constructive criticism from a typical social network, I kindly ask you to leave these criticisms to these social networks, as this is not a blog suitable for these things.
If you want to dive deeper into SVG, it’s not that difficult. Open the SVG in a text editor and see what’s going on. It helps to know a little about XML, since SVGs are XML.
THE SVG reference is on MDN: SVG: Scalable Vector Graphics | MDN (mozilla.org)
It also helps to know a little about geometry and coordinate transforms. Some of the high-rated SVG extensions for VS Code have good contextual information that pops up to explain the usage and meaning of the elements and attributes as you type. SVG is hierarchical. so you can have attributes on a group (g element) – a transform, for example-- that affects all the elements contained by the g element. This means that a coordinate specified by an inner element is modified by the transform/translation/scaling on it, or a containing element.
This transformation of the coordinates is a lot of arithmetic to translate into the coordinates that you need to use in CPP code to align things, so best to eliminate them. Who can do a matrix transform in their head? (not me)
Unfortunately, Inkscape doesn’t make it easy or obvious: group items, open transform dialog, check “Edit current transform” and “Apply to each object separately”, and apply the transform, then ungroup (or some sequence like that, repeat until transforms are eliminated). In short, you end up having to un-mask everything if masks are in use, flatten (ungroup) the entire file, and walk through everything, applying the transforms. After eliminating the transforms, you have coordinates you can copy/paste into cpp code. I learned about how to apply transforms with a little web searching.
This is why it’s a lot easier to start from a blank module SVG and build it up. If you’re working with a graphic designer, you have to give them the requirement that transforms, translations, scaling, and especially matrix transforms are not allowed in the final file.
As for working files to learn from, most VCV Rack modules are open source, with a link to that source (almost always GitHub) right there in the module’s menu. I highly recommend cloning some other modules so you can borrow, build, and step through other’s code to see how they work.
With a good VS Code SVG extension (there are several), you can use the popup info to learn about what each attribute and element it is that you’re looking at. This makes things almost as self-explanatory as you can get without a human expert sitting next to you.
I shared with you a fixed version of your SVG, and your module’s source code that displays properly and positions its inputs and outputs and the light on the panel so that they are visible.
Here’s a screen snip of your module, running in Rack:
The ports and the knob are clearly visible.
2 Likes
Sorry. No that is not at all what I was attempting to do. Probably trying to “say” three things in one sentence was not a great idea on my part.
As a background, I have been assuming this is your first VCV module. But I actually never asked, so perhaps that is incorrect. Anyway, what I was trying to say - two constructive things and one somewhat sarcastic, but I don’t think “criticism”:
-
Most developer so not know nearly as much about the details of SVG; we just use SVG. I have developed about 30 modules in the library, and I don’t know any of these details about SVG that have been discussed. @pachde does know a lot about VCV, so he is clearly a good source of information. My belief is that “most” VCV devs don’t know that much about what’s in an SVG.
-
I have repeatedly said in other threads on this social network that a great thing abut developing a VCV module is that you don’t have a “boss” telling you what to do, so you can spend your time doing exactly what you want. There were some things I spent “too much time on” with my modules, but I was free to do it - that’s what I wanted to do. If you have a passion for SVG and VCV panel aesthetics, that’s a great thing, not a bad thing.
-
The mild sarcasm: I personally think it is a strange use of time for a single module developer to choose SVG as their “thing”. But just because I think it’s strange that does not make it so. Is that an unconstructive criticism? Perhaps. Fairly mild, I think?
Anyway, throughout this discussion I have been trying to suggest that a vast majority of developers don’t do this stuff or know about it. So if you have been feeling this is just one a a zillion things that you will need to learn to make a VCV module that is not true. This is actually an esoteric and difficult area that many never look at. A fine one to dive into, but not at all required to make good modules.
“…not at all required to make good modules.”
This is certainly true. Many modules draw their UI procedurally and don’t use SVG (except perhaps indirectly if they use the stock Rack widgets). This means the developers have learned to use the nanovg API.
While I’ve become reasonably knowledgable about SVG, and just released a library for Rack developers to theme SVGs (svg_theme: Lean in-memory SVG theming for VCV Rack plugins. (github.com)), I use them very little in my plugins, and draw my UI procedurally, partly because I needed to parameterize the graphics to offer themes (and I hadn’t written the library yet).
my panels are/were probably 95% SVG, 5% procedural, but I never looked inside the SVG, just used some drawing tool to draw them and that was that.
many thanks for all, am talking about the module i have built and ask you a solution for understand how VCV rack see .SVG files because coordinates in your file are correct and your module show correctly all the interactive element, when my code with placeholder positioned in the same position of your placeholder are showed outside the visible area of my module. anyways, to be clear, your panel are showed perfectly.
I will start by saying that this is not a social network, but a blog; that is, this is not a bar, but a café from the mid-18th century, serious things are discussed here in a friendly way, any non-constructive intervention must not be part of this corner of the internet, that’s why I took it (perhaps thanks to the not being a native English speaker).
leaving this aside, yes, this is the first module that I develop, but I have experience in programming and electronic design, so at the code level I don’t have many worries, my problem is/was understanding how it works on the graphical interface side, because it is structured correctly on inkscape then VCV “saw” it in a completely different way.
That’s correct. The implementation of SVG in VCV Rack is quite limited. Some of the limits are mentioned here SVG-limitations (but it doesn’t mention the viewBox, which is the root of the problem here).
If you use an SVG in a basic and simple way that fits within the limits of nanovg, then it works fine.
I’ve previously pointed out the elements that are causing trouble in the case of your SVG. Note that your SVG is far from a “normal” SVG one sees used on the Web. It contains a large number of non-SVG elements coming from the CAD/PCB Design software that created it (which aren’t even properly namespaced, making it non-conforming XML), and it uses an extensive range of SVG features that make it challenging to use in the context of VCV Rack.
Most of this is somewhat outside the control of VCV Rack. The functionality comes from nanosvg, which doesn’t appear to be actively maintained.
If you feel that these limitations are too constraining or a major problem, feel free to make a support request: VCV - Support (vcvrack.com).
many thanks for the help, after reinstalling inkscape alot of function are showed and alot of bug are vanished, probably because the old version i have installed was be damaged, now i can see all the layers and the components, so the problem was been inkscape. 
1 Like