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.


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.

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