diff --git a/web/pgadmin/misc/static/explain/js/explain.js b/web/pgadmin/misc/static/explain/js/explain.js
index 9ee2d6e..8e0a04b 100644
--- a/web/pgadmin/misc/static/explain/js/explain.js
+++ b/web/pgadmin/misc/static/explain/js/explain.js
@@ -1,9 +1,12 @@
define('pgadmin.misc.explain', [
'sources/url_for', 'jquery', 'underscore', 'underscore.string',
'sources/pgadmin', 'backbone', 'snapsvg', 'explain_statistics',
-], function(url_for, $, _, S, pgAdmin, Backbone, Snap, StatisticsModel) {
+ 'svg_downloader',
+], function(url_for, $, _, S, pgAdmin, Backbone, Snap, StatisticsModel,
+ svgDownloader) {
pgAdmin = pgAdmin || window.pgAdmin || {};
+ svgDownloader = svgDownloader.default;
// Snap.svg plug-in to write multitext as image name
Snap.plugin(function(Snap, Element, Paper) {
@@ -565,70 +568,88 @@ define('pgadmin.misc.explain', [
});
}
- // Draw the actual image for current node
- var image = g.image(
- pgExplain.prefix + this.get('image'),
- currentXpos + (pWIDTH - IMAGE_WIDTH) / 2,
- currentYpos + (pHEIGHT - IMAGE_HEIGHT) / 2,
- IMAGE_WIDTH,
- IMAGE_HEIGHT
- );
+ var that = this;
+ /* This function is a callback function called when we load any svg file
+ * using Snap. In this function we append the SVG binary data to the new
+ * temporary Snap object and then embedded it to the original Snap() object.
+ */
+ function onSVGLoaded(data){
+ var svg_image = Snap();
+ svg_image.append(data);
+
+ // Draw the actual image for current node
+ var image = g.image(
+ svg_image.toDataURL(),
+ currentXpos + (pWIDTH - IMAGE_WIDTH) / 2,
+ currentYpos + (pHEIGHT - IMAGE_HEIGHT) / 2,
+ IMAGE_WIDTH,
+ IMAGE_HEIGHT
+ );
- // Draw tooltip
- var image_data = this.toJSON();
- image.mouseover(() => {
-
- // Empty the tooltip content if it has any and add new data
- toolTipContainer.empty();
- var tooltip = $('
');
- }
- });
- var zoomFactor = graphContainer.data('zoom-factor');
+ // This attribute is required to download the file as SVG image.
+ s.parent().attr({'xmlns:xlink':'http://www.w3.org/1999/xlink'});
+
+ // Draw tooltip
+ var image_data = that.toJSON();
+ image.mouseover(() => {
+
+ // Empty the tooltip content if it has any and add new data
+ toolTipContainer.empty();
+ var tooltip = $('