Git Product home page Git Product logo

fsvgtogcode.js's Introduction

fSVGtoGcode.js

Fador's direct SVG to G-code converter

fSVGtoGcode.js is a JavaScript library that enables you to convert SVG (Scalable Vector Graphics) files into G-code, a language used to control CNC (Computer Numerical Control) machines. This library is designed to streamline the process of converting SVG drawings or designs into G-code instructions, allowing you to easily translate your vector graphics into machine-readable commands.

NOTE This library only traces the outlines, the shapes are not filled at the moment. SVG element transforms are not calculated either.

Features

  • Convert SVG files into G-code for CNC machines.
  • Lightweight and efficient, making it suitable for both small and complex SVG files.
  • Support for a wide range of common SVG elements such as polyline, polygon, circle, ellipse, line, rect
    • Path element support:
      • M/m move position: full
      • Z/z close path: full
      • L/l, H/h, V/v line/horisontal/vertical: full
      • C/c Cubic Bezier curve: Estimated with line segments
      • S/s Smooth Cubic Bezier Curve: Estimated with line segments
      • Q/c Quadratic Bezier curve: Estimated with line segments
      • T/t Smooth Quadratic Bezier curve: Not done
      • A/a Arc: Work in progress
  • Included HTML interface supports loading SVG files and visualizing the output G-code

Installation

You can include the library directly in your HTML:

<script src="path/to/fSVGtoGcode.js"></script>

Sample interface is included as index.html

Usage

  1. Import the library into your project:
<script src="fSVGtoGcode.js"></script>
  1. Load your SVG file:
const svgData = `
<svg width="100" height="100">
  <!-- SVG elements go here -->
</svg>
`;
  1. Convert the SVG to G-code:
const gcode = fSVGtoGcode(svgData);
  1. Utilize the generated G-code as needed for your CNC machine.

Example

Here's a simple example demonstrating the conversion process:

const svgData = `
<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>
`;

const gcode = fSVGtoGcode(svgData);

console.log(gcode);

Configuration

You can customize the G-code output by providing additional configuration options:

const config = {
  // Custom configuration options go here
  DEBUG: false,
  scale_x: 1.0,
  scale_y: 1.0,
  tool_down_gcode: "; Tool down\nM3",
  tool_up_gcode: "; Tool up\nM5",
  init_gcode: "G21\nG90\nG0 F1000\nG0 Z0\nG0 X0 Y0\n",
};

const gcode = fSVGtoGcode(svgData, config);

Compatibility

fSVGtoGcode.js supports a wide range of common SVG elements, making it suitable for various design types. However, due to the complexity and diversity of SVG features, some advanced or less common elements might not be fully supported. It's recommended to test your SVG files with this library to ensure compatibility.

Contributions

Contributions to fSVGtoGcode.js are welcome! If you encounter any issues or would like to contribute enhancements, please open an issue or submit a pull request on the GitHub repository.

License

This project is licensed under the MIT License.


Give life to your CNC projects by effortlessly converting SVG files into G-code with fSVGtoGcode.js. Simplify your workflow and bring your vector designs to reality on CNC machines.

fsvgtogcode.js's People

Contributors

fador avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.