CSS用になるべくサイズを小さくしたSVGをBase64化するツールを作ってみた
Web界隈の流行は移り変わりが激しくて目が回りそうですが、最近はPageSpeed Insightsのスコア上昇のためにも、SVGを直接埋め込むのが流行っているみたいですね。
HTML中にimgタグを大量に貼っているとその都度リクエストが発生して体感上の表示スピードが低下するため、srcに画像ファイルではなくbase64化したデータを埋め込んだり、CSSのbackground-imageにbase64データを埋め込んだりすることで1度のリクエストでまとめて画像を読み込もう、という寸法です。
base64化することでファイルサイズは30％程度増加するので全ての画像をbase64化するわけにはいきませんが、数KB程度の小さな画像がたくさんある場合には体感できるほど効果があったので、今後は積極的に使っていきたいと思います。
そんなわけで今回はSVGファイルの中身を貼り付けたらbase64用のCSSを出力してくれるツールを作ってみました。
サンプルとして自作の虫眼鏡アイコン(20x20px)を貼り付けてありますので、[変換]ボタンを押すだけで動作が確認できます。
SVGをbase64へ変換するツール
■変換元のSVG
コメント除去 改行除去 行頭の空白除去
動作の解説
単に貼り付けたSVGをbase64化した場合、2,282バイトのSVGファイルが3,044バイトのbase64になりました。（約33％増加）
そこで、データとしては無意味な「<!-- Created with Inkscape -->というようなコメント」「改行コード」「先頭にある空白」を除去することで、2,524バイトまでダイエットすることが出来ました。520バイトほどの削減です。CSSのminifyみたいなものですね。
ただ、あまり深く考えずに正規表現で変換しているだけなので、うまくいかないケースもあるかも知れませんｗ
そのため、一応チェックボックスを付けてデータ削減機能のON/OFFを選べるようにしておきました。
ソースコード
ドヤ顔して公開するようなものではございませんが、気になる方用にソースコードも貼り付けておきます。
<p>■変換元のSVG</p>
<textarea id="svgtext" style="height:5em"></textarea>
<p><input type="checkbox" id="chkComment" value="1" checked>コメント除去
<input type="checkbox" id="chkLF" value="1" checked>改行除去
<input type="checkbox" id="chkSpace" value="1" checked>行頭の空白除去</p>
<button onclick="convertBase64();">変換</button>
<div id="div_output" style="display:none;">
<p>■ダイエットしたSVG</p>
<textarea id="svgtext_mini"></textarea>
<p>■base64</p>
<textarea id="output_base64"></textarea>
<div id="base64_size"></div>
<p>■CSS</p>
<textarea id="output_css"></textarea>
<p>■表示例</p>
<img src="" id="output_img">
</div>
<script>
function convertBase64() {
let svgtext = document.getElementById('svgtext').value;
if (document.getElementById('chkComment').checked) {
svgtext = svgtext.replace(/<!--[\s\S]*?-->/g, ''); //コメントを削除
}
if (document.getElementById('chkLF').checked) {
svgtext = svgtext.replace(/\n/g, ''); //改行コードを除去
}
if (document.getElementById('chkSpace').checked) {
svgtext = svgtext.replace(/\s+/g, ' '); //行頭の空白を1文字に縮小
}
document.getElementById('svgtext_mini').value = svgtext;
let base64 = btoa(unescape(encodeURIComponent(svgtext)));
document.getElementById('output_base64').value = base64;
document.getElementById('output_css').value = '.svgicon { background-image:url("data:image/svg+xml;base64,' + base64 + '"); } ';
document.getElementById('base64_size').innerHTML = base64.length +'byte';
document.getElementById('output_img').src = 'data:image/svg+xml;base64,'+base64;
document.getElementById('div_output').style.display = 'block';
}
</script>まとめ
- 最近流行りのCSSへのSVG埋め込みをやってみたら体感上の表示速度が上がった
- 気軽にSVGをbase64へ変換できるようにJavaScriptで簡単なツールを作ってみた
- base64化すると思ったより大きくなったのでコメントや空白の除去機能も付けてみた
といったところでしょうか。
実はこのコードを書く前に、DOMParserとXMLSerializerを使うことでブラウザにSVGのダイエットを任せるコードも書いていました。
でも、サイズの削減率がイマイチだったんですよ。改行コードは除去してくれるのだけれど、コメント欄や行頭の空白は残っていたり。
正規表現で文字削るのちょっと怖いなぁーと思ったんですが、試してみたら普通に使えそうな感じだったの今回公開してみました。
SVG->base64の変換コードはもちろんのこと、サンプルとして貼り付けている虫眼鏡アイコンも自作ですので、ご自由にお使いください。
（いらんと思うけどｗ）
