у код для преобразования SVG в встроенный SVG и снимок экрана этого div. Пожалуйста, проверьте. Пожалуйста, скопируйте этот код int на ваш локальный хост и протестируйте его. Потому что снимок экрана отличается по разной ширине.

https://jsfiddle.net/7bqukhff/15/

 <link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

<div id="test">
    <div class="description-div">

    <p>Sample description</p>

    </div>



      <div class="img-div" id="img-div"></div>


</div>

 <form class="cf">
      <div class="half left cf">
        <input type="text"  name="user-name" required>
         <select name="design-name" class="desgign-class" required>
             <option value="" >select</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
         </select> 
        <input type="submit" name="submit" value="submit" class="submit"> 

      </div>

   </form>


</div>
<div class="new">
 <a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
</div>
<script>
$(function() {

$(".desgign-class").on("change",function(){

 var op=$(this).val();

  if(op!=0){
  $('.btn').show();
  $('.img-div').html('');
  if(op==2){
             for(var i = 0;i<op;i++){
                $('.img-div').append("<img src='https://istack.000webhostapp.com/1tf.svg'>");
             } 
    }

    if(op==3){
              for(var i = 0;i<op;i++){
                 $('.img-div').append("<img src='https://istack.000webhostapp.com/_1tf.svg'>");
              }
    }

      if(op==4){
              for(var i = 0;i<op;i++){
                 $('.img-div').append("<img src='http://svgur.com//i/1yP.svg'>");
              }
    }

    }

    else{
    $('.btn').hide();
    }

     $('img').each(function() {

      var $img = jQuery(this);
      var imgID = $img.attr('id');
      var imgClass = $img.attr('class');
      var imgURL = $img.attr('src');

      jQuery.get(imgURL, function(data) {
         // Get the SVG tag, ignore the rest
         var $svg = jQuery(data).find('svg');

         // Add replaced image's ID to the new SVG
         if (typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
         }
         // Add replaced image's classes to the new SVG
         if (typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass + ' replaced-svg');
         }
         // Remove any invalid XML tags as per http://validator.w3.org
         $svg = $svg.removeAttr('xmlns:a');

         // Replace image with new SVG
         $img.replaceWith($svg);

      }, 'xml');

   });
});

(function(exports) {
   function urlsToAbsolute(nodeList) {
      if (!nodeList.length) {
         return [];
      }
      var attrName = 'href';
      if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
         attrName = 'src';
      }
      nodeList = [].map.call(nodeList, function(el, i) {
         var attr = el.getAttribute(attrName);
         if (!attr) {
            return;
         }
         var absURL = /^(https?|data):/i.test(attr);
         if (absURL) {
            return el;
         } else {
            return el;
         }
      });
      return nodeList;
   }

   function screenshotPage() {
      var wrapper = document.getElementById('img-div');
      html2canvas(wrapper, {
         onrendered: function(canvas) {
            function getOffset(el) {
               el = el.getBoundingClientRect();
               return {
                  left: el.left + window.scrollX,
                  top: el.top + window.scrollY
               }
            }
            var cachedCanvas = canvas;
            var ctx = canvas.getContext('2d');
            var svgs = document.querySelectorAll('svg');
            svgs.forEach(function(svg) {
               var svgWidth = svg.width.baseVal.value;
               var svgHeight = svg.height.baseVal.value;
               var svgLeft = getOffset(svg).left - 40;
               var svgTop = getOffset(svg).top - 62;
               var offScreenCanvas = document.createElement('canvas');
               offScreenCanvas.width = svgWidth;
               offScreenCanvas.height = svgHeight;
               canvg(offScreenCanvas, svg.outerHTML);
               ctx.drawImage(cachedCanvas, 0, 0);
               ctx.drawImage(offScreenCanvas, svgLeft, svgTop);
            });
            canvas.toBlob(function(blob) {
               saveAs(blob, 'myScreenshot.png');
            });
         }
      });
   }

   function addOnPageLoad_() {
      window.addEventListener('DOMContentLoaded', function(e) {
         var scrollX = document.documentElement.dataset.scrollX || 0;
         var scrollY = document.documentElement.dataset.scrollY || 0;
         window.scrollTo(scrollX, scrollY);
      });
   }

   function generate() {
      screenshotPage();
   }
   exports.screenshotPage = screenshotPage;
   exports.generate = generate;
})(window);

});



</script>

html,
body {
   background: #f1f1f1;
   font-family: 'Merriweather', sans-serif;
   padding: 1em;
}


form {
    border: 2px solid blue;
    float: left;
    max-width: 300px;
    padding: 5px;
    text-align: center;
    width: 30%;
}

.img-div {
    border: 1px solid black;
    display: block;
    float: left;
    margin-right: 86px;
    overflow: hidden;
    width: 50%;
    padding: 10px;
}
.btn {
    display: none;
    overflow: hidden;
    width: 100%;
}
.new{
     display: block;
    overflow: hidden;
    width: 100%;
}

.description-div {
    border: 2px solid green;
    float: left;
    margin-right: 32px;
    padding: 3px;
    width: 13%;
}

.submit {
    background: wheat none repeat scroll 0 0;
    border: 1px solid red;
    cursor: pointer;
}

input,
textarea {
   border: 0;
   outline: 0;
   padding: 1em;
   @include border-radius(8px);
   display: block;
   width: 100%;
   margin-top: 1em;
   font-family: 'Merriweather', sans-serif;
   @include box-shadow(0 1px 1px rgba(black, 0.1));
   resize: none;
   &:focus {
      @include box-shadow(0 0px 2px rgba($red, 1)!important);
   }
}

#input-submit {
   color: white;
   background: $red;
   cursor: pointer;
   &:hover {
      @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
   }
}

Но здесь(1) когда я делаю снимок экранаimg-div скриншот отличается от оригинального представления. Почему это случилось?

(2) Также в варианте 4 скриншота svg не появляется. На самом деле у меня слишком много вариантов и слишком много изображений. Сейчас я пишу только 3 варианта.

(3) Можно ли сохранить этот снимок экрана на сервере [в определенной папке] при отправке пользователем формы?

(4) Есть ли другой метод без использования HTML-холст?

(5) КАК КАК ЭКРАН ВЫБИРАЛ ВАРИАНТ В КОМПЬЮТЕРЕ? или расширение браузера какhttps://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en .

https://www.youtube.com/watch?v=3766n-SDPNc&feature=youtu.be

Краткая форма: у меня есть сайт. В котором пользователь может выбрать любой SVG из данного списка SVG. Когда пользователь выбирает один svg, этот svg преобразуется в встроенный svg, отображаемый в одном div. Также пользователь может переместить этот svg в любую часть div. После всего этого пользователь заполняет форму и отправляет. Во время отправки мы хотим загрузить снимок экрана этого div, тогда мы понимаем, что пользователь выбирает, какой цвет, где находится svg imge и т. Д.