svg-icon


  view source
  JavaScript
  ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78 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',
    });
  }
}
  CSS
  ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 #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);
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-svg/svg-icon/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。