JavaScript svg에서 DataURL 얻어오기

svg 태그에서 DataURL을 얻어오는 방법입니다.

 

예시 svg

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
  fill="currentColor" class="bi bi-vimeo" id="svg"
  style="color: red;" viewBox="0 0 16 16">
  <path
    d="M15.992 4.204c-.071 1.556-1.158 3.687-3.262 6.393-2.175 2.829-4.016 4.243-5.522 4.243-.933 0-1.722-.861-2.367-2.583L3.55 7.523C3.07 5.8 2.556 4.94 2.007 4.94c-.118 0-.537.253-1.254.754L0 4.724a209.56 209.56 0 0 0 2.334-2.081c1.054-.91 1.845-1.388 2.373-1.437 1.243-.123 2.01.728 2.298 2.553.31 1.968.526 3.19.646 3.666.36 1.631.756 2.446 1.186 2.445.334 0 .836-.53 1.508-1.587.671-1.058 1.03-1.863 1.077-2.415.096-.913-.263-1.37-1.077-1.37a3.022 3.022 0 0 0-1.185.261c.789-2.573 2.291-3.825 4.508-3.756 1.644.05 2.419 1.117 2.324 3.2z" />
</svg>

 

DataURL로 이미지를 표시할 img 태그

<img src="" alt="로고 이미지" id="img">

 

DataURL 가져오기

const s = new XMLSerializer().serializeToString(document.getElementById("svg"))
const encodedData = window.btoa(s);
const dataUrl = `data:image/svg+xml;base64,${encodedData}`

document.getElementById('img').src = dataUrl