diff --git a/vue/package-lock.json b/vue/package-lock.json
index 7a08663..16b6dd5 100644
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
@@ -8,8 +8,10 @@
       "name": "vue3demo",
       "version": "0.1.0",
       "dependencies": {
+        "@antv/g-svg": "^2.1.1",
         "@antv/g6": "^5.0.50",
         "axios": "^1.13.2",
+        "canvas2svg": "^1.0.16",
         "core-js": "^3.8.3",
         "element-plus": "^2.13.0",
         "entities": "^4.5.0",
@@ -272,6 +274,48 @@
         "tslib": "^2.5.3"
       }
     },
+    "node_modules/@antv/g-svg": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@antv/g-svg/-/g-svg-2.1.1.tgz",
+      "integrity": "sha512-gVzBkjqA8FzDTbkuIxj6L0Omz/X/hFbYLzK6alWr0sHTfywqP6czcjDUJU8DF2MRIY1Twy55uZYW4dqqLXOXXg==",
+      "dependencies": {
+        "@antv/g-lite": "2.7.0",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-svg/node_modules/@antv/g-lite": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@antv/g-lite/-/g-lite-2.7.0.tgz",
+      "integrity": "sha512-uSzgHYa5bwR5L2Au7/5tsOhFmXKZKLPBH90+Q9bP9teVs5VT4kOAi0isPSpDI8uhdDC2/VrfTWu5K9HhWI6FWw==",
+      "dependencies": {
+        "@antv/g-math": "3.1.0",
+        "@antv/util": "^3.3.5",
+        "@antv/vendor": "^1.0.3",
+        "@babel/runtime": "^7.25.6",
+        "eventemitter3": "^5.0.1",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-svg/node_modules/@antv/g-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@antv/g-math/-/g-math-3.1.0.tgz",
+      "integrity": "sha512-DtN1Gj/yI0UiK18nSBsZX8RK0LszGwqfb+cBYWgE+ddyTm8dZnW4tPUhV7QXePsS6/A5hHC+JFpAAK7OEGo5ZQ==",
+      "dependencies": {
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-svg/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/@antv/g-web-animations-api": {
       "version": "2.1.28",
       "resolved": "https://registry.npmjs.org/@antv/g-web-animations-api/-/g-web-animations-api-2.1.28.tgz",
@@ -3834,6 +3878,17 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
+      "integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/@vue/compiler-dom": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.26.tgz",
@@ -5159,6 +5214,11 @@
         }
       ]
     },
+    "node_modules/canvas2svg": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/canvas2svg/-/canvas2svg-1.0.16.tgz",
+      "integrity": "sha512-r3ryHprzDOtAsFuczw+/DKkLR3XexwIlJWnJ+71I9QF7V9scYaV5JZgYDoCUlYtT3ARnOpDcm/hDNZYbWMRHqA=="
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -6833,9 +6893,9 @@
       }
     },
     "node_modules/entities": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
-      "integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "engines": {
         "node": ">=0.12"
       },
@@ -7959,6 +8019,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
+      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -13576,6 +13644,50 @@
         "tslib": "^2.5.3"
       }
     },
+    "@antv/g-svg": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@antv/g-svg/-/g-svg-2.1.1.tgz",
+      "integrity": "sha512-gVzBkjqA8FzDTbkuIxj6L0Omz/X/hFbYLzK6alWr0sHTfywqP6czcjDUJU8DF2MRIY1Twy55uZYW4dqqLXOXXg==",
+      "requires": {
+        "@antv/g-lite": "2.7.0",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      },
+      "dependencies": {
+        "@antv/g-lite": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/@antv/g-lite/-/g-lite-2.7.0.tgz",
+          "integrity": "sha512-uSzgHYa5bwR5L2Au7/5tsOhFmXKZKLPBH90+Q9bP9teVs5VT4kOAi0isPSpDI8uhdDC2/VrfTWu5K9HhWI6FWw==",
+          "requires": {
+            "@antv/g-math": "3.1.0",
+            "@antv/util": "^3.3.5",
+            "@antv/vendor": "^1.0.3",
+            "@babel/runtime": "^7.25.6",
+            "eventemitter3": "^5.0.1",
+            "gl-matrix": "^3.4.3",
+            "tslib": "^2.5.3"
+          }
+        },
+        "@antv/g-math": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/@antv/g-math/-/g-math-3.1.0.tgz",
+          "integrity": "sha512-DtN1Gj/yI0UiK18nSBsZX8RK0LszGwqfb+cBYWgE+ddyTm8dZnW4tPUhV7QXePsS6/A5hHC+JFpAAK7OEGo5ZQ==",
+          "requires": {
+            "@antv/util": "^3.3.5",
+            "@babel/runtime": "^7.25.6",
+            "gl-matrix": "^3.4.3",
+            "tslib": "^2.5.3"
+          }
+        },
+        "eventemitter3": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+          "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+        }
+      }
+    },
     "@antv/g-web-animations-api": {
       "version": "2.1.28",
       "resolved": "https://registry.npmjs.org/@antv/g-web-animations-api/-/g-web-animations-api-2.1.28.tgz",
@@ -16223,6 +16335,13 @@
         "entities": "^7.0.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
+          "integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ=="
+        }
       }
     },
     "@vue/compiler-dom": {
@@ -17169,6 +17288,11 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001594.tgz",
       "integrity": "sha512-VblSX6nYqyJVs8DKFMldE2IVCJjZ225LW00ydtUWwh5hk9IfkTOffO6r8gJNsH0qqqeAF8KrbMYA2VEwTlGW5g=="
     },
+    "canvas2svg": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/canvas2svg/-/canvas2svg-1.0.16.tgz",
+      "integrity": "sha512-r3ryHprzDOtAsFuczw+/DKkLR3XexwIlJWnJ+71I9QF7V9scYaV5JZgYDoCUlYtT3ARnOpDcm/hDNZYbWMRHqA=="
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -18395,9 +18519,9 @@
       }
     },
     "entities": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
-      "integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ=="
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
     },
     "error-ex": {
       "version": "1.3.2",
@@ -19216,6 +19340,11 @@
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
+    "fuse.js": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
+      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
diff --git a/vue/package.json b/vue/package.json
index 2252144..ab5ced6 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/g-svg": "^2.1.1",
     "@antv/g6": "^5.0.50",
     "axios": "^1.13.2",
+    "canvas2svg": "^1.0.16",
     "core-js": "^3.8.3",
     "element-plus": "^2.13.0",
     "entities": "^4.5.0",