DEV Community

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

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

franksandqvist profile image Frank Sandqvist ・3 min read

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.

image

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}`)
})
Enter fullscreen mode Exit fullscreen mode

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

image

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}`)
})
Enter fullscreen mode Exit fullscreen mode

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.

image

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

image

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)
})
Enter fullscreen mode Exit fullscreen mode

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!

image

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/@smidyo/vectorexpress-nodejs

Discussion (0)

pic
Editor guide