[JS] SVG 다운로드 (내보내기), PNG로 변환

 

SVG 다운로드

const $svg = document.querySelector("svg");

const data = new XMLSerializer().serializeToString($svg);
const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

const $link = document.createElement("a");
  
$link.download = "export.svg";
$link.href = URL.createObjectURL(blob);
  
$link.click();

SVG의 텍스트 데이터를 추출해 Blob 객체를 만들어주고 URL.createObjectURL 메서드를 이용한 다운로드 URL을 사용해 다운로드하는 코드입니다.

 

코드 풀이

// svg의 텍스트 데이터 추출
const data = new XMLSerializer().serializeToString($svg);

// 다운로드를 위한 blob 객체 생성
const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

svg를 다운로드하기 위해서는 svg의 텍스트 데이터를 가져와야 합니다. 이때 XMLSerializer.serializeToString() 메서드를 사용하면 svg의 텍스트 데이터를 추출할 수 있습니다.

그 후 다운로드 용 URL을 만들기 위해서 필요한 Blob 객체를 생성해줍니다. 생성된 Blob 객체를 이용하여 url을 생성해주고, a태그의 download 속성을 이용해서 다운로드해줍니다.

 

const $link = document.createElement("a");
  
// 다운로드 될 파일명
$link.download = "export.svg";
$link.href = URL.createObjectURL(blob);
  
$link.click();

생성한 Blob 객체를 이용해 다운로드가 가능한 URL을 생성해주고, a태그의 download 속성을 이용해서 다운로드시켜줍니다.

예시 코드

 

 

SVG를 PNG로 변환

const $svg = document.querySelector("svg");

const data = new XMLSerializer().serializeToString($svg);
const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

const $canvas = document.createElement("canvas");

const {width, height} = $svg.getBoundingClientRect();

$canvas.width = width; 
$canvas.height = height;

const ctx = $canvas.getContext('2d');

const img = new Image();

img.onload = (e) => {
    ctx.drawImage(e.target, 0, 0);

    const $link = document.createElement("a");

    $link.download = "image.png";
    $link.href = $canvas.toDataURL("image/png");

    $link.click();
};

img.src = URL.createObjectURL(blob);

해당 방식은 SVG 다운로드 코드를 응용한 코드로, CanvasRenderingContext2D.drawImage 메서드를 이용해서 캔버스에 svg를 그려주고 toDataURL로 다운로드하는 코드입니다.

 

 

 

 

도움받은 자료

https://codepen.io/aster_mnch/pen/qBVKoNP

Download SVG

 

https://qiita.com/aster-mnch/items/d89f1d1be43d89a6fe70

SVG イメージを JavaScript から保存する方法 - Qiita