2

Did someone of you try to make svg.js work with node.js? I tried to use the jsdom module to render svg but jsdom but SVG.supported returns false. Is there a way to make this library work with node.js?

Thanks in advance!

EDIT: Here is my code, I want to make that on Node.js and then probably render the SVG in a pdf or as a png:

var draw = SVG('drawing').size(600, 600) 
var image = draw.image('inclusions.png') 
image.size(400, 150) 
var rect = draw.rect(400, 150).attr({ fill: 'orange' }) 
for (i = 0; i < 10; i++) { 
    var point = draw.circle(5) 
    var xpos = Math.floor((Math.random() * 400) + 1); 
    var ypos = Math.floor((Math.random() * 150) + 1); 
    point.x(xpos) 
    point.y(ypos) 
    point.fill('black') 
} 
image.front()
user2005317
  • 21
  • 1
  • 5
  • What specifically are you trying to do? Are you trying to render SVG in order to display it to the screen somehow? Or are you trying to save the render to a file? Could you provide a sample bit of code that illustrates, from start to finish, what you would like to do? – TheHans255 Mar 21 '16 at 14:30
  • Add your code as an edit to the post (click the edit link on the bottom left of your post). – TheHans255 Mar 21 '16 at 19:18
  • Do you only need to do this operation once, or does it need to be automatically generated at the request of an end user? How will the image be used? – TheHans255 Mar 21 '16 at 19:41
  • It needs to be automatically generated everytime an end user makes a request – user2005317 Mar 21 '16 at 20:47

2 Answers2

3

Here is the working example usage of svg.js inside nodejs project, svgdom is the suggested library from svg.js official website

const window = require('svgdom');
const SVG = require('svg.js')(window);
const document = window.document;

function generateSVGTextLines(width, height, lineList, tAsset) {
  var draw = SVG(document.documentElement).size(width, height);
  draw.clear();

  draw.text(function (add) {
    if (lineList) {
        for (var i = 0; i < lineList.length; i++) {
            add.tspan(lineList[i].text).attr("x", "50%").newLine();
        }
    }
  }).font({
    family: tAsset.fontFamily,
    size: tAsset.fontHeight,
    leading: '1.2em',
    anchor: "middle"
   }).move(width / 2, 0);

   return draw.svg();
}
Community
  • 1
  • 1
erhanasikoglu
  • 1,685
  • 1
  • 21
  • 33
0

This link might be helpful: http://techslides.com/save-svg-as-an-image

This documents a client side solution that causes the requisite SVG to be drawn on the end user's browser, rather than on the server, but it provides the end result you want by putting the SVG into an image tag and allowing the user to download it. If keeping the SVG drawing logic secret is a problem, you could use a similar principle by sicing PhantomJS on the generator page and sending the user the image it downloads.

TheHans255
  • 2,059
  • 1
  • 19
  • 36
  • 1
    I need to make it run on server side. I managed to make my code work on PhantomJS but it really needs to work on Node.js server because the PhantomJS web server is not suitable for production – user2005317 Mar 22 '16 at 15:35
  • Is it possible for you to download PhantomJS onto the server as an offline program and start it in Node using `process.start()`? (You might not if you're using Heroku or similar). – TheHans255 Mar 22 '16 at 15:36
  • I also made it work using PhantomJS in Node.js but it's not an optimal solution because the PhantomJS starts a new instance of the browser at every request – user2005317 Mar 22 '16 at 16:07
  • Which may not actually be that bad. [This article](https://www.smashingmagazine.com/2014/05/love-generating-svg-javascript-move-to-server/) has a sample JSDom solution but claims that invoking a new instance of PhantomJS is actually faster. You don't know what will truly bottleneck your application until you actually profile and time each step. – TheHans255 Mar 22 '16 at 16:14