Svg.js: Does svg.js support node.js?

[y0ke]

hi all.
Does svg.js support node.js?
Sorry If I missed the part of the document which states about it.
Thanks in advance.

[Fuzzyma]

What do you want to do exactly?

[y0ke]

I'm planning to build a APIlike server that returns SVG data as plain text.
So it doesn't require any animation/event handler things but just creating SVGs.so far I found phantom.js on the server side do the trick though I don't want to event render SVGs if I can and work with Basic node.js

[Fuzzyma]

As long as you dont use functions which relates on methods made available by the browser (e.g. bbox) it should work. But I am not sure with that. You have to try that yourself

[leoweigand]

svg.js will not work inside node.js as it assumes the presence of a document. It is intended to be used for client-side manipulation.
Take a look at this article: http://www.smashingmagazine.com/2014/05/26/love-generating-svg-javascript-move-to-server/#jsdom.
I linked the section, where the author explains how to use jsdom to simulate the DOM inside nodejs, in theory this should be possible to do with svg.js, too.

Anyway, this is not something svg.js should take care of, so this is ready to be closed.

[derhuerst]

I think there's just one small part missing.

If svg.js allowed me to pass the "global scope object", it would easily be possible. jsdom gives me a window object with a document property, but I can't pass it into the svg.js factory method.

AFAIK, everything else works.

[derhuerst]

I'd like svg.js to either respect environments without a global document object or provide a way to pass it in, e.g. to the factory method.

[Fuzzyma]

Any idea on how to accomplish this?

[derhuerst]

No sry, I haven't gone through the code of _svg.js_.

jQuery allows you to pass a window object as of 2.1.0. Maybe this can help.

[Fuzzyma]

Actually I cannot see the line where you can really _pass_ the window objcect. It just checks for the window object to be present and passes window or this. The UMD-Wrapper of svg.js does the same. this is passed to the factory which is just the global variable at this point. We just have to move the global-element into the lib where document is used

[derhuerst]

Look at the lines 25-27. If the global scope has no document property, an anonymous function is returned, which you can pass a window object (which is supposed to then have a document proprty).

[Fuzzyma]

Ok - I think I understand how it works. Please test this for me:
Replace the UMD-Wrapper at the start with this one:

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = root.document ? factory(root, root.document) : function(w){ return factory(w, w.document) };
  } else {
    root.SVG = factory(root, root.document);
  }
}(typeof window !== "undefined" ? window : this, function(window, document) {

You now can require your module via require('svg.js')(yourWindow). If that works I will push that to the master (even if I have to disable my gulp umd wrapper because it cant do this kind of stuff)

[Fuzzyma]

@derhuerst @y0ke @lweigand you all were that curios about that. What happend? :D

[derhuerst]

@Fuzzyma

My short-lasting motivation about SVG is over. I will have to wait until it comes back. :P

Furthermore, my contribution to this discussion was not because I urgently need to use SVG.js in Node, but because i like isomorphic NPM modules in general.

[fibo]

First of all, thank you againg for open sourcing and developing _svg.js_, it is the best svg lib you can find. Thank you also for the hints in this thread.

I am using svg.js with Node for my flow-view project, where I am using SVG.js file for server side, and window.SVG.js file for the browserified version.

I tryed the solution proposed, see https://github.com/fibo/flow-view/commit/f1e5c1b72be005fd7427ff60e7a304b9d137777d where I used my svg.js custom build after modifying _dist/svg.js_ with code found in https://github.com/wout/svg.js/issues/352#issuecomment-147243111.

I only tryed with a trivial test, but, it works and I hope this solution will be merged (please let me know).
This would be a big win for me, since I had to use a fake (empty) SVG object to let me pass a trivial test. Now I could add more tests running server side, making my project better.

It also open a big door to server side svg export to png or to svg file.

A note about plugins: in the browserified version I am using require('svg.js.pluginfoo') and it works, so in this sense svg.js support Node too, at least when browserified. I am not sure if it is just a trick that I found or it is implicitly known by most of developers, since I did not found any documentation about how to use plugins from npm.

[Fuzzyma]

Glad to hear, that this works.
Maybe I find a gulp plugin which helps including this properly

[fibo]

I am not a gulp expert (I currently use bare npm scripts) but I think you could even write your own task, so it would not be difficult if you cannot find a plugin that do specifically that.

By the way, I am also testing it on client side and it still works too.

[Fuzzyma]

I am curious if bbox works on serverside. Can anyone try that for me? (@fibo maybe?)

[Fuzzyma]

@y0ke @leoweigand @derhuerst @fibo we just released the new project svgdom which enables svg.js to run on node. Its nothing big but give it a try and report back :)

[leoweigand]

@Fuzzyma thanks for the heads-up! I'll make sure to look into it when I am tinkering with svg again ;)

[fibo]

check out also svgx which renders SVG server side