[책] 자바스크립트 코드 레시피 278 - 185일차

SVG 그래픽 다운로드 하기

• SVG로 작성한 그래픽을 다운로드하고 싶을 때
• 이미지 생성 서비스 등에 활용할 때 (다운로드 하고 싶을 때)

설명

SVG 요소는 자바스크립트 사용해 파일로 다운받을 수 있으며, 이미지 생성 서비스 등에 활용할 수 있습니다. document.querySelector()로 SVG 요소를 참조하고, outerHTML 속성으로 문자열을 가져옵니다. 브라우저에 따라 다운로드 방법이 다르므로 각각 적절한 데이터 형식으로 변환합니다. 샘플을 통해 SVG 요소의 다운로드 방법을 확인해봅니다.

실습

index.html

<svg id="mySvg" vidwBox="0 0 200 200" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="95" fill="#bbdefb"></circle>
</svg>
<button class="btn">다운로드 버튼</button>

---

script.js

const btn = document.querySelector('.btn');
btn.addEventListener('click', saveFile);
function saveFile() {
  const fileName = 'mySvg.svg'; // 파일명
  const content = document.querySelector('#mySvg').outerHTML;
  const dataUrl = 'data:image/svg+xml,\n' + encodeURIComponent(content);
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  const blob = new Blob([bom, content], {type: 'text/plain'});
  if (window.navigator.msSaveBlod) {
    window.navigator.msSaveBlod(blob, fileName);
  } else if (window.URL && window.URL.createObjectURL) {
    const a = document.createElement('a');
    a.download = fileName;
    a.href = window.URL.createObjectURL(blob);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    window.open(dataUrl, '_blank');
  }
}