브라우저에서 동적으로 생성 된 SVG 파일 다운로드

Question

HTML SVG 요소를 사용하여 이미지를 만들면 SVG 파일을 사용자에게 다운로드 할 수 있습니까? 예를 들어 SVG 이미지를로드하고 기본 변환을 적용하고 텍스트를 추가 한 다음 사용자가 결과를 벡터 이미지로 다운로드하도록 할 수 있습니다.

그럴 수 있습니까? Canvas와 비슷한 작업을 해오 고 있지만 벡터 이미지 생성에 어려움을 겪고 있습니다. 나는 SVG 요소가 다재다능하다는 것을 알지 못했지만, 오늘 아침에 그들과 캠을 연결할 수있다. 그러나 내가 위와 같이 할 수 있다면 위대 할 것이다. 사용

Answer 1

간단한 해결책은 data URI : 그것은 작동하지만

var svg_root = document.getElementById('your_svg_root_element_here'); 
var svg_source = svg_root.outerHTML; 
var svg_data_uri = 'data:image/svg+xml;base64,' + btoa(svg_source); 
var link = document.getElementById('anchor_element'); 
link.setAttribute('href', svg_data_uri); 

은 링크를 클릭하면 브라우저가 몇 초 동안 멈춘.

이것은 가장 간단한 해결책 인 것처럼 보이며 모든 최신 브라우저와 호환되어야합니다. 그러나 약간의 오버 헤드가 있습니다. 다른 사람이 다른 해결책을 알고 있다면 (아마도 얼룩이나 비슷한 것을 사용하고있을 것입니다.), 다른 답으로 여기에 추가하십시오!