SVG

[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을 사용해 다운로드하는 코드입니다..

[HTML] SVG안에 이미지 넣기

SVG 안에 이미지 넣기 흔히 SVG 태그 안에 이미지를 넣는 방법은 평소에 사용하던 태그를 SVG안에 넣어서 사용하면 해결될 것 같지만, SVG 태그 안에서는 태그를 사용할 수 없습니다. SVG 태그 안에 이미지를 넣는 방법은 태그를 사용하는 것입니다. 태그는 SVG 요소 안에 이미지를 포함시킬 수 있게 해주는 태그입니다. 사용할 수 있는 이미지 형식은 PNG, JPEG, SVG 형식이며, 아래 속성으로 이미지를 조정할 수 있습니다. x : 이미지의 x축 좌표 위치 지정 y : 이미지의 y축 좌표 위치 지정 width : 이미지의 너비 height : 이미지의 높이 href : 이미지 파일의 URL을 가리킵니다. PreservAspectRatio : 이미지의 크기 배율 조정. 코드 태그에서는 src 속..