What types of SVG gradient fills are supported when using the Embed meta tag in ActionScript3

Question

I've been trying to embed some svg files into an AS3 project using the Embed meta tag. For example:

[Embed(source = "assets/image.svg")]
private var Image : Class;

However when displaying these files as Sprites only some of the gradients are surviving the embeding process.

From what I've found simple (2 step) horizontal gradients seem to stand the best chance of being preserved, but sometimes other kinds of gradients are as well. In one case simply rotating an object 90 degrees causes the gradient to vanish when displayed in flash.

Does anyone know a rough set of rules to use when creating svg gradient fills so they are preserved when rendered in flash?

BTW: I used Inkscape to create the images in question.

Update: Bizarrely the solution to this seems to be setting the opacity of any object in the svg file whose gradient isn't displayed properly to a value below 1. Don't ask me why this works but it does. It does however have the unwanted side effect of the objects edges not being rendered as smoothly.

Answer 1

Just a suspect, I never heard of SVG in ActionScript before:

Inkscape doen't create new gradients every time you assign one to an element and modify it. Rather it creates an empty gradient and references to an original. Like this:

<linearGradient id="linearGradient4168">
  <stop style="stop-color:#5f0000;stop-opacity:1;"
     offset="0" />
  <stop style="stop-color:#bc0000;stop-opacity:1;"
     offset="1" />
</linearGradient>

<linearGradient
   xlink:href="#linearGradient4168"
   id="linearGradient4174"
   x1="4.5130615"
   y1="6.9258556"
   x2="3.3891001"
   y2="1"
   gradientUnits="userSpaceOnUse"
   gradientTransform="matrix(1.0588235,0,0,1,-2.9411764e-2,12)" />

I would bet, that you can reference #linearGradient4168, but not #linearGradient4174 in AS. But once again, I have no clue of SVG in AS.

Cheers,

Answer 2

I believe the code used to convert your svg into a sprite is done with this code here which uses Batik.

FWIW, the svg embedding documentation says:

• Flex supports a subset of the SVG 1.1 specification to let you import static, two-dimensional scalable vector graphics. This includes support for basic SVG document structure, Cascading Style Sheets (CSS) styling, transformations, paths, basic shapes, colors, and a subset of text, painting, gradients, and fonts. Flex does not support SVG animation, scripting, or interactivity with the imported SVG image.

... but that doesn't help you with specifics. Depending on which version of Batik Adobe has bundled, this list might help.

---

This looks helpful - information on which gradients from inkscape are not supported fully in batik.

Answer 3

Your best bet is to open the SVG files in Illustrator and export them as FXG files (you'll need the latest version of Flash Professional / Flash Builder to handle these though). Then read this on how to get the FXG files successfully into Flash / Flex