Я отвечаю на эту тему, хотя ей уже несколько лет, потому что недавнее сближение веб-браузеров в их поддержке SVG и других соответствующих поведений вызвало возобновление интереса к SVG и позволяет получить «универсальный» ответ на вопрос. вопрос. В сущности, подход zneak является правильным, но, на мой взгляд, лаконичным (то есть мне потребовалось некоторое время, чтобы заставить его работать на себя). Я также думаю, что его ссылка на AJAX либо не нужна, либо не соответствует тому, что я понимаю под AJAX (= использует XMLHttpRequest). Поэтому я предоставлю более подробный ответ, используя чистый JavaScript (т.е. без JQuery или любой другой библиотеки), и предоставлю серверный код для Java, Perl и PHP.
(1) Содержит (динамически генерируемый) SVG-контент на вашей HTML-странице, заключенный в div с уникальным идентификатором, например,
<div id="svg"><svg...>SVG content</svg></div>
(2) Включите кнопку для вызова функции JavaScript, например,
<button onclick="sendSVG();">Save as SVG File</button>
(3) Включите функцию JavaScript, указанную в разметке вашей кнопки:
function sendSVG()
{
var svgText = document.getElementById('svg').innerHTML;
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "http://path-to-your-server-app");
form.setAttribute("accept-charset", "UTF-8");
var hiddenSVGField = document.createElement("input");
hiddenSVGField.setAttribute("type", "hidden");
hiddenSVGField.setAttribute("name", "svgText");
hiddenSVGField.setAttribute("value", svgText);
form.appendChild(hiddenSVGField);
document.body.appendChild(form);
form.submit();
}
(4) Напишите серверное приложение, чтобы принять ваш почтовый запрос SVGtext и вернуться как image / svg + xml, используя Content-Disposition для указания вложения. Представлен рабочий код на трех языках, хотя я не программист на Perl и никогда не использовал PHP в гневе.
Java-сервлет
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
String svgText = (String) request.getParameter("svgText");
response.setContentType("image/svg+xml");
response.addHeader("Content-Disposition", "attachment; filename=\"image.svg\"");
PrintWriter out = response.getWriter();
out.println(svgText);
}
Perl CGI
use CGI qw(:standard);
my $svgText = param('svgText');
print header(-type => "image/svg+xml",
-content_disposition => "attachment; filename=image.svg");
print $svgText;
PHP
<?php
$svgText = $_POST['svgText'];
header('Content-type: image/svg+xml');
header('Content-Disposition: attachment; filename="image.svg"');
print "$svgText";
?>
Я использовал жестко запрограммированное имя для изображения (image.svg), но на самом деле выбрал дескриптор динамического контента, который я генерирую со страницы (снова используя div и ID, и document.getElementById('graphName').textContent) .
Это было протестировано на Mac Safari 9, Firefox 42, Chrome 47, Opera 34 и Windows7 / IE 11 и Windows10 / Edge, и в каждом случае загружается файл svg или один из них запрашивает его загрузку. Полученные файлы откроются, например, в. Adobe Illustrator или любое другое приложение, которое вы настроили для открытия файлов SVG.
Реальный пример этого (если вы рассматриваете академические исследования в реальном мире) находится в http://flyatlas.gla.ac.uk/MidgutAtlas/index.html в секции Гена.