０．はじめに
私は、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がよくわかっていない人（＝私）しか意味ないかもしれませんが、一応記録しておきます。
１．作ったもの
音楽付きですが以下の動画のツールを作りました。
以下で実際に動かせます。
２．一応ソース
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知ってる人は、こんなツールいらないですねｗ
以 上