[JavaScript] 자바스크립트에서 SVG 그래픽 다운로드하기
2022. 7. 26. 20:25ㆍProgram/JavaScript
202_자바스크립트에서 SVG 그래픽 다운로드하기
[적용]
- SVG로 작성한 그래픽을 다운로드하고 싶을 때
[내용]
SVG 요소는 자바스크립트를 사용해 파일로 다운받을 수 있으며,
이미지 생성 서비스 등에 활용할 수 있다.
document.querySelector()로 SVG 요소를 참조하고 outerHTML 속성으로 문자열을 가져온다.
브라우저에 따라 다운로드 방법이 다르므로 각각 적절한 데이터 형식으로 변환한다.
샘플을 통해 SVG 요소의 다운로드 방법을 확인해 보자.
HTML index.html
<body>
<svg viewBox="0 0 200 200" width="200" height="200" id="mySvg">
<circle cx="100" cy="100" fill="#FFFFBD" />
</svg>
<br />
<button id="btnSave">다운로드</button>
</body>JavaScript main.js
// 다운로드 버튼 클릭 시 작업
document.querySelector('#btnSave').addEventListener('click', saveFile);
// 파일로 저장
function saveFile() {
// 파일명
const fileName = `mySvg.svg`;
// SVG 요소 가져오기
const content = document.querySelector('#mySvg').outerHTML;
// 데이터 준비
const dataUrl = 'data:image/svg+xml,\n' + encodeURIComponent(content);
// BOM의 문자 깨짐 방지
const bom = new Unit8Array([0xef, 0xbb, 0xbf]);
const blob = new Blob([bom, content], {type: 'text/plain' });
if (window.navigator.msSaveBlob) {
// IE용
window.navigator.msSaveBlob(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');
}
}
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 캔버스 요소 색칠하기/선 그리기 (0) | 2022.07.27 |
|---|---|
| [JavaScript] 자바스크립트에서 캔버스 사용하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 마우스로 다루기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 스타일 변경하기 (0) | 2022.07.26 |