import on node

[AidasK]

How can I import this lib in node?

import '@svgdotjs/svg.filter.js';
import * as SVG from 'svg.js';
const draw = (new SVG.Doc('map'));
draw.filterWith(function(add) {
        add.gaussianBlur(30)
});

throws draw.filterWith is not a function

[Fuzzyma]

If you want to use svg.js on node you first of all need a Dom implementation. You can use svgdom for that. It's shown in the Readme how to setup svg.js with svgdom.

Then you should load the plugin after the library and not before. Furthermore you use import instead of require. So you use a bundler. That's different from using node directly and I cannot give advice for that

[AidasK]

So the problem was that 'svg.js' version was 2.7 and I needed 3.x for this to work (documentation does not match on a website and on the github). So my current code is:

import {SVG} from '@svgdotjs/svg.js';
import '@svgdotjs/svg.filter.js';
const draw = SVG()
...
draw.filterWith(function(add) {
        add.gaussianBlur(1)
});
document.getElementById('map').appendChild(draw.node);

Don't know why SVG.Doc method is gone and why SVG('map') function does not return svg object as before, but at least it works with appendChild.

[Fuzzyma]

Sorry, are you using this lib on node or in the Browser? From what I see from your code you are using the browser but you stated that you want to use it on node. Yes, you need ofc the newest version. It does not have documentation yet which is bad but we cant change it for now. You can find many examples on twitter though. What you want is:

const draw = SVG().addTo('#map')
draw.filterWith(function(add) {
        add.gaussianBlur(1)
});

SVG.Doc is still there, you just need to import it like { Doc, SVG, .... }. But you mostly just dont need it. The SVG() function is also used for getting elements like SVG(cssSelector). The select() method is now find().

[AidasK]

Thanks, it works. Too bad that v3 was released half a year ago and docs are still suggesting to install 2.7...

[Fuzzyma]

We try our best, but we also do this on our free time. I prefered publishing the version without docs over never publishing the new version at all

[Fuzzyma]

@AidasK just realised that I talked nonesense about SVG.Doc. It was renamed to SVG.Svg for consistency. Sorry about the confusion!

[AidasK]

No worries, SVG().addTo('#map') works for me :)