html2canvas save SVG

Question

I have a site where into a page I can click on a png and i load an SVg external. With a colorpicker I can change its color, with draggable and resizable I can change position and dimension of my SVG.
Now i want to save with html2canvas this SVG.
I know that html2canvas doesn't support SVG and for this I have to use canvg.
But how can I convert with canvg my dynamic SVG when I save?
Because I want that the image doesn't change position color or dimension.
Is possible?
How can I convert with canvg my dinamuc SVG?

this is my code (I have semplified because is very complex)
JQUERY:

//function that clone svg and insert into a div that will be saved
$('.insert-forme').click(function(){
        var obj = $('#'+$(this).data('svg')).clone();
        obj.attr('id',$(this).data('svg')+'_'+n_svg_created).css('width','100px').css('height','100px').find('svg').attr('width','100').attr('height','100');        

        obj.appendTo('#space-drawable-div').resizable({
            alsoResize: obj.find('svg'),
            containment: $('#space-drawable-div'),
            aspectRatio: true,
            maxWidth: 212,
            maxHeight: 220
        }).draggable({ 
            containment: $('#space-drawable-div')
        })
        n_svg_created++;
    });
//function that save the div where I have svg, text, image..
$('#save-tee').click(function(){
        var background = $('#space-drawable-div').css('background-color');
            html2canvas($('#space-drawable-div'), {
                background:$('#bg-tee').css('background-color'),
                logging: true,
                profile: true,
                useCORS: true,
                allowTaint: true,
                onrendered: function(canvas) {
                    var dataURL = canvas.toDataURL('image/png');
                    var ajax_url ="<?php echo(site_url('/tee/save_tee')); ?>";
                    $.ajax({   
                        url: ajax_url, 
                        type: "POST", 
                        data: { 
                            imgBase64: dataURL,
                            title: title,
                            background: background,
                            type_tee:type_tee
                        }
                    });
                }
            }); 
    });

HTML:

<img src="/img/tee/forme/star.png" style="width:30px; margin-left:11px; cursor:pointer;" alt="forme" class="insert-forme" data-svg="star-svg" />

<div class="container-svg dynamic-element" id="star-svg" data-left="" data-top="" data-fill="">
<svg version="1.1" id="Livello_1" fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<polygon class="svg" id="test" points="149.999,7.342 196.353,101.262 300,116.323 224.999,189.429 242.704,292.658 149.999,243.921 57.295,292.658 
 75,189.429 0,116.323 103.647,101.262 "/>
</svg>
</div>