SVG transparencies and gradients?

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

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

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

1 Like

Yes, these are circular gradients. Good to know.

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

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

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