我如何在 vue.js 中使用 SVG.js 插件？

Question

I am using svg.js in my Laravel project running vue.js .

This is how i use svg.js

Step 1: Install svg.js as a plugin in my vue app.

import svgJs from "svg.js/dist/svg"

export default {
    install(Vue) {
        Vue.prototype.$svg = svgJs
    }
}

Step 2: Import and use the plugin.

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

Step 3: Then i can do this.

console.log(this.$svg);

console.log(this.$svg.get("samplesvg"));

However i am not sure how to add the svg.js plugins. I want to use below three plugins, in case someone wants to know.

1. svg.select.js
2. svg.resize.js
3. svg.draggable.js

Answer 1

I have my solution for working with non npm / module library.

First I will use jsdelivr to serve file from directly from Github. For example https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js .

Then I use script.js to load them.

script.order([
  "https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js",
  "https://cdn.jsdelivr.net/npm/svg.select.js@3.0.1/dist/svg.select.min.js"
], () => {
  // window.SVG is available
});

Live Example

Answer 2

To use version 3.x you would either just do it with esm imports:

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'
// ...

No need to use plugins for vue. Just use SVG() in your code when you need it. If you need other functionality lile the "old" SVG.on() you need to import it, too: import { SVG, on } from '@svgdotjs/svg.js'

Or you include it via script tags. svg.js always ships with prebundled files for that purpose:

<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>

You can just use the global SVG variable in that case and access everything with it like SVG.on(...)

Answer 3

I had to change my approach according to comment by Fuzzyma

So i just did simple import in my app file, and it all worked fine. It is also worth mentioning that i used versions < 3.0 to make it work.

import * as SVG from 'svg.js/dist/svg';
import './plugins/svg.draggable/dist/svg.draggable';
import './plugins/svg.select/dist/svg.select';
import './plugins/svg.resize/dist/svg.resize';