I'm trying to download a generated SVG content on clicking on a button. The click doesn't seem to trigger and there's no effect or console error. I tried to trigger with simple javascript or jQuery, KO. I tried with Firefox 51.0.1 and Internet Explorer 9 and 11, KO. With IE11, I have the following error: "The data area passed to a system call is too small".
I also tried to copy the URI into browsers address bars. In IE9, the URI get truncated and nothing displays. In Firefox, the SVG displays correctly.
EDIT: Code was updated to add the generated link to the dom. Link is added but click still not trigger.
Here is the code I tried:
$('#downloadjs').click(function() {
var uri = 'data:image/svg+xml;utf8,%3C%3Fxml version%3D"1.0" encoding%3D"UTF-8"%3F%3E%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"100%25" height%3D"100%25" viewBox%3D"0 0 915 585" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%3E%3Cdefs%3E%3ClinearGradient id%3D"b" y2%3D"445" gradientUnits%3D"userSpaceOnUse" y1%3D"179" gradientTransform%3D"translate(0 -2.06)" x2%3D"-29.7" x1%3D"322"%3E%3Cstop stop-color%3D"%23333" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%23fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id%3D"a" y2%3D"414" gradientUnits%3D"userSpaceOnUse" y1%3D"159" x2%3D"490" x1%3D"815"%3E%3Cstop stop-color%3D"%2333f" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%233f3fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill%3D"url(%23b)" d%3D"m403 247c-12 115-135 122-368 123-4.3-1.07-7.32-7.33-6-41 76-37 151-124 167-236 93 123 201 40.9 207 154z"%2F%3E%3Cg stroke-width%3D"3.45" fill%3D"none"%3E%3Cpath stroke%3D"%23000" d%3D"m11.8 11.8h411v411l-411 0.01v-411z"%2F%3E%3Cpath stroke%3D"%23448" d%3D"m489 11.7h415v411h-415v-411z"%2F%3E%3C%2Fg%3E%3Cpath d%3D"m876 244c-12 115-133 120-366 121-6-14-10-40-3-43 76-37.3 136-106 152-218 38 48 209 101 217 140z" fill%3D"url(%23a)"%2F%3E%3Cg id%3D"RasterLarge" transform%3D"matrix(1.36 0 0 1.28 -161 -636)"%3E%3Cpath fill%3D"%23999" d%3D"m287 730h-30v-60h20v20h10v10h10v10h20v10h40v-10h20v-20h10v-20h-10v-10h-10v-10h-40v-10h-30v-10h-20v-10h-10v-10h-10v-60h10v-10h10v-10h10v-10h90v10h30v60h-20v-10h-10v-20h-10v-10h-20v-10h-30v10h-20v10h-10v20h10v20h30v10h30v10h30v10h10v10h10v10h10v60h-10v10h-10v10h-10v10h-100v-10z"%2F%3E%3Cpath fill%3D"%23555" d%3D"m297 730h-30v-10h-10v-50h20v20h10v20h10 10v10h60v-10h10v-10h10v-40h-20v-10h-20v-10h-40v-10h-20v-10h-20v-20h-10v-50h10v-10h10v-10h20v-10h70v10h30v10h10v50h-20v-20h-10v-20h-20v-10h-50v10h-10v10h-10v30h10v10h20v10h30v10h30v10h20v10h10v10h10v50h-10v20h-10v10h-20v10h-80z"%2F%3E%3Cpath d%3D"m307 730h-30v-10h-20v-50h20v30h10v10h10v10h70v-10h20v-50h-10v-10h-20v-10h-40v-10h-30v-10h-10v-10h-10v-20h-10v-30h10v-20h20v-10h20v-10h50v10h30v10h20v50h-20v-30h-10v-10h-10v-10h-70v10h-10v40h10v10h10v10h30v10h40v10h20v10h10v20h10v40h-10v20h-20v10h-30v10h-50v-10z"%2F%3E%3C%2Fg%3E%3Cg font-size%3D"40" font-family%3D"sans-serif" text-anchor%3D"middle"%3E%3Cg font-size%3D"100"%3E%3Ctext y%3D"518" x%3D"210"%3ERaster%3C%2Ftext%3E%3Ctext y%3D"518" x%3D"695" fill%3D"%23338"%3EVector%3C%2Ftext%3E%3C%2Fg%3E%3Ctext y%3D"563" x%3D"210"%3E.jpeg .gif .png%3C%2Ftext%3E%3Ctext y%3D"563" x%3D"696" fill%3D"%23338"%3E.svg%3C%2Ftext%3E%3C%2Fg%3E%3Cpath id%3D"VectorLarge" fill%3D"%23005" d%3D"m661 294v-62.5l23.4 0.184c0.678 20.8 7.32 36.3 19.9 46.4 12.7 9.93 32.1 14.9 57.9 14.9 24.1 0 42.5-4.29 55.1-12.9 12.7-8.71 19.1-21.3 19.1-37.9 0-13.2-3.86-23.4-11.6-30.5-7.59-7.11-23.7-14-48.4-20.8l-40.1-10.9c-29-7.97-49.5-17.9-61.4-29.8-11.8-11.9-17.7-28.2-17.7-48.9 0-23.3 9.15-41.4 27.4-54.3 18.3-12.9 44-19.3 77.1-19.3 14.1 0 29.6 1.41 46.4 4.23 16.8 2.7 34.7 6.68 53.7 12v58.5h-23c-2.3-19.4-9.49-33.4-21.6-41.9-11.9-8.71-30.2-13.1-54.7-13.1-21.4 0-37.7 3.99-49 12-11.1 7.85-16.7 19.3-16.7 34.4 0 13.1 4.2 23.4 12.6 30.9 8.4 7.48 26.2 14.9 53.5 22.3l37.6 10.1c27.5 7.48 47.1 17 58.8 28.7 11.8 11.5 17.7 27 17.7 46.5 0 26.6-9.42 46.7-28.3 60.2s-46.9 20.2-84.2 20.2c-16.7 0-33.7-1.53-51-4.6-18-3-35-7-53-13z"%2F%3E%3Cuse xlink%3Ahref%3D"%23VectorLarge" transform%3D"matrix(.17 0 0 .17 392 313)"%2F%3E%3Cuse xlink%3Ahref%3D"%23RasterLarge" transform%3D"matrix(.173 0 0 .173 -8.25 314)" height%3D"100%25" width%3D"100%25" y%3D"0" x%3D"0"%2F%3E%3C%2Fsvg%3E';
var link = document.createElement("a");
link.download = 'filename.svg';
link.type = 'image/svg+xml';
link.href = uri;
document.body.appendChild(link); // add to DOM
link.click(); // no effect
});
$('#downloadjq').click(function() {
var uri = 'data:image/svg+xml;utf8,%3C%3Fxml version%3D"1.0" encoding%3D"UTF-8"%3F%3E%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"100%25" height%3D"100%25" viewBox%3D"0 0 915 585" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%3E%3Cdefs%3E%3ClinearGradient id%3D"b" y2%3D"445" gradientUnits%3D"userSpaceOnUse" y1%3D"179" gradientTransform%3D"translate(0 -2.06)" x2%3D"-29.7" x1%3D"322"%3E%3Cstop stop-color%3D"%23333" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%23fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id%3D"a" y2%3D"414" gradientUnits%3D"userSpaceOnUse" y1%3D"159" x2%3D"490" x1%3D"815"%3E%3Cstop stop-color%3D"%2333f" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%233f3fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill%3D"url(%23b)" d%3D"m403 247c-12 115-135 122-368 123-4.3-1.07-7.32-7.33-6-41 76-37 151-124 167-236 93 123 201 40.9 207 154z"%2F%3E%3Cg stroke-width%3D"3.45" fill%3D"none"%3E%3Cpath stroke%3D"%23000" d%3D"m11.8 11.8h411v411l-411 0.01v-411z"%2F%3E%3Cpath stroke%3D"%23448" d%3D"m489 11.7h415v411h-415v-411z"%2F%3E%3C%2Fg%3E%3Cpath d%3D"m876 244c-12 115-133 120-366 121-6-14-10-40-3-43 76-37.3 136-106 152-218 38 48 209 101 217 140z" fill%3D"url(%23a)"%2F%3E%3Cg id%3D"RasterLarge" transform%3D"matrix(1.36 0 0 1.28 -161 -636)"%3E%3Cpath fill%3D"%23999" d%3D"m287 730h-30v-60h20v20h10v10h10v10h20v10h40v-10h20v-20h10v-20h-10v-10h-10v-10h-40v-10h-30v-10h-20v-10h-10v-10h-10v-60h10v-10h10v-10h10v-10h90v10h30v60h-20v-10h-10v-20h-10v-10h-20v-10h-30v10h-20v10h-10v20h10v20h30v10h30v10h30v10h10v10h10v10h10v60h-10v10h-10v10h-10v10h-100v-10z"%2F%3E%3Cpath fill%3D"%23555" d%3D"m297 730h-30v-10h-10v-50h20v20h10v20h10 10v10h60v-10h10v-10h10v-40h-20v-10h-20v-10h-40v-10h-20v-10h-20v-20h-10v-50h10v-10h10v-10h20v-10h70v10h30v10h10v50h-20v-20h-10v-20h-20v-10h-50v10h-10v10h-10v30h10v10h20v10h30v10h30v10h20v10h10v10h10v50h-10v20h-10v10h-20v10h-80z"%2F%3E%3Cpath d%3D"m307 730h-30v-10h-20v-50h20v30h10v10h10v10h70v-10h20v-50h-10v-10h-20v-10h-40v-10h-30v-10h-10v-10h-10v-20h-10v-30h10v-20h20v-10h20v-10h50v10h30v10h20v50h-20v-30h-10v-10h-10v-10h-70v10h-10v40h10v10h10v10h30v10h40v10h20v10h10v20h10v40h-10v20h-20v10h-30v10h-50v-10z"%2F%3E%3C%2Fg%3E%3Cg font-size%3D"40" font-family%3D"sans-serif" text-anchor%3D"middle"%3E%3Cg font-size%3D"100"%3E%3Ctext y%3D"518" x%3D"210"%3ERaster%3C%2Ftext%3E%3Ctext y%3D"518" x%3D"695" fill%3D"%23338"%3EVector%3C%2Ftext%3E%3C%2Fg%3E%3Ctext y%3D"563" x%3D"210"%3E.jpeg .gif .png%3C%2Ftext%3E%3Ctext y%3D"563" x%3D"696" fill%3D"%23338"%3E.svg%3C%2Ftext%3E%3C%2Fg%3E%3Cpath id%3D"VectorLarge" fill%3D"%23005" d%3D"m661 294v-62.5l23.4 0.184c0.678 20.8 7.32 36.3 19.9 46.4 12.7 9.93 32.1 14.9 57.9 14.9 24.1 0 42.5-4.29 55.1-12.9 12.7-8.71 19.1-21.3 19.1-37.9 0-13.2-3.86-23.4-11.6-30.5-7.59-7.11-23.7-14-48.4-20.8l-40.1-10.9c-29-7.97-49.5-17.9-61.4-29.8-11.8-11.9-17.7-28.2-17.7-48.9 0-23.3 9.15-41.4 27.4-54.3 18.3-12.9 44-19.3 77.1-19.3 14.1 0 29.6 1.41 46.4 4.23 16.8 2.7 34.7 6.68 53.7 12v58.5h-23c-2.3-19.4-9.49-33.4-21.6-41.9-11.9-8.71-30.2-13.1-54.7-13.1-21.4 0-37.7 3.99-49 12-11.1 7.85-16.7 19.3-16.7 34.4 0 13.1 4.2 23.4 12.6 30.9 8.4 7.48 26.2 14.9 53.5 22.3l37.6 10.1c27.5 7.48 47.1 17 58.8 28.7 11.8 11.5 17.7 27 17.7 46.5 0 26.6-9.42 46.7-28.3 60.2s-46.9 20.2-84.2 20.2c-16.7 0-33.7-1.53-51-4.6-18-3-35-7-53-13z"%2F%3E%3Cuse xlink%3Ahref%3D"%23VectorLarge" transform%3D"matrix(.17 0 0 .17 392 313)"%2F%3E%3Cuse xlink%3Ahref%3D"%23RasterLarge" transform%3D"matrix(.173 0 0 .173 -8.25 314)" height%3D"100%25" width%3D"100%25" y%3D"0" x%3D"0"%2F%3E%3C%2Fsvg%3E';
var $link = $('<a></a>');
$link.attr('download', 'filename.svg');
$link.attr('type', 'image/svg+xml');
$link.attr('href', uri);
$('body').append($link); // add to DOM
$link.click(); // no effect
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="downloadjs">Download with javascript</button>
<button id="downloadjq">Download with jQuery</button>Is there something wrong with the previous code? Or are there limitations in browsers?
Here is a link with the same URI that seems to work well:
$(function() {
$('#link').attr('href', 'data:image/svg+xml;utf8,%3C%3Fxml version%3D"1.0" encoding%3D"UTF-8"%3F%3E%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"100%25" height%3D"100%25" viewBox%3D"0 0 915 585" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%3E%3Cdefs%3E%3ClinearGradient id%3D"b" y2%3D"445" gradientUnits%3D"userSpaceOnUse" y1%3D"179" gradientTransform%3D"translate(0 -2.06)" x2%3D"-29.7" x1%3D"322"%3E%3Cstop stop-color%3D"%23333" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%23fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id%3D"a" y2%3D"414" gradientUnits%3D"userSpaceOnUse" y1%3D"159" x2%3D"490" x1%3D"815"%3E%3Cstop stop-color%3D"%2333f" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%233f3fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill%3D"url(%23b)" d%3D"m403 247c-12 115-135 122-368 123-4.3-1.07-7.32-7.33-6-41 76-37 151-124 167-236 93 123 201 40.9 207 154z"%2F%3E%3Cg stroke-width%3D"3.45" fill%3D"none"%3E%3Cpath stroke%3D"%23000" d%3D"m11.8 11.8h411v411l-411 0.01v-411z"%2F%3E%3Cpath stroke%3D"%23448" d%3D"m489 11.7h415v411h-415v-411z"%2F%3E%3C%2Fg%3E%3Cpath d%3D"m876 244c-12 115-133 120-366 121-6-14-10-40-3-43 76-37.3 136-106 152-218 38 48 209 101 217 140z" fill%3D"url(%23a)"%2F%3E%3Cg id%3D"RasterLarge" transform%3D"matrix(1.36 0 0 1.28 -161 -636)"%3E%3Cpath fill%3D"%23999" d%3D"m287 730h-30v-60h20v20h10v10h10v10h20v10h40v-10h20v-20h10v-20h-10v-10h-10v-10h-40v-10h-30v-10h-20v-10h-10v-10h-10v-60h10v-10h10v-10h10v-10h90v10h30v60h-20v-10h-10v-20h-10v-10h-20v-10h-30v10h-20v10h-10v20h10v20h30v10h30v10h30v10h10v10h10v10h10v60h-10v10h-10v10h-10v10h-100v-10z"%2F%3E%3Cpath fill%3D"%23555" d%3D"m297 730h-30v-10h-10v-50h20v20h10v20h10 10v10h60v-10h10v-10h10v-40h-20v-10h-20v-10h-40v-10h-20v-10h-20v-20h-10v-50h10v-10h10v-10h20v-10h70v10h30v10h10v50h-20v-20h-10v-20h-20v-10h-50v10h-10v10h-10v30h10v10h20v10h30v10h30v10h20v10h10v10h10v50h-10v20h-10v10h-20v10h-80z"%2F%3E%3Cpath d%3D"m307 730h-30v-10h-20v-50h20v30h10v10h10v10h70v-10h20v-50h-10v-10h-20v-10h-40v-10h-30v-10h-10v-10h-10v-20h-10v-30h10v-20h20v-10h20v-10h50v10h30v10h20v50h-20v-30h-10v-10h-10v-10h-70v10h-10v40h10v10h10v10h30v10h40v10h20v10h10v20h10v40h-10v20h-20v10h-30v10h-50v-10z"%2F%3E%3C%2Fg%3E%3Cg font-size%3D"40" font-family%3D"sans-serif" text-anchor%3D"middle"%3E%3Cg font-size%3D"100"%3E%3Ctext y%3D"518" x%3D"210"%3ERaster%3C%2Ftext%3E%3Ctext y%3D"518" x%3D"695" fill%3D"%23338"%3EVector%3C%2Ftext%3E%3C%2Fg%3E%3Ctext y%3D"563" x%3D"210"%3E.jpeg .gif .png%3C%2Ftext%3E%3Ctext y%3D"563" x%3D"696" fill%3D"%23338"%3E.svg%3C%2Ftext%3E%3C%2Fg%3E%3Cpath id%3D"VectorLarge" fill%3D"%23005" d%3D"m661 294v-62.5l23.4 0.184c0.678 20.8 7.32 36.3 19.9 46.4 12.7 9.93 32.1 14.9 57.9 14.9 24.1 0 42.5-4.29 55.1-12.9 12.7-8.71 19.1-21.3 19.1-37.9 0-13.2-3.86-23.4-11.6-30.5-7.59-7.11-23.7-14-48.4-20.8l-40.1-10.9c-29-7.97-49.5-17.9-61.4-29.8-11.8-11.9-17.7-28.2-17.7-48.9 0-23.3 9.15-41.4 27.4-54.3 18.3-12.9 44-19.3 77.1-19.3 14.1 0 29.6 1.41 46.4 4.23 16.8 2.7 34.7 6.68 53.7 12v58.5h-23c-2.3-19.4-9.49-33.4-21.6-41.9-11.9-8.71-30.2-13.1-54.7-13.1-21.4 0-37.7 3.99-49 12-11.1 7.85-16.7 19.3-16.7 34.4 0 13.1 4.2 23.4 12.6 30.9 8.4 7.48 26.2 14.9 53.5 22.3l37.6 10.1c27.5 7.48 47.1 17 58.8 28.7 11.8 11.5 17.7 27 17.7 46.5 0 26.6-9.42 46.7-28.3 60.2s-46.9 20.2-84.2 20.2c-16.7 0-33.7-1.53-51-4.6-18-3-35-7-53-13z"%2F%3E%3Cuse xlink%3Ahref%3D"%23VectorLarge" transform%3D"matrix(.17 0 0 .17 392 313)"%2F%3E%3Cuse xlink%3Ahref%3D"%23RasterLarge" transform%3D"matrix(.173 0 0 .173 -8.25 314)" height%3D"100%25" width%3D"100%25" y%3D"0" x%3D"0"%2F%3E%3C%2Fsvg%3E');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link">Download</a>