var svgFiles = [
  'icon-pattern-x2.svg',
  'icon-hi.svg',
  'icon-hi-color.svg',
  'icon-hi-html.svg',
  'icon-io.svg',
  'icon-io.svg',
  'icon-path-text-c.svg',
  'icon-face-path2.svg',
  'icon-tobi.svg',
  'icon-moon-mask.svg',
  'icon-heart.svg',
  'icon-digital-clock.svg',
  'icon-digital-clock-x6.svg',
  'icon-map.svg',
  'icon-tell.svg',
  'icon-sns-logo-nagare.svg',
  'icon-pettern-mask.svg',
  'icon-basketball-mask.svg',
  'icon-neoranga.svg',
  'icon-g.svg',
  'icon-s.svg',
  'icon-path-s.svg',
  'icon-grad-linear.svg',
  'icon-grad-radial.svg',
];

var canvas;
var canvasLink;

$(function(){
  var svgs = $('<div>',{id:'svgs'});
  $('#demo').append(svgs);

  svgFiles.forEach(function(v){
    var img = $('<img>', {src:v}).css({
    }).on('click', function(){
      svgToCanvas(v);
    });
    svgs.append(img);
  });

  var w = 1280;
  var h = 1280;
  canvasLink = $('<a>',{title:'DL'});
  canvas = $('<canvas>',{width:400, height:400}).attr({width:w, height:h});

  var sizeInput = $('<input>',{title:'sizeChange'}).val(w+'x'+h).on('change', function(){
    var val = $(this).val();
    var valAry = val.split('x');
    w = Number(valAry[0]) || w;
    h = Number(valAry[1]) || h;
    canvas.attr({width:w, height:h});
  });

  $('#demo').append(sizeInput);
  $('#demo').append(canvasLink);
  canvasLink.append(canvas);

});

var svgToCanvas = function(v){
  var img = new Image();
  img.src = v;
  img.onload = function() {
    var ctx = canvas[0].getContext('2d');
    var w = canvas[0].width;
    var h = canvas[0].height;
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(img, 0, 0, w, h);
    console.log(v);
    var name = v.replace('.svg', '');
    canvasLink.attr({
      href: canvas[0].toDataURL('image/png'),
      download: name + '-' +w+ 'x' +h+ '.png',
    });
  }
}

#demo{
  background-image:url(bg-alpha.svg);
}
#svgs img{
  width:200px;
  height:200px;
}

input{
  font-size:32px;
  width:160px;
  display:block;
}
a[download]{
  display:inline-block;
}

a[download]:hover{
  background-color:rgba(255,0,0,.1);
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-svg/svg-icon/