diff --git a/src/editor/components/jgraduate/paint.js b/src/editor/components/jgraduate/paint.js
index a82390bb..7a7fe3b7 100644
--- a/src/editor/components/jgraduate/paint.js
+++ b/src/editor/components/jgraduate/paint.js
@@ -56,13 +56,23 @@ export default class Paint {
       this.type = 'linearGradient';
       this.solidColor = null;
       this.radialGradient = null;
-      this.linearGradient = options.linearGradient.cloneNode(true);
+      if(options.linearGradient.hasAttribute('xlink:href')) {
+        const xhref = document.getElementById(options.linearGradient.getAttribute('xlink:href').substr(1));
+        this.linearGradient = xhref.cloneNode(true);
+      } else {
+        this.linearGradient = options.linearGradient.cloneNode(true);
+      }
     // create linear gradient paint
     } else if (options.radialGradient) {
       this.type = 'radialGradient';
       this.solidColor = null;
       this.linearGradient = null;
-      this.radialGradient = options.radialGradient.cloneNode(true);
+      if(options.radialGradient.hasAttribute('xlink:href')) {
+        const xhref = document.getElementById(options.radialGradient.getAttribute('xlink:href').substr(1));
+        this.radialGradient = xhref.cloneNode(true);
+      } else {
+        this.radialGradient = options.radialGradient.cloneNode(true);
+      }
     // create solid color paint
     } else if (options.solidColor) {
       this.type = 'solidColor';
@@ -75,4 +85,4 @@ export default class Paint {
       this.radialGradient = null;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/svgcanvas/svg-exec.js b/src/svgcanvas/svg-exec.js
index d3fb2cc3..955bfa9f 100644
--- a/src/svgcanvas/svg-exec.js
+++ b/src/svgcanvas/svg-exec.js
@@ -1051,21 +1051,29 @@ export const convertGradientsMethod = function (elem) {
       return (curThis.tagName.includes('Gradient'));
     });
   }
-
   Array.prototype.forEach.call(elems, function (grad) {
     if (grad.getAttribute('gradientUnits') === 'userSpaceOnUse') {
       const svgcontent = svgContext_.getSVGContent();
       // TODO: Support more than one element with this ref by duplicating parent grad
-      const fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]');
-      if (!fillStrokeElems.length) { return; }
-
+      let fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]');
+      if (!fillStrokeElems.length) {
+        const tmpFillStrokeElems = svgcontent.querySelectorAll('[*|href="#' + grad.id + '"]');
+        if (!tmpFillStrokeElems.length) {
+          return;
+        } else {
+          if((tmpFillStrokeElems[0].tagName === "linearGradient" || tmpFillStrokeElems[0].tagName === "radialGradient") && tmpFillStrokeElems[0].getAttribute('gradientUnits') === 'userSpaceOnUse') {
+            fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + tmpFillStrokeElems[0].id + ')"],[stroke="url(#' + tmpFillStrokeElems[0].id + ')"]');
+          } else {
+            return;
+          }
+        }
+      }
       // get object's bounding box
       const bb = utilsGetBBox(fillStrokeElems[0]);
 
       // This will occur if the element is inside a <defs> or a <symbol>,
       // in which we shouldn't need to convert anyway.
       if (!bb) { return; }
-
       if (grad.tagName === 'linearGradient') {
         const gCoords = {
           x1: grad.getAttribute('x1'),