Comment enregistrer un fichier svg sur un système de fichiers local
Existe-t-il un moyen de permettre à un utilisateur, après avoir créé un graphique vectoriel sur une toile javascript svg, à l'aide d'un navigateur, de télécharger ce fichier sur son système de fichiers local?
SVG est un tout nouveau champ pour moi alors soyez patient si mon libellé est inexact.
Cela peut être possible en utilisant la commande de navigateur habituelle "Enregistrer", mais cela ne se limite pas à enregistrer le canevas SVG, mais à la totalité de la page.
Je crois que votre meilleur pari est d’utiliser AJAX et d’envoyer l’ensemble des données XML SVG sous la forme POST à un script de serveur. POST) avec l’en-tête Content-Disposition: attachment; filename=yourfile.svg.
(Sous PHP, vous pouvez obtenir le contenu brut POST avec file_get_contents('php://input').).
Vous pouvez éviter un aller-retour vers le serveur.
Base64 encoder votre fichier SVG XML.
Générez ensuite un lien vers ces données. L'utilisateur peut faire un clic droit pour l'enregistrer localement.
// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
// Add some critical information
$("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});
var svg = $("#chart-canvas").html();
var b64 = Base64.encode(svg); // or use btoa if supported
// Works in recent Webkit(Chrome)
$("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));
// Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
$("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
}
La balise img fonctionne dans Webkit, le lien dans Webkit et Firefox, et peut fonctionner dans tout navigateur prenant en charge data-uri
Il n’est pas nécessaire d’encoder en base64, vous pouvez créer un lien contenant du code SVG brut. Voici une fonction modifiée encode_as_img_and_link () à partir de la réponse de The_Who:
function img_and_link() {
$('body').append(
$('<a>')
.attr('href-lang', 'image/svg+xml')
.attr('href', 'data:image/svg+xml;utf8,' + unescape($('svg')[0].outerHTML))
.text('Download')
);
}
Utilisation de FileSaver.js
saveAs(new Blob([SVG_DATA_HERE], {type:"application/svg+xml"}), "name.svg")
Avec FileSaver de Eli Grey, je l’ai obtenu (chrome):
bb = new window.WebKitBlobBuilder;
var svg = $('#designpanel').svg('get');
bb.append(svg.toSVG());
var blob = bb.getBlob("application/svg+xml;charset=" + svg.characterSet);
saveAs(blob,"name.svg");
SVG est tiré de keith woods jquery's svg.
// save SVG
$('#SVGsave').click(function(){
var a = document.createElement('a');
a.href = 'data:image/svg+xml;utf8,' + unescape($('#SVG')[0].outerHTML);
a.download = 'plot.svg';
a.target = '_blank';
document.body.appendChild(a); a.click(); document.body.removeChild(a);
});Je réponds à ce sujet, même s'il existe déjà depuis quelques années, car la récente convergence des navigateurs Web dans leur prise en charge de SVG et d'autres comportements pertinents a suscité un regain d'intérêt pour SVG et permet une réponse "universelle" à la question. En substance, l'approche de zneak est correcte mais, à mon avis, laconique (c'est-à-dire qu'il m'a fallu un certain temps pour que cela fonctionne pour moi-même). Je pense aussi que sa référence à AJAX est inutile ou pas ce que je comprends par AJAX (= utilise un XMLHttpRequest). Je fournirai donc une description plus détaillée. répondez en utilisant du JavaScript pur (c'est-à-dire sans JQuery ou toute autre bibliothèque) et fournissez le code serveur pour Java, Perl et PHP.
(1) Placez le contenu SVG (généré dynamiquement) dans votre page HTML dans un div avec un ID unique, par exemple.
<div id="svg"><svg...>SVG content</svg></div>
(2) Incluez un bouton pour appeler la fonction JavaScript, par exemple.
<button onclick="sendSVG();">Save as SVG File</button>
(3) Incluez la fonction JavaScript nommée dans votre balise de bouton:
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) Écrivez une application serveur pour accepter votre demande de publication SVGtext et renvoyez-la en tant qu'image/svg + xml en utilisant Content-Disposition pour spécifier une pièce jointe. Un code de travail en trois langues est présenté, bien que je ne sois pas un programmeur Perl et que je n’ai jamais utilisé PHP dans la colère.
Servlet 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";
?>
J'ai utilisé un nom codé en dur pour l'image ici (image.svg), mais je récupère en fait un discripteur du contenu dynamique que je génère à partir de la page (en utilisant à nouveau un div et un ID, et document.getElementById('graphName').textContent ).
Ceci a été testé sur Mac Safari 9, Firefox 42, Chrome 47, Opera 34, et Windows7/IE 11 et Windows10/Edge et dans chaque cas le Le fichier svg a été téléchargé ou un seul lecteur est invité à le télécharger.Les fichiers ainsi créés seront ouverts, par exemple, Adobe Illustrator ou toute autre application que vous avez définie pour ouvrir les fichiers svg.
Un exemple concret de ceci (si vous considérez la recherche universitaire dans le monde réel) est à http://flyatlas.gla.ac.uk/MidgutAtlas/index.html dans la section Gene.
J'ai récemment trouvé ceci Chrome http://nytimes.github.io/svg-crowbar/ . C'est un peu buggé pour mes besoins mais fonctionne essentiellement.
J'avais déjà proposé une solution similaire à la réponse acceptée, qui impliquait un script côté serveur, mais elle était plutôt longue et comportait également le problème que tous les styles devaient être en ligne dans le balisage. Crowbar semble s'en occuper pour vous, c'est-à-dire Nice.
Oui c'est possible. Utilisez jquery.svg http://keith-wood.name/svgRef.html et publiez les données xml svg à l'aide de la fonction svg.toSVG () (écriture dans un champ masqué lors de l'envoi). Faites enregistrer et convertir le php en raster en utilisant imagemagick (convert image.svg image.png), puis forcez le fichier à télécharger en utilisant l'en-tête ("Content-Type: application/octet-stream") et lisez le fichier.
La manière la plus compatible serait un aller-retour vers le serveur. Vous pouvez également utiliser un data: URI dans certains navigateurs.
Vous ne pouvez rien enregistrer de javascript sur le système de fichiers local. Vous devez simplement envoyer le contenu du fichier canvas au serveur, puis le télécharger et le sauvegarder.
J'ai peut-être découvert un meilleur moyen de ne pas obliger l'utilisateur à cliquer avec le bouton droit de la souris sur "enregistrer l'image sous". Il suffit de dessiner le code base64 de la structure en direct dans l’href du lien et de le modifier pour que le téléchargement démarre automatiquement. Je ne sais pas si son navigateur universel est compatible, mais cela devrait fonctionner avec les navigateurs principaux/nouveaux.
var canvas = document.getElementById('your-canvas');
if (canvas.getContext) {
var C = canvas.getContext('2d');
}
$('#your-canvas').mousedown(function(event) {
// feel free to choose your event ;)
// just for example
// var OFFSET = $(this).offset();
// var x = event.pageX - OFFSET.left;
// var y = event.pageY - OFFSET.top;
// standard data to url
var imgdata = canvas.toDataURL('image/png');
// modify the dataUrl so the browser starts downloading it instead of just showing it
var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
// give the link the values it needs
$('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);
});
n'hésitez pas à envelopper tout ce que vous voulez, espérons que cela aidera un peu
$(document).ready(function(){
$("#btnDownload").click(function(){
var $container = $('#svg-container'),
// Canvg requires trimmed content
content = $container.html().trim(),
canvas = document.getElementById('svg-canvas');
// Draw svg on canvas
canvg(canvas, content);
$container.hide();
// Change img be SVG representation
var theImage = canvas.toDataURL('image/jpeg');
var a = document.createElement('a');
a.href = theImage; // xhr.response es un blob file
a.target = '_blank';
a.download = 'prueba'; // nombre del archivo.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
});//fin function
});// fin <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<input id="svgData" name="svgData" type="hidden"/>
<input id="btnDownload" type="button" value="Descargar"/>
<div id='svg-container'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 4.0.4</desc><defs><clipPath id="highcharts-5"><rect x="-75" y="-75" width="750" height="550"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 59 79 L 460 61 L 456 287 L 65 330 Z" stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 65 330 L 456 287 L 456 286 L 65 330 Z" stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 0 0" stroke-linejoin="round"></path></g><g style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 496 66 L 490 300 L 490 301 Z" stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 495 66 L 460 61 L 455 287 L 490 301 Z" stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 460 61 L 460 61 L 496 66 Z" stroke-linejoin="round"></path></g><g style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 345 L 490 300 L 490 300 L 88 346 Z" stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 346 L 490 300 L 457 287 L 65 330 Z" stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 88 345 L 65 329 L 65 330 L 88 346 Z" stroke-linejoin="round"></path></g><g class="highcharts-grid" ><path fill="none" d="M 146 75 L 146 75 L 150 320 L 175 336" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 189 73 L 189 73 L 191 316 L 217 331" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 230 71 L 230 71 L 232 311 L 259 326" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 271 69 L 271 69 L 271 307 L 300 322" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 310 67 L 310 67 L 310 302 L 339 317" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 349 66 L 349 66 L 348 298 L 378 313" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 387 64 L 387 64 L 385 294 L 416 308" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 424 62 L 424 62 L 421 290 L 454 304" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 461 61 L 461 61 L 457 286 L 491 300" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 103 77 L 103 77 L 108 325 L 131 341" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 59 79 L 59 79 L 65 329 L 87 345" stroke="#C0C0C0" stroke-width="1" opacity="1"></path></g><g class="highcharts-grid" ><path fill="none" d="M 59 78 L 59 78 L 461 60 L 496 66" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 61 144 L 61 144 L 460 119 L 494 127" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 62 206 L 62 206 L 459 175 L 493 185" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 64 269 L 64 269 L 458 232 L 492 243" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 65 330 L 65 330 L 457 286 L 490 300" stroke="#C0C0C0" stroke-width="1" opacity="1"></path></g><g class="highcharts-axis" ><path fill="none" d="M 75 325.5 L 525 325.5" stroke="#C0D0E0" stroke-width="1" visibility="hidden"></path></g><g class="highcharts-axis" ><text x="556.96875" text-anchor="middle" transform="translate(0,0) rotate(90 556.96875 200)" class=" highcharts-yaxis-title" style="color:#707070;fill:#707070;" visibility="visible" y="200">Values</text></g><g class="highcharts-series-group" ><g class="highcharts-series" visibility="visible" transform="translate(75,75) scale(1 1)" clip-path="url(#highcharts-5)"><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 390 141 L 408 139 L 406 226 L 388 228 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 390 141 L 378 137 L 376 223 L 388 228 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 390 141 L 378 137 L 395 136 L 408 139 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 353 56 L 372 54 L 369 230 L 351 232 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 353 56 L 342 53 L 339 227 L 351 232 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 353 56 L 342 53 L 360 52 L 372 54 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 314 118 L 333 117 L 332 235 L 313 237 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 314 118 L 303 114 L 302 231 L 313 237 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 314 118 L 303 114 L 322 113 L 333 117 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 275 212 L 294 210 L 293 239 L 274 241 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 275 212 L 264 207 L 283 205 L 294 210 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 275 212 L 264 207 L 264 236 L 274 241 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 235 94 L 255 93 L 254 243 L 235 246 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 235 94 L 224 90 L 224 240 L 235 246 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 235 94 L 224 90 L 244 89 L 255 93 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 194 250 L 214 248 L 214 248 L 194 250 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 194 250 L 184 245 L 204 243 L 214 248 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 194 250 L 184 245 L 184 245 L 194 250 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 152 131 L 173 130 L 173 253 L 153 255 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 152 131 L 142 127 L 143 249 L 153 255 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 152 131 L 142 127 L 163 126 L 173 130 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 66 170 L 88 168 L 89 262 L 68 264 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 66 170 L 57 165 L 59 259 L 68 264 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 66 170 L 57 165 L 79 163 L 88 168 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 23 206 L 44 204 L 45 267 L 24 269 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 23 206 L 14 201 L 15 264 L 24 269 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 23 206 L 14 201 L 36 199 L 44 204 Z" stroke-linejoin="round"></path></g></g><g class="highcharts-markers" visibility="visible" transform="translate(75,75) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title" style="color:#333333;font-size:18px;fill:#333333;width:536px;" y="25"><tspan>3D chart with null values</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle" style="color:#555555;fill:#555555;width:536px;" y="53"><tspan>Notice the difference between a 0 value and a null point</tspan></text><g class="highcharts-legend" transform="translate(270,364)"><g ><g><g class="highcharts-legend-item" transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15">Sales</text><rect x="0" y="4" width="16" height="12" fill="#7cb5ec"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" ><text x="110" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="363" z="-59" opacity="1">Jan</text><text x="154" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="358" z="-40" opacity="1">Feb</text><text x="197" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="353" z="-22" opacity="1">Mar</text><text x="239" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="348" z="-3" opacity="1">Apr</text><text x="280" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="343" z="16" opacity="1">May</text><text x="320" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="338" z="35" opacity="1">Jun</text><text x="359" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="334" z="53" opacity="1">Jul</text><text x="398" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="329" z="72" opacity="1">Aug</text><text x="435" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="324" z="91" opacity="1">Sep</text><text x="472" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="320" z="109" opacity="1">Oct</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" ><text x="502" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="301" z="122" opacity="1">0</text><text x="504" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="244" z="111" opacity="1">2</text><text x="505" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="187" z="100" opacity="1">4</text><text x="506" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="128" z="90" opacity="1">6</text><text x="508" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="69" z="79" opacity="1">8</text></g><g class="highcharts-tooltip" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgb(249, 249, 249)" fill-opacity=" .85" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"></path><text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="21"></text></g><text x="590" text-anchor="end" style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg>
</div>
<section>
<canvas id="svg-canvas"></canvas>
</section>Pour répondre à ma propre question:
Une autre possibilité, mais pas la plus agréable, consiste à afficher le contenu sérialisé sur la page Web et à le sélectionner, le copier et le coller. Ceci après avoir étudié la solution d'Eli Grey.
J'ai fait un bookmarklet propre/utilisable à partir des suggestions.
Il mettra un lien unique à côté de chaque <svg> En ligne sur la page.
https://codepen.io/corysimmons/pen/vybzqV
J'espère que ça aide quelqu'un.