$(":file").change(function () {
                 if (this.files && this.files[0]) {
                console.log(this.files[0]);
                        var reader = new FileReader();
                        reader.onload = imageIsLoaded;
                        reader.readAsDataURL(this.files[0]);

                //run after reader function is compeleted

                var a = document.body.appendChild(
                    document.createElement("a")
                    );
                a.download = "export.svg";
                a.href = "data:image/svg+xml," + $('#ss').find('svg')[0];
                a.innerHTML = "[Export conent]";
                }
           });

function imageIsLoaded(e) {
            var ret = atob(e.target.result.split(',')[1]);
            $('#ss').html(ret);

            var placement_ids = [];++

            //($('#PLACEMENTS > g').length);

            $('#PLACEMENTS > g').each(function(){
                id = $(this).attr('id');

                if (id.indexOf("_1_") >= 0 ){
                  id = id.replace("_1_", "")
                }

                if (id.length <= 3){
                id = [id.slice(0, 2), "0", id.slice(2)].join('');
                }

                $(this).attr('id',id);


                rect = $(this).find('rect');
                rect_id = rect.attr('id');

                rect_id = rect_id.replace("_x5F", "");

                rect_id = rect_id.replace("_3_", "");


                if (rect_id.length <= 8){
                rect_id = [rect_id.slice(0, 2), "0", rect_id.slice(2)].join('');
                }

                rect.attr('id', rect_id);

                rect_x = rect.attr('x');
                rect_y = rect.attr('y');
                rect_w = rect.attr('width');
                rect_h = rect.attr('height');

                if (id == "PL01"){
                    $('#PL01').attr('available-decoration','TEAM_NAME,PLAYER_NAME,LOGO,GRAPHIC,NUMBERS');
                    $(this).append("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='"+ rect_x +"px' height='"+ rect_h +"px' id='PL01_LOGO_GRAPHIC' y='"+ rect_y +"px' width='"+ rect_w +"px' version='1.1' preserveAspectRatio='xMidYMid' viewBox='0 0 256 405'><g></g></svg>");
                }
                if (id == "PL02"){
                    $('#PL02').attr('available-decoration','TEAM_NAME,PLAYER_NAME,LOGO,GRAPHIC,NUMBERS');
                    $(this).append("<svg id='PL02_LOGO_GRAPHIC' y='"+ rect_y +"px' height='"+ rect_h +"px' x='"+ rect_x +"px' width='"+ rect_w +"px' viewBox='0 0 256 256' version='1.1' preserveAspectRatio='xMidYMid'><g></g></svg>");
                }
                if (id == "PL03"){
                    $('#PL03').attr('available-decoration','TEAM_NAME,PLAYER_NAME,LOGO,GRAPHIC,NUMBERS');
                    $(this).append("<svg id='PL03_LOGO_GRAPHIC' y='"+ rect_y +"px' height='"+ rect_h +"px' x='"+ rect_x +"px' width='"+ rect_w +"px' viewBox='0 0 256 256' version='1.1' preserveAspectRatio='xMidYMid'><g></g></svg>");
                }
                if (id == "PL05"){
                    $('#PL05').attr('available-decoration','LOGO,NUMBERS');
                    rect_t = rect.attr('transform');
                    $(this).append("<g id='PL05_ClipPath'><defs><rect id='SVGID_1_' x='"+ rect_x +"' y='"+ rect_y +"' transform='" + rect_t + "' width='" + rect_w + "' height='" + rect_h + "'></rect></defs><clipPath id='SVGID_2_'><use xlink:href='#SVGID_1_' overflow='visible'></use></clipPath><g clip-path='url(#SVGID_2_)'><!--?xml version='1.0' encoding='UTF-8'?--><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='" + rect_w * 2 + "' height='" + rect_h + 9 + "' viewBox='0 0 250 250' version='1.1' preserveAspectRatio='xMidYMid' x='14.571' y='29.721px' id='PL05_LOGO_GRAPHIC' style='overflow: visible;'><g data-rotate-degree='45' data-scale='true' transform='rotate(45 128 124) scale(-1,1) translate(-250, 0)'></g></svg></g></g>");

                }
                if (id == "PL06"){
                    $('#PL06').attr('available-decoration','LOGO,NUMBERS');
                    $(this).append("<g id='PL061_LOGO_x5F_GRAPHIC'><defs></defs><clipPath id='SVGID_2_1'><use xlink:href='#PL06_RECT' overflow='visible'></use></clipPath><g clip-path='url(#SVGID_2_1)'><!--?xml version='1.0' encoding='UTF-8'?--><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='" + rect_h + "' style='overflow: visible;' x='" + rect_x + "' id='PL06_LOGO_GRAPHIC' y='" + rect_y + "' width='" + rect_w + "' version='1.1' preserveAspectRatio='xMidYMid' viewBox='0 0 300 300' enable-background='new 0 0 300 300' xml:space='preserve'><g data-rotate-degree='-45' data-scale='true' transform='rotate(-45 128 124) scale(-1,1) translate(-300, 0)'></g></svg></g></g>");
                }
                if (id == "PL37"){
                    $('#PL37').attr('available-decoration','TEAM_NAME,PLAYER_NAME');
                }


                $(this).append( "<foreignObject id='" + id + "_fo' x='" + rect_x +"' y='" + rect_y +"' fill='none' width='" + rect_w +"' height='" + rect_h +"'><canvas width='" + rect_w +"' height='" + rect_h +"' id='"+ id +"_canvas'></canvas></foreignObject>" );

                placement_ids.push(id);


            });

            $('#PLACEMENTS').attr('used-placements',placement_ids);




        }