Search code examples
javascriptnode.jssvgcommand-linenvm

node.js and javascript library / script example : no output

I am trying to get the javascript code on this old post - converting SVG files to x,y coordinates in plain-text format - to work, and I am wondering what I am missing - it looks so simple. I put my setup and results below. I put the script here, with its notes from the original post :

"Write config.json with content e.g."

{
  "joinPathData": false,
  "minDistance": 0.5,
  "roundToNearest": 0.25,
  "sampleFrequency": 0.001,
  "pretty": false,
  "prettyIndent": 0
}

quoting : "In your code you may use library like this:"

import SVGPathInterpolator from 'SVGPathInterpolator';
const svgString = `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
    <g>
        <path id="path3789" d="M287.168,442.411
        c-8.65,0-15.652,7.003-15.652,15.653
        c0,8.65,7.003,15.69,15.652,15.69
        s15.653-7.04,15.653-15.69
        "/>
    </g>
</svg>
`;
const config = {
    joinPathData: false,
    minDistance: 0.5,
    roundToNearest: 0.25,
    sampleFrequency: 0.001
};
const interpolator = new SVGPathInterpolator(config);
const pathData = interpolator.processSvg(svgString);

The following is beyond the scope, but important to note for troubleshooting : I used apt to install npm on this Ubuntu 22.04.2 Linux system. I installed SVGPathInterpolator library as described on the webpage - using npm install -g svg-path-interpolator. I also ran the local install npm install svg-path-interpolator, hoping it would just work. Instead of svgpi, which I found very little about, I got node v19.7.0 by using npm and nvm as followed on the various webpages.

Back to the question : quoting the SO post : "Run it svgpi config.json ballons.svg ballons.js". (The file balloons.svg is here).

I execute in the bash shell node config.json my_script_01.json balloons.svg output.js and the process simply completes without any output or messages. In fact that is a new result - I only got this far just now - before, my setup produced errors such as Unexpected token 'i', "import SVG"... is not valid JSON. Perhaps I am on the right track - I am looking for ASCII plain-text x,y coordinates describing the vector shapes in the SVG file (see below).

I can see shell environment variables such as NVM_INC but I am not sure if that is relevant. Basic javascript examples work (e.g. from https://nodejs.dev/en/learn). More complex scripts do not and I think I am misunderstanding how to use the example script.

Is the javascript excerpt above expected to be built somehow into a bigger script e.g. a webpage - i.e. not run from the command line, but in a browser? I have seen how those example scripts work also so perhaps I can figure out how to make a webpage. The post describes a website which worked great at converting svg file vectors into x,y coordinates - thus, I expect the example script to do that - but I cannot understand how the script relates to that - I know I can read some website code using a browser, but I am not sure what to look for.

An update : I am trying to write a webpage to make this work, following this.

As an aside : I asked about asking this question on Meta S.E. first, and am using the best guidance from that post. Otherwise, I'd post a comment because my reputation is at 37 currently.

Solution

  • The description in the quoted answer is somehow exact, but leaves out one detail that (I think) is irrelevant if you are on a Windows system. Installing the library globally with the -g flag

    npm install -g svg-path-interpolator

    may require administrative rights on a Debianoid system (which I infer from your apt reference). The main purpose is to make the script svg-path-interpolator/bin/svgpi.mjs available to all users as a global command svgpi. It seems this failed for you, the why being a question out of scope here. (This might give you some hints.)

    But you don't need the global command, you can execute the file directly with the node.js interpreter:

    node path/to/svgpi.mjs config.json balloons.svg output.json

    You could even leave out the call to node if you make sure you have the right to execute svgpi.mjs. (The first line of the script is a hashbang.)

    path/to/svgpi.mjs config.json ballons.svg output.json

    In the answer, the part starting with "In your code you may use" describes a alternative way to use the library. So you

    • do not need a script like that if you want to convert from the command line. All you need is a config.json, an input ballons.svg, and an output.json will be written.
    • do need the script if you want to integrate the conversion with other node.js tasks. Then the script as quoted replaces the input files, including their content inline as variables. The output also only appears as the value of a variable.

    And before you are too suprised: the output is not in "plain-text format", but a JSON file (or its object equivalent while still held in a variable).