SVG 를 다운로드 하려면 ?

D3.js로 만든 SVG를 다운로드하는 방법은 여러 가지가 있지만, 일반적으로 Blob과 링크 생성 방법이 가장 많이 사용됩니다.

방법 1: Blob을 사용하여 SVG 다운로드

javascript
복사
function downloadSVG() {
    // SVG 요소 가져오기
    const svg = document.querySelector("svg");

    // XML 문자열로 변환
    const serializer = new XMLSerializer();
    let source = serializer.serializeToString(svg);

    // XML 헤더 추가
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

    // Blob 생성
    const blob = new Blob([source], { type: "image/svg+xml;charset=utf-8" });

    // 다운로드 링크 생성
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "chart.svg"; // 파일 이름 지정
    document.body.appendChild(a);
    a.click();

    // 정리
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

// 버튼 클릭 시 다운로드 실행
document.getElementById("download-btn").addEventListener("click", downloadSVG);

방법 2: Canvas로 변환 후 PNG로 다운로드

SVG를 직접 다운로드하는 대신, Canvas에 변환 후 PNG로 다운로드할 수도 있습니다.

javascript
복사
function downloadPNG() {
    const svg = document.querySelector("svg");
    const serializer = new XMLSerializer();
    let source = serializer.serializeToString(svg);

    // XML 헤더 추가
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

    // SVG Blob 생성
    const blob = new Blob([source], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(blob);

    // Image 객체 생성 후 Canvas에 그림
    const img = new Image();
    img.onload = function () {
        const canvas = document.createElement("canvas");
        canvas.width = svg.clientWidth;
        canvas.height = svg.clientHeight;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        // Canvas 데이터를 PNG로 변환
        const pngUrl = canvas.toDataURL("image/png");

        // 다운로드 링크 생성
        const a = document.createElement("a");
        a.href = pngUrl;
        a.download = "chart.png";
        document.body.appendChild(a);
        a.click();

        // 정리
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };
    img.src = url;
}

// 버튼 클릭 시 PNG 다운로드 실행
document.getElementById("download-btn").addEventListener("click", downloadPNG);

정리

• SVG로 다운로드: XMLSerializer를 사용해 SVG 데이터를 Blob으로 변환 후 다운로드.

• PNG로 다운로드: SVG를 Canvas에 그린 뒤 toDataURL()을 사용해 PNG로 저장.

필요에 따라 원하는 방식으로 적용하면 됩니다.