SVG rects to path string (srtps)

Convert SVG rects to a single path string.

Motivation

I needed to generate PDF documents for printing onto labels media. Some of the labels need barcodes, and I wanted everything to be vector, no bitmaps. I decided to use PDF Kit which can use SVG path strings to draw vector shapes. So I needed a way to generate an SVG barcode and get an SVG path string to feed to PDF Kit's .path() method.

Only one dependency: xmldom.

Install

npm install srtps

Usage

Basic

import srtps from 'srtps'

const svg = `<svg><rect width='4' height='28' x='10' y='10' /></svg>`
const path = srtps.rectsToPath(svg)

console.log(path) // M 10.000 10.000  L 14.000 10.000  L 14.000 38.000  L 10.000 38.000  Z

With Bardcode & PDFKit

import fs from 'fs'
import bardcode from 'bardcode'
import PDFKit from 'pdfkit'
import srtps from 'srtps'

const svg = bardcode.drawBarcode('svg', '12345', {})
const path = srtps.rectsToPath(svg)

const pdf = new PDFKit()
pdf.pipe(fs.createWriteStream('./barcodes.pdf'))
pdf.path(path).fill('#000')
pdf.end()

Credits

• Borrowed some maths from sstp (hat tip!)

Test uses

• Bardcode (Draw 1-D barcodes)
• PDFKit (A JavaScript PDF generation library for Node and the browser)