Reply To: Multiple Backgrounds: SVG pattern fade + CSS3 Gradient

[maskedwallaby]

I found this page on SVG masking and gradients and got excited: http://tutorials.jenkov.com/svg/mask.html

Current issues, though:

• The examples in this article use simple SVG objects like rectangles and circles for their masks. I’m not sure how to turn my leaf into a useable SVG mask.
• Just looking back at my files, even the leaf pattern SVG is 246 KB. Maybe it isn’t worthwhile to try to do this.

Sure, using an SVG pattern+gradient will result in a nicer-looking end result (will go edge-to-edge rather than the hard edge I’ll get from my PNG). But I don’t want to tax my users’ bandwidth.

I haven’t really considered what this will look like in mobile, but I expect to eschew the gradient/pattern altogether.

Opinions still appreciated,
Chris