Crie ícones SVG para HTML5 com Flash e estilo com snap

META: alterar programaticamente a cor de diferentes partes de um ícone SVG; clone esse ícone; e dar ao ícone clonado cores diferentes.

Pessoalmente, acho o Flash a ferramenta mais fácil para criar gráficos vetoriais, simplesmente porque passei a maior parte do tempo com ele. Tenho certeza de que outras ferramentas como Illustrator, Inkscape, Sketch também são ótimas, mas, para mim, me sinto desajeitado dentro delas e não consigo produzir o que desejo com a mesma facilidade com o Flash.

O Flash CC possui uma nova opção Exportar imagem como SVG. Como posso configurar meu arquivo flash para explorar melhor esse novo recurso?

Quero mantê-lo simples, então criei um arquivo flash com 3 camadas. Em cada camada, criei um movieclip que tem o mesmo nome da camada. Não estou usando símbolos gráficos aninhados. Em cada clipe de filme, desenhei um caminho complexo.

Quando exporto este arquivo flash como um svg, ele cria um svg colocando os 3 movieclips como grupos dentro das marcas <defs> </defs> e então usa xlink para encontrar esses caminhos. Isso reduz muito o tamanho do arquivo.

Eu sei que quero criar pelo menos 2 ícones para esta demonstração e muitos mais no aplicativo final, que mudariam de cor por meio de diferentes interações.

Vou clonar o ícone original mantendo o tamanho do arquivo pequeno, pois estamos reutilizando os símbolos vinculados. Poderíamos criar milhares de ícones sem sobrecarregar o arquivo.

É um pouco estranho que o Flash dê a cada camada um id correspondente. Acho que seria melhor – por uma questão de reutilização – se também fornecesse um nome de classe que não precisasse permanecer exclusivo. Os ids são úteis apenas no ícone original. Uma vez que o Snap os clonou, eles se tornam inúteis, pois parecem ser strings aleatórias que são difíceis de lembrar.

Depois de preparar meu icon.svg, posso começar a manipulá-lo usando a biblioteca snapsvg ( http://snapsvg.io/ ).

O complicado era encontrar a alça apropriada para o caminho real e descobrir que eu poderia usar a propriedade do papel. Mais uma vez, também percebi que os ids não me ajudariam quando clonei o svg e, portanto, passei a registrar seus índices com 3 variáveis ​​simples. Eu poderia ter levado isso mais longe e criado uma tabela de pesquisa para ícones mais complexos.

$(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);


      });

});

demonstração
http://www.headwinds.net/lab/snapicon/index.html

Mais leitura (SCSS, SVG embutido)

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