DEV Community: Frank Sandqvist

Making a Canvas-based SVG designer app that exports DXF files for manufacturing

Frank Sandqvist — Wed, 04 Aug 2021 07:55:19 +0000

This is a guest post by Ibsitam Arif. Check him out!

Vector graphics have become a standard in almost every manufacturing industry. The blueprint is usually given in vector form and the machine operates accordingly. Similarly, in the printing industry, print designs are in vector form.

When we talk about the web, the most popular vector files are SVGs, and in this article, we will see how we can convert an SVG to DXF; a popular vector file for 2D and 3D models created by AutoDesk and it is popular for exporting data between different CAD programs. We have our simple frontend canvas that will allow the user to design an SVG which input will be sent to the Express.js backend where we will be making an API call to the Vector Express API. Vector Express is an excellent API for people that are looking to convert their vectors into different forms without any hassle. In this tutorial we use it to conert the resulting SVG to a DXF. So let us get started!

ibtisamarif831 / svg-to-dxf

A simple web application that takes SVG and sends request to Vector-express for conversion to DXF

svg-to-dxf

A simple web application that takes SVG and sends request to Vector-express for conversion to DXF

Project running.

run node myserver.js in terminal to start the server

View on GitHub

What we'll be building

Let's imagine that we have a CNC machine that can cut various materials. We want to build a webshop where our customers can design various shapes, and place an order. When the order has been placed, we want to automatically generate a DXF file which we can send directly to the machine for manufacturing.

Project structure

In this project, we have our client-side frontend and our backend. Let's start with the client-side first which will be served by our Express server.

Create a new folder and name it as you please. Make sure you have the following files in it.

Frontend

The HTML file looks as follows.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Canvas</title>
   <link rel="stylesheet" href="index.css">
</head>
<body>
  <canvas id="canvas" height="500" width="500" ></canvas>
  <button id='ellipse' type='submit'>Ellipse</button>
  <button id='rectangle' type='submit'>Rectangle</button>
  <button id='clear' type='submit'>Clear Canvas</button>
  <button id="order" type="button">Place Order</button>
  <h3 id="success"></h3>
</body>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js"></script>
<script src="canvas.js" type="text/javascript"></script>
</html>

Here, we have imported jQuery and fabric.js for our canvas.

Our CSS file only adds a border to canvas. I have kept things simpler but you are free to edit.

#canvas{
  border: 1px solid blue;
}

And finally, the main file, canvas.js, which handles all the logic for creating shapes on the canvas. We create a fabric canvas that takes the id of our HTML canvas. This gives us access to the functionality of the library.

var canvas = new fabric.Canvas("canvas");
var clear = document.getElementById("clear");
var rectangle = document.getElementById("rectangle");
var ellipse = document.getElementById("ellipse");
var order = document.getElementById("order");
var success = document.getElementById("success");
var isEllipse = false;
var isRectangle = false;

var circle, isDown, origX, origY;

$(rectangle).on("click", function () {
  isEllipse = false;
  isRectangle = true;
  console.log("rectangle");
});

$(ellipse).on("click", function () {
  isEllipse = true;
  isRectangle = false;
  console.log("ellipse");
});

$(clear).on("click", function () {
  var objects = canvas.getObjects();
  for (var i = 0; i < objects.length; i++) {
    canvas.remove(objects[i]);
  }
  canvas.renderAll();
});

$(order).on("click", async function () {
  let mySvg = canvas.toSVG();
  let response = await fetch("http://127.0.0.1:3000/", {
    method: "POST",
    body: mySvg,
  }).then(function (response) {
    alert("Order Placed");
  });
});

canvas.on("mouse:down", function (o) {
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;

  if (isEllipse) {
    circle = new fabric.Circle({
      left: origX,
      top: origY,
      originX: "left",
      originY: "top",
      radius: pointer.x - origX,
      angle: 0,
      fill: "",
      stroke: "red",
      strokeWidth: 3,
    });
    canvas.add(circle);
  }

  if (isRectangle) {
    rectangle = new fabric.Rect({
      left: origX,
      top: origY,
      fill: "transparent",
      stroke: "red",
      strokeWidth: 3,
    });
    canvas.add(rectangle);
  }
});

