Ссылка на скачивание для SVG (сохраняется как переменная)

Question

Я пытаюсь создать ссылку, которая позволит пользователям загружать файлы с расширением .svg. У меня есть SVG-код в качестве переменной, сгенерированный на лету, и после этого я хочу получить HTML-код: Скачать

Answer 1

Если вы создадите поддельную ссылку с атрибутом «download», вы сможете загрузить все, что вы положили в его «href», вот рабочий пример, который загружает SVG из переменной:

function downloadSVG() {
  let svgData = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105">
  <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
</svg>`;

  /// Create a fake <a> element
  let fakeLink = document.createElement("a");
  /// Add image data as href
  fakeLink.setAttribute('href', 'data:image/svg+xml;base64,' + window.btoa(svgData));
  /// Add download attribute
  fakeLink.setAttribute('download', 'imageName.svg');
  /// Simulate click
  fakeLink.click();

}

Использование:

<a href="javascript: downloadSVG();">download SVG</a>

Демо -> https://jsbin.com/dusanisuwo/3/edit?html,js,output