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

Answer 4

I've been trying to get gradients to work through trial and error, because the SVG output saved by Illustrator isn't interpreted correctly by the Flex SVG compiler (opacities for overlapping elements are simply added, which does not achieve the intended effect).

There seems to be a bug in the Flex SVG implementation for gradients. In order for a vertical gradient vector to be interpreted correctly, I had to set the opacity of <g> to a positive, fractional value. The value itself doesn't appear to matter too much. In addition, Flex is drawing a sort of border around my gradient rectangle, which is annoying and I can't figure out how to remove.

Here's my SVG content:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" viewBox="0 0 1000 1000"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <rect x="0" y="0" width="400" height="400" fill="#0000ff"  />

  <g opacity="0.1"><!-- here's the special value, for vertical gradients -->
    <defs>
      <linearGradient id="glow" x1="0%" x2="0%" y1="100%" y2="0%">
        <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.4" />
        <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
      </linearGradient>
    </defs>

    <rect fill="url(#glow)" x="50" y="50" width="200" height="200"/>
  </g>

</svg>