@rakoonic, you’ve done an amazing job in getting this started in a very short amount of time! Much appreciated!
@ingemar: It does seem that taking advantage of the svg format would make sense, especially when you get the benefits of gradients, named layers, etc. Here’s a small sample from Illustrator that has just two simple shapes, one with a gradient. Each is on a separately named layer (“test1” and “test2”:
<?xml version=“1.0” encoding=“utf-8”?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=“1.1” xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink” x=“0px” y=“0px” width=“792px”
height=“612px” viewBox=“0 0 792 612” enable-background=“new 0 0 792 612” xml:space=“preserve”>
<g id=“test1”>
<polygon fill="#ED1C24" stroke="#000000" stroke-miterlimit=“10” points="220.006,148.871 295.466,148.871 306.509,208.994
229.822,229.239 216.938,173.411 "/>
</g>
<g id=“test2”>
<linearGradient id=“SVGID_1_” gradientUnits=“userSpaceOnUse” x1=“261.7236” y1=“178.3193” x2=“360.4971” y2=“178.3193”>
<stop offset=“0” style=“stop-color:#FFFFFF”/>
<stop offset=“1” style=“stop-color:#000000”/>
</linearGradient>
<polygon fill=“url(#SVGID_1_)” stroke="#000000" stroke-miterlimit=“10” points="283.81,125.558 261.724,183.84 297.307,235.988
360.497,192.43 314.485,120.65 "/>
</g>
</svg>