2

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
3
  • Make SVG a global and import them. That should work
    – Fuzzyma
    Apr 9, 2019 at 8:45
  • select.js and resize.js don't have definition files for an import
    – Shahbaz A.
    Apr 9, 2019 at 8:47
  • Aren't files without an export just executed?
    – Fuzzyma
    Apr 9, 2019 at 8:48

3 Answers 3

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/[email protected]/dist/svg.min.js.

Then I use script.js to load them.

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

Live Example

1

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(...)

0

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';
3
  • could you explain how you did this in the project more like the question structure, that was very useful, to get up and running with svg.js but I also want draggable as well, and I am unsure where to put everything now. using vue ui to install the library and plug in May 27, 2019 at 16:46
  • @adamprocter what i did in question have to be discarded and you have to use what i have in answer. So drop everything from question, add imports from the answer and everything should work. Don't forget to use version < 3.0
    – Shahbaz A.
    May 27, 2019 at 18:24
  • 1
    Ok thanks will try was just not sure on all the steps May 27, 2019 at 18:25

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.