How to convert PDF to SVG in Javascript (Tutorial)

Introduction

This tutorial explains how to convert PDF files to SVG in Javascript using the hosted BuildVu Cloud API, including examples such as:

• The IDRsolutions trial or cloud subscription service
• Your own self-hosted BuildVu microservice instance

Although the above services can be accessed using standard HTTP requests, this tutorial uses our open-source JavaScript IDRCloudClient, which offers a straightforward JavaScript wrapper for the REST API.

Why SVGs Work Better with JavaScript

SVGs are better for JavaScript developers than PDFs for display because SVG files are native to the web, scalable without loss of quality, and can be easily styled or animated with JavaScript and CSS.

Developers can embed SVG directly into HTML, customize it dynamically, and create interactive or responsive graphics, while PDFs are less flexible, mainly intended for print or document preservation and not directly manipulated in-browser.

Prerequisites

To add the client to your project, include the file idrcloudclient.js and add the following line to enable access to it:

<script src="path/to/idrcloudclient.js" type="text/javascript">

Code Example

Below is a simple code example showing how to convert PDF files to SVG. Additional configuration options and advanced features are detailed later in this guide.

var endpoint = 'https://cloud.idrsolutions.com/cloud/' + IDRCloudClient.BUILDVU;
var parameters =  { 
    //token: 'Token', //Required only when connecting to the IDRsolutions trial and cloud subscription service
    input: IDRCloudClient.UPLOAD,
    file: 'path/to/exampleFile.pdf'
}

function progressListener(e) {
    console.log(JSON.stringify(e));
}

function failureListener(e) {
    console.log(e);
    console.log('Failed!');
}

function successListener(e) {
    console.log(JSON.stringify(e));
    console.log('Download URL: ' + e.downloadUrl);
}

IDRCloudClient.convert({
    endpoint: endpoint,
    parameters: parameters,

    // The below are the available listeners
    progress: progressListener,
    success: successListener,
    failure: failureListener
});

You can find an example that uses the JavaScript client here.

Return result to a callback URL

The BuildVu Microservice accepts a callback url to send the status of a conversion on completion. Using a callback url removes the need to poll the service to determine when the conversion is complete.

The callback url can be provided to the parameters variable as shown below.

var parameters =  {
    //token: 'Token', //Required only when connecting to the IDRsolutions trial and cloud subscription service
    input: IDRCloudClient.UPLOAD,
    callbackUrl: 'http://listener.url',
    file: 'path/to/exampleFile.pdf'
}

Configuration Options

The BuildVu API accepts a stringified JSON object with key-value pair configuration options to customize your conversion. These settings should be included in the parameters array. A complete list of configuration options for converting PDF files to SVG is available here.

settings: '{"key":"value","key":"value"}'

Upload by URL

In addition to uploading a local file, you can also provide a URL for the BuildVu Microservice to download and convert. To do this, replace the input and file values in the parameters variable with the following:

input: IDRCloudClient.DOWNLOAD
url: 'http://exampleURL/exampleFile.pdf'

Using Authentication

If your deployed BuildVu Microservice requires authentication to convert PDF files to SVG, you must include a username and password with each conversion request. These credentials are passed as username and password variables to the convert method, as shown below.

username: 'username',
password: 'password',

We can help you better understand the PDF format as developers who have been working with the format for more than 2 decades!