Why are gradients and opacity rasterized when saving SVG's in illustrator?

Question

I'm a web designer and frequently use illustrator to create graphics for use on the web. The most ideal format for me is SVG because it is light, performant and looks HQ at any size.

Something really annoying is when I try and export slightly more complex graphics as SVG from illustrator, such as the one I included with this post. Any complex gradients or shapes with opacity are rasterized. To get around this I have been simplifying the artwork and then applying the desired effects post design in the SVG code.

As you can imagine, this is highly unproductive and annoying. Is illustrator capable of outputting SVG code that supports complex gradients and opacity? If so, how do I enable this feature?

Answer 1

Well I'm an idiot, finding the answer took approximately a minute of fiddling about with illustrator - as opposed to saving the SVG using the SVG Tiny 1.2+ profile, saving it with something like SVG 1.1 or SVG Basic 1.1 completely eliminated the issue.