SVG transparencies and gradients?

Development
1

I’m working on a fancy light/button that’s composed of a few different SVG shapes. Some of the shapes have transparencies and some have gradients.

image
image1159×1161 94.5 KB

image

However, when the light/button is rendered by Rack, the gradients disappear. I’m using Inkscape. Any suggestions?

2

pretty sure that library supports linear gradients with one stop. Are these circular gradients? Pretty sure it can’t do those.

1 Like
3

Yes, these are circular gradients. Good to know.

4

https://vcvrack.com/manual/Panel#SVG-limitations

SVG limitations

The SVG standard is extremely broad, and very few (or no) renderers support the entire standard. Rack’s SVG renderer does not support the following features.

  • Text and fonts: All text objects must be converted to paths. This can be achieved in Inkscape with Path > Object to Path. As a benefit, this avoids license issues with embedding proprietary fonts.
  • Complex gradients: Simple two-color linear gradients may work.
  • CSS: Although, most fill-* and stroke-* properties are supported in inline style attributes.
1 Like
5

That was very helpful! I’ve been able to create a few gradients that work by avoiding complex gradients. Thanks for pointing me in the right direction.

1 Like
6

Old thread, but bringing Rack’s nano SVG capabilities up to date for June 2023:

  • Only two stops per gradient. Just a start and an end.
  • Linear and simple Radial gradients are supported.

FWIW i see that nano has an incomplete PR on it adding support for more stops.

Radial gradients are more challenging to use because it’s easy to get very different results in Inkscape and Rack. At the SVG element level, it appears that nenovg ignores the fx and fy attributes. Stick to radial gradients that specify only a center position (cx, cy), a radius (r), and two stops.

2 Likes
7

This thread is even older now, but I had a similar problem - I was making a knob with a radial gradient in the SVG, and it didn’t show up as a gradient.

TL;DR: line 149 in Rack/src/window/Svg.cpp gives the gradient radius a hardcoded value of 160:

paint = nvgRadialGradient(vg, s.x, s.y, 0.0, 160, icol, ocol);

I changed that to use the values in the stops and get much better results:

paint = nvgRadialGradient(vg, s.x, s.y, inverse[0] * g->stops[0].offset, inverse[0] * g->stops[g->nstops - 1].offset, icol, ocol);

I’ve emailed VCV support, and hope that they’ll incorporate this fix or write a better one - mine’s good for round objects but doesn’t handle elliptical objects well, just uses the short radius.

OK, so the long story is that I experimented with bigger objects on a panel, and could see that the radial gradient was happening, but not in the right amount of space. Inkscape: Inkscape_cropped

Rack with the original code; see how the gradient doesn’t get to the dark blue, as if the radius is bigger than the object: Rack1_cropped

Rack with altered code; matches Inkscape: Rack2_cropped

Hope this helps!

8

NanoSvg supplies the Rack SVG support, and the version Rack uses supports only circular radial gradients.

1 Like
9

Very interesting! I’d love more options when it comes to this.

10

I don’t know if you’ve tried 2.6 yet, but gradient handling is much improved!

1 Like
11

I haven’t! I’ll keep this in mind!