jQueryでSVG要素（データ）をbase64でエンコードしてData URIスキームに変換する方法

SVG要素をdataURIに変換するにはJavaScriptだと以下二行で可能です。

let svgData = new XMLSerializer().serializeToString(svgElement);
return "data:image/svg+xml;base64,"
            + btoa(unescape(encodeURIComponent(svgData)))

これをjQueryで行うために関数化すると以下のようになります。

//---------------------------------
//svgのDOM要素をbase64コードに変換
//
//引数1:$svg svg要素
//
//返り値:data URL スキーム
//---------------------------------
const convertSvgToDataURL=$svg=>{
    let svgData = new XMLSerializer().serializeToString($svg[0]);
    return "data:image/svg+xml;base64,"
                + btoa(unescape(encodeURIComponent(svgData)));
}

使用例

<div class="svg-box">
  <h2>svg</h2>
  <svg id="svg"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.86 23.86" width="150" height="150">
    <circle cx="11.93" cy="11.93" r="11.93"/>
  </svg>
</div>
<div class="image-box">
  <h2>画像</h2>
  <img id="svg-image">
</div>

$('#svg-image').attr('src',convertSvgToDataURL($('#svg')));

  →