canvas.on("mouse:move", function (o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  var radius =
    Math.max(Math.abs(origY - pointer.y), Math.abs(origX - pointer.x)) / 2;
  if (isEllipse) {
    if (radius > circle.strokeWidth) {
      radius -= circle.strokeWidth / 2;
    }
    circle.set({ radius: radius });

    if (origX > pointer.x) {
      circle.set({ originX: "right" });
    } else {
      circle.set({ originX: "left" });
    }
    if (origY > pointer.y) {
      circle.set({ originY: "bottom" });
    } else {
      circle.set({ originY: "top" });
    }
    canvas.renderAll();
  }

  if (isRectangle) {
    if (origX > pointer.x) {
      rectangle.set({ left: Math.abs(pointer.x) });
    }
    if (origY > pointer.y) {
      rectangle.set({ top: Math.abs(pointer.y) });
    }

    rectangle.set({ width: Math.abs(origX - pointer.x) });
    rectangle.set({ height: Math.abs(origY - pointer.y) });
    canvas.renderAll();
  }
});

canvas.on("mouse:up", function (o) {
  isDown = false;
});

After we are done drawing on canvas, we invoke the toSVG() on the fabric canvas which returns everything on the canvas as SVG. Then this is sent to the backend where the SVG is saved.

This is what we will end up with:

Let us draw some shapes and place an "order".

After placing the order, we get an alert and our request is sent to the backend.

Backend

For the handling of SVG and DXF, we are using Express.js. Create a new folder and name it as a server. Let us install the following libraries to get started.

npm install body-parser cors express @vector-express/vectorexpress-nodejs

Let's now create server.js to house our backend code.

const express = require("express");
const app = express();
const port = 3000;
const vectorExpress = require("./node_modules/@vector-express/vectorexpress-nodejs/index");
const fs = require("fs");
var cors = require("cors");
app.use(cors());

var bodyParser = require("body-parser");

app.use( express.static( __dirname + '/client' ));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.text());
app.get('/', (req, res) => {
  res.sendFile( __dirname, +'client'+'/index.html');
})

app.post("/", function (req, res) {
  let svg = req.body;
  fs.writeFile("svgFromFrontend.svg", svg, () => {
    const file = fs.readFileSync(__dirname + "/svgFromFrontend.svg");
    vectorExpress
      .convert("svg", "dxf", {
        file,
        save: true,
        path: __dirname + "/svgFromFrontendConverted.dxf",
      })
    });
  res.send("Converted");
});

app.listen(port, () => console.log(`App listening on ${port} port!`));

Let's see how the backend works. First, after the user makes a POST request, it is saved in a new SVG file. In the frontend, we created 2 rectangles and one eclipse. The SVG for it was saved as follows in the same folder with the following content.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="500" viewBox="0 0 500 500" xml:space="preserve">
<desc>Created with Fabric.js 4.5.1</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 123.5 100.5)"  >
<rect style="stroke: rgb(255,0,0); stroke-width: 3; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-opacity: 0; fill-rule: nonzero; opacity: 1;"  x="-65" y="-48" rx="0" ry="0" width="130" height="96" />
</g>
<g transform="matrix(1 0 0 1 167.5 280.5)"  >
<circle style="stroke: rgb(255,0,0); stroke-width: 3; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;"  cx="0" cy="0" r="54" />
</g>
<g transform="matrix(1 0 0 1 164.5 410)"  >
<rect style="stroke: rgb(255,0,0); stroke-width: 3; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-opacity: 0; fill-rule: nonzero; opacity: 1;"  x="-77" y="-51.5" rx="0" ry="0" width="154" height="103" />
</g>
</svg>

Now, this is sent to the Vector Express API using its Node.js wrapper and it returns us a DXF file that is saved in the same directory.

Conclusion

With this, we have a basic SVG designer app which does DXF conversion. The manufacturer can always get the DXF file from the backend while the client can place an order for his SVG vector.

To develop this further, we should implement a database to store the orders, and a way for us to access our orders and the corresponding DXF file through a browser. We may even wish to build this on top of an existing e-commerce framework.

How to convert vector files in Node.js (SVG, PDF, DXF, EPS and more...)

Frank Sandqvist — Wed, 31 Mar 2021 20:35:20 +0000

This is a guest post by Ibsitam Arif. Check him out!

Everyone who has worked with vectors knows how often you get need to convert it into different formats. While there are a lot of tools available for the task, Vector Express stands out due to its powerful REST API that can handle a huge range of vector formats. The API comes with free and paid plans with extremely affordable rates being capable of converting, analyzing, and processing the vectors. In this article, we will be using the API with Node.js, so let’s get started!

Setting up the project

First of all, you have to make sure that Node.js is installed in your environment. With this, we initialize the project by using the following command.

npm init

We will be using Express.js as our backend and other dependencies for making the API work.

npm i express cors form-data multer axios

After these dependencies have been installed, its time to create server.js and other folders in the same directory. In the end, our folder structure will look as follows.

The output will be storing our converted result and the uploads folder will have all the images given to our Express server as an input.

Implementing the API

After the whole project has been set, we starting and running our server. Enter the following code in server.js.

const express = require('express')
const app = express()
const port = 3000
app.get("/", (req,res) => {
  res.send("Hello World")
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

This will set up a basic server with a single route. Use the following command in the terminal to start our server.

node server.js

Let us import all the other packages and implement a new route for converting a PDF file to SVG using the Vector Express API.
Our server.js file will look something like this.

const express = require('express')
const app = express()
const port = 3000

var cors = require('cors')
var axios = require('axios');
const multer = require('multer');
var fs = require('fs');
const FormData = require('form-data');
const upload = multer({ dest: "uploads/" })

app.use(cors())
app.get("/", (req, res) => {
  res.send("Hello World")
})
app.post('/convert', upload.single("file"), async(req, res) => {
  var form = new FormData()
  form.append("file", fs.createReadStream(req.file.destination + req.file.filename));
  try {
    var image= await axios.post('https://vector.express/api/v2/public/convert/pdf/pdf2svg/svg',
      form,
      { headers: { 'content-type': 'multipart/form-data' } }
    )
    var result = await axios.get(
      image.data.resultUrl,
      { responseType: "stream" }
    )
    result.data.pipe(fs.createWriteStream("./output/my.svg"))
    res.send("Done")
  } catch (error) {
    res.send(error)
  }
})
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Multer It is used for handling the multipart/form-data.
Axios For sending requests to our API.
Form-data It is required to create readable streams for our API.

In this code, we are handling the multipart data and creating a readable stream to make a POST request to our API. The Vector Express takes a PDF file as an input and outputs the URL of the converted SVG. So, in order to save the converted SVG, make a GET request to the resultURL and create a writable stream to store it on our server. Let us open Postman and send a POST request to our route.

Status code 200 means our code has successfully run! The converted svg will be in the output folder as follows.

We can also get the all available paths for converting our file. Let us create another route and use the following endpoint for making a GET request.

https://vector.express/api/v2/public/convert/pdf/auto/svg/

Add the following lines in our server.js:

app.get("/paths", async (req, res) => {
  var paths = await axios.get("https://vector.express/api/v2/public/convert/pdf/auto/svg/")
  res.send(paths.data.alternatives)
})

Now, lets headover to Postman and make a GET request to our newly created route.

Voilá, we get the all different paths that can convert our PDF to SVG!

Conclusion

Vector Express is a power API supporting a wide range of vector files. The API is easy to use and if you are planning to use it with Node.js, this guide has walked you through the required path.

There is also an NPM library available to make it even easier!
https://www.npmjs.com/package/@vector-express/vectorexpress-nodejs