text-to-svg-path

A lightweight TypeScript utility to convert text to SVG paths using any font URL. It directly fetches fonts from URLs without saving them locally.

Features

- Minimal: Focused on one task - converting text to SVG paths
- No Local Storage: Fetches fonts directly from URLs
- TypeScript: Fully typed for improved developer experience
- Customizable: Control font size, color, stroke, and more
- Path Data: Access both the complete SVG and the raw path data
- Multi-Text Support: Generate multiple text paths in a single call
- Performance Optimized: Request only the output formats you need
- Customizable Background: Control background dimensions and text positioning

Installation

``bash
npm install @takaivasoft/text-to-svg-path
`

Usage

$3

`typescript
import { textToSvgPath } from 'text-to-svg-path';

// URL to a TTF or OTF font file
const fontUrl = 'https://raw.githubusercontent.com/google/fonts/main/ofl/chakrapetch/ChakraPetch-Regular.ttf';

// Generate the SVG
const svgResult = await textToSvgPath({
text: 'Hello World',
fontUrl: fontUrl,
fontSize: 72,
fill: '#3366CC'
});

// Use the SVG string
console.log(svgResult.svg);

// Or access the raw path data
console.log(svgResult.pathData);

// Or get the complete path element with attributes
console.log(svgResult.pathElement);
`

$3

`typescript
const result = await textToSvgPath({
text: 'takaiva',
fontUrl: 'https://raw.githubusercontent.com/google/fonts/main/ofl/chakrapetch/ChakraPetch-Regular.ttf',
fontSize: 60,
fill: '#FFFFFF', // White text
background: '#333333', // Specify background color
backgroundWidth: 600, // Custom background width
backgroundHeight: 300, // Custom background height
backgroundX: 150, // Position text horizontally
backgroundY: 170 // Position text vertically
});

// Get the SVG with background
console.log(result.svgWithBackground);
`

$3

Only generate the output formats you need:

`typescript
// Only generate path data and path element (no SVG)
const pathsOnly = await textToSvgPath({
text: 'Paths Only',
fontUrl: fontUrl,
fontSize: 60,
fill: '#333333',
outputFormats: ['pathData', 'pathElement']
});

// Only generate SVG with background
const backgroundOnly = await textToSvgPath({
text: 'Background Only',
fontUrl: fontUrl,
fontSize: 60,
fill: '#FFFFFF',
background: '#000000',
outputFormats: ['svgWithBackground']
});
`

$3

Generate multiple text paths in a single call:

`typescript
const multiTextResult = await textToSvgPath({
mainTitle: {
text: 'Main Title',
fontUrl: 'https://raw.githubusercontent.com/googlefonts/roboto/main/src/hinted/Roboto-Regular.ttf',
fontSize: 80,
fill: '#2C3E50'
},
subtitle: {
text: 'Subtitle text',
fontUrl: 'https://raw.githubusercontent.com/googlefonts/roboto/main/src/hinted/Roboto-Regular.ttf',
fontSize: 40,
fill: '#7F8C8D'
},
logo: {
text: 'LOGO',
fontUrl: 'https://raw.githubusercontent.com/google/fonts/main/ofl/chakrapetch/ChakraPetch-Regular.ttf',
fontSize: 60,
fill: '#E74C3C',
background: '#333333'
}
});

// Access each result
console.log(multiTextResult.mainTitle.svg);
console.log(multiTextResult.subtitle.svg);
console.log(multiTextResult.logo.svgWithBackground);
`

$3

`typescript
// Custom SVG combining multiple path elements
const customSvg = xmlns="http://www.w3.org/2000/svg"
width="800"
height="400"
viewBox="0 0 800 400">


${multiTextResult.mainTitle.pathElement}


${multiTextResult.subtitle.pathElement}


${multiTextResult.logo.pathElement}

;

// Insert into HTML
document.getElementById('custom-svg-container').innerHTML = customSvg;
`

$3

`typescript
const svgResult = await textToSvgPath({
text: 'Logo Text',
fontUrl: '...',
fill: '#FFFFFF'
});

// Insert directly into HTML
document.getElementById('logo-container').innerHTML = svgResult.svg;

// Or in React (with appropriate type assertions)
return