question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using CLI to generate STLs based on SVGs?

See original GitHub issue

I’m looking for a way to provide an SVG file as an input to a JSCAD script via the CLI so that I can generate an STL file based on it’s contents by simply extruding it’s paths. I’ve put together a small Node script that essentially looks for SVG files within a set of folders, then runs the openjscad command via Node’s child_process.exec() method.

What I’m hoping for is a way to pass SVG files into the openjscad script (like maybe with an -i option?), but I haven’t found a way to do that in the User Guide yet. I see a package called svg-deserializer over in the io repo, but I’m not sure how (or if) it can be used here.

Does anyone have any thoughts about how / if this can be done? Is there maybe another way I can try to approach this?

Node script (stl-creator.js)

const { exec } = require('child_process');
const fs = require('fs');
const path = require('path');

const components = getDirectories(path.resolve('./components'));

// Traverse all folders inside ./components
components.forEach((component) => {
  let fullPath = path.resolve('./components/' + component);

  // For each component folder ...
  fs.readdir(fullPath, (err, files) => {
    // Compile list of all the .svg files here
    let svgFiles = files.filter((file) => {
      return path.extname(file).toLowerCase() === '.svg';
    });

    // For each .svg file ...
    svgFiles.forEach((file) => {
      let filename = file.split('.').slice(0, -1).join('.')

      // Generate .stl file using OpenJSCAD
      exec('openjscad stl-creator.jscad -o ' + fullPath + '/' + filename + '.stl', (error, stdout, stderr) => {
        if (error) {
          console.error(`exec error: ${error}`);
          return;
        }

        // console.log(`stdout: ${stdout}`);
        // console.error(`stderr: ${stderr}`);
      });
    });
  });
});

function getDirectories(dir) {
  return fs.readdirSync(dir).filter((file) => {
    return fs.statSync(dir + '/' + file).isDirectory();
  });
}

stl-creator.jscad

function main() {
   // Just generate a generic sphere for now
   return sphere()
}

I then run the Node script using node stl-creator.js, which produces STL files containing a sphere for each of the SVG files found. Now for the hard part: passing an SVG file (or filename) into the openjscad script and having it read it’s contents, extrude paths, and spit out an STL file.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
z3devcommented, Sep 2, 2019

DXF and STL will land soon.

0reactions
jasonwebbcommented, Sep 2, 2019

Thanks for the info! I can wait 😃 I see work is already underway with PR #463, so I’ll watch that for progress. This is a really cool project, and you guys are doing an outstanding job with it - keep it up!

Have any of the other deserializers been ported to V2 yet (like DXF or JSON)? Maybe I can use a different format in the meantime.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Convert SVG to G-code: The Best Options of 2022
Option #1: SVG 2 STL · Select the SVG you want from your PC. · Click “Upload”. · Choose how many mm (between...
Read more >
Command Line Usage - Slic3r Manual
Slic3r can be used as a command line tool. It provides you with great flexibility so that you can perform operations in batch...
Read more >
Working with SVGs in React Native - OpenReplay Blog
Luckily, an open-source tool called SVGR Playground lets you generate a React Native component from an SVG. SVGR Playground. It lets you paste ......
Read more >
Styling And Animating SVGs With CSS - Smashing Magazine
CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In...
Read more >
Make Awesome SVG Animations with CSS // 7 ... - YouTube
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found