Create SVG Icons for HTML5 with Flash & Style with Snap

GOAL: programmatically change the color of different parts of a SVG icon; clone that icon; and give the cloned icon different colors.

Personally, I find Flash the easiest tool for creating vector graphics simply because I’ve spent the the most time with it. I’m sure other tools like Illustrator, Inkscape, Sketch are great too but, for me, I feel clumsy inside them and can’t produce what I want as easily as I can with Flash.

Flash CC has an new Export Image as SVG option. How can I setup my flash file to best exploit this new feature?

I want to keep it simple so I created a flash file with 3 layers. On each layer, I have created a movieclip which has the same name as the layer. I’m not using nested graphic symbols. In each movie clip, I’ve drawn a complex path.

When I export this flash file as a svg, it creates an svg putting the 3 movieclips as groups within <defs></defs> tags and then uses xlink to find the those paths. This vastly reduces file size.

I know that I want to create at least 2 icons for this demo, and many more in the final app which would change their color through different interactions.

I'll clone the original icon keeping the file size small since we’re re-using the linked symbols. We could create thousands of icons without bloating the file.

It's a little strange that Flash gives each layer a corresponding id. I think it would be better - for the sake of re-use - if it also provided a class name which would not need to remain unique. The ids are only useful in the original icon. Once Snap has cloned them, they become useless since they appear to be random strings which are hard to remember.

After I have prepared my icon.svg, I can start to manipulate it using the snapsvg library (http://snapsvg.io/).

The tricky was finding the appropriate handle to the actual path and discovering that I could use the paper property. Again, I also realized that ids wouldn't help me when I cloned the svg and thus relied on recording their indexes with 3 simple variables. I could have taken this further and created a lookup table for more complex icons.

$(document).ready( function(){

    var viewport = Snap("#container");
    var imgPath = "icon.svg"; 

    var backgroundIndex = 0;
    var iconIndex = 1; 
    var checkIndex = 2;

    var black = "#000";
    var hotpink = "#FF69B4";
    var forest = "#009900";
    var darkRed = "#970000";

     Snap.load(imgPath, function (documentFragment) {

        viewport.append(documentFragment.node);

        // first element is easy since it has this id which I set in Flash on the movieclip... 
        Snap("#container").select("svg").select("g").paper.selectAll("path")[checkIndex].attr("fill", darkRed);

        // ...but when I clone it, I lose the original ids for each layer but I've stored them as index variables above 
        var clone = viewport.select("svg").clone().attr("id", "icon2");

        viewport.select("#icon2").select("g").paper.selectAll("path")[checkIndex].attr("fill", hotpink);
        viewport.select("#icon2").select("g").paper.selectAll("path")[backgroundIndex].attr("fill", black);
        viewport.select("#icon2").select("g").paper.selectAll("path")[iconIndex].attr("fill", forest);


      });

});

demo
http://www.headwinds.net/lab/snapicon/index.html

More Reading (SCSS, inline SVG)

http://css-tricks.com/gotchas-on-getting-svg-into-production/