I finally got all my depencies to build, but now my modules don’t render gradients on the panels. Anyone else ever run into something like that? Any open source plugins I could build that use gradients on the panels?
Your issue is likely that nanoSvg doesn’t support complex gradients.
Here’s a complete blank panel with a gradient that works:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="105" height="380" viewBox="0 0 105 380"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gpanel" x1="0" y1="0" x2="0" y2="380" gradientUnits="userSpaceOnUse" >
<stop offset=".2" stop-color="#7f1c2b" />
<stop offset="1" stop-color="#f2ff05" />
</linearGradient>
</defs>
<rect id="panel" fill="url(#gpanel)" x="0" y="0" width="105" height="380" />
</svg>
For reference, reduced from a temporary panel in (#d) CHEM – not yet in the library.
You can find a number of working linear and radial gradients in the svg_theme demo Lean in-memory SVG theming for VCV Rack plugins..
sure, but my modules all look fine in the library, and they all have the same gradient. In my current dev build they don’t show. In this case, you are not correct.
If you’ve synced to current Rack source (or updated the sdk in the CI), I think they took a change to nano recently which could account for a difference between the library and current builds.
Care to share an SVG that demonstrates the issue?
1 Like
Yeah, the gradients look fine in the theming demo of yours. I’ll have to do more experimenting to see why mine are different.
Happy to take a look at your svg and see what I can find.
I have an idea of where the issue might lie: if the gradient stop doesn’t specify an offset and/or index, you end up with a one-stop gradient with the last one as the color. 100% transparency is the last stop in many gradients (it’s the inkscape default), so you end up with a transparent fill (nothing).
I had to hand edit this SVG when I made it (like two years ago?). I made it in (tool which I am forbidden to mention, but it’s not Inkscape). Like I say, they always worked, and they work in the “real” build of VCV. I’ll get you more info.
Here’s a typical one. Doesn’t look right in the github preview. Also looks wrong in chrome.
I think when I hand tweaked them I reversed the ends or something (x and y values). It’s been so long I don’t really remember.
Could you contact us at VCV Support about this? There was a change in the handling of SVG gradients since Rack 2.5.2, and if there’s a problem with the changes it’d be good to get it into the system so we can look into it.
1 Like
The image looks wrong for me in Edge, in VSCode preview, and Windows file explorer preview (which is probably all Chrome underneath). Also looks wrong in Inkscape. This suggests to me that nanoVG actually fixed a non-conformance/incompatibility.
If you sort the stops by increasing offset, then it looks right.
<linearGradient id="linear-gradient" x1="50%" x2="50%" y1="100%" y2="0%" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#200020"/>
<stop offset="100" stop-color="#500050"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="50%" x2="50%" y1="100%" y2="0%" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#500050"/>
<stop offset="100" stop-color="#200020"/>
</linearGradient>
2 Likes
Interesting. And presumably they still work with the old VCV?
done. thanks.
1 Like
I did this to some of them, and now they display correctly in browsers and such, but they still look broken in VCV. What version of VCV did you use? I don’t think you need to do anything funny to clear any cache or anything, do you? Oh, never mind. It’s what support said - the offsets need to be 0…1
I wasn’t even looking at VCV, since I saw issues with rendering in every other tool.
I have a gradient where the offsets are .2 and 1 and it’s working fine in VCV and the other tools. The important thing appears to be that they’re in ascending order.
I’m currently building with 2.6.2.
sorry, poor formatting on my parts. I needed to make the offsets be in the range of 0 to 1. Which of course makes sense. My range was 0 to 100, which would only make sense for a percentage.
2 Likes
