０．はじめに

私は、WEBサイトで、アイコン素材を利用したくて、アイコン探しを良くします。

大抵のものは、商用利用可能なアイコン素材をフリー(無料)ダウンロードできる素材配布サイトICOOON MONOで揃います。とても便利。

ICOOON MONOは、アイコンの色も変えてPNGでダウンロードできるのでこれも便利。

ただ、一般的なアイコンが多く、IT系のアイコンがあまりないのが惜しいところです。

かたや、IT界の王者GoogleさんがやっているGoogle FontsのMaterial Symbols and Iconsには、IT系のアイコンが豊富でとても便利。

ただ、Material Symbols and Iconsは、色が、白と黒でしか指定できないのが惜しいところです。

そこでMaterial Symbols and Iconsは、SVGでもダウンロードできるので、SVGで色変更して、PNGで保存するツールを作りました。

アイコンを大量に利用する人でSVGがよくわかっていない人（＝私）しか意味ないかもしれませんが、一応記録しておきます。

１．作ったもの

音楽付きですが以下の動画のツールを作りました。

以下で実際に動かせます。

Google Fontのアイコンの色変更

２．一応ソース

HTML１枚です。

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG⇒png</title>
<style>
body {
    background-color: #3498DB;
}

h4 {
    margin: 5px 0px;
}

svg {
    background-color: #ECF0F1;
}

#svgoldarea {
    margin-top: 5px;
}
  
#iconarea {
    margin-top: 20px;
}

#dai {
    color: #ECF0F1;
}
</style>
</head>
<body>
<h4 id="dai">Google Fontのアイコンの色変更</h4>    
<h4>Ａ．SVGを開く</h4>    
<div>
    <input type="file" id="file" name="file"/ accept=".svg">    
    <div id="svgoldarea">
        <textarea id="svginold" cols="60" rows="10" placeholder="色変更前SVG確認エリア"></textarea>    
    </div>
</div>    
<h4>Ｂ．色を変更</h4>    
<div>
    <input type="color" id="svgcolor">
</div>    
<h4>Ｃ．SVGをpngに変換してダウンロード</h4>    
<div id="svgarea">
    <textarea id="svgin" cols="60" rows="10" placeholder="色変更後SVGタグエリア"></textarea>    
</div>
<div id="btnarea">
    <button id="svgset">1. SVGセット完了</button>
    <button id="svgtopng">2. SVG⇒png変換⇒ダウンロード</button>
</div>
<div id="msgarea">
</div>

<div id="imgarea">
</div>

<div id="iconarea">
</div>

<dialog id="setmsg">
画像生成完了しました。
</dialog>

<script>
const svgset = document.getElementById('svgset');
const setmsg = document.getElementById('setmsg');

//ファイル選択ボタン
var el2 = document.getElementById("file");
 
el2.addEventListener( 'change', function(e) {
 
    var result = e.target.files[0];
    aaresult=e.target.files[0];
 
    //FileReaderのインスタンスを作成する
    var reader = new FileReader();
  
    //読み込んだファイルの中身を取得する
    reader.readAsText( result );
  
    //ファイルの中身を取得後に処理を行う
    reader.addEventListener( 'load', function() {
    
        //ファイルの中身をエディター内に表示する
        console.log(reader.result);
        document.getElementById('svginold').value = reader.result;
    })
 
})

//色変更ボタン
var el3 = document.getElementById('svgcolor');
 
el3.addEventListener( 'change', function(e) {
 
    var motocolor = 'fill=\"#000000\"';
    var newcolor = 'fill=\"' + el3.value + '\"';
    document.getElementById('svgin').value = document.getElementById('svginold').value.replace(motocolor,newcolor);
 
})

svgset.addEventListener('click',(e) => {
    document.getElementById('msgarea').innerHTML = 'SVGの元画像';
    document.getElementById('imgarea').innerHTML = document.getElementById('svgin').value;
    setmsg.showModal();
    setTimeout(clmsg,2000);    
});

function clmsg() {
    setmsg.close();
};

const svgtopng = document.getElementById('svgtopng');

svgtopng.addEventListener('click',(e) => {
    svgpng();

});

function svgpng() {
    var svg = document.querySelector("svg");
    var svgData = new XMLSerializer().serializeToString(svg);
    var canvas = document.createElement("canvas");
    canvas.width = svg.width.baseVal.value;
    canvas.height = svg.height.baseVal.value;

    var ctx = canvas.getContext("2d");
    var image = new Image;
    image.onload = function(){
        ctx.drawImage( image, 0, 0 );
        var a = document.createElement("a");
        a.href = canvas.toDataURL("image/png");
        a.setAttribute("download", "image.png");
        a.dispatchEvent(new MouseEvent("click"));
    }
    image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData))); 
}
</script>
  
</body>
</html>

３．終わりに

SVG知ってる人は、こんなツールいらないですねｗ

以　上