Handwriting SVG Generator

Generate production-ready SVG files optimized for handwriting machines and plotters. This package converts text into single-stroke SVG paths with locked-in settings for consistent 5x7 card printing.

🚀 Features

• Single-stroke SVG generation - Optimized for pen plotters and handwriting machines
• Automatic text scriptalization - Converts regular text to handwritten-style characters via web service
• Locked-in settings - Pre-configured dimensions and offsets for reliable 5x7 card printing
• Two main functions - Generate cards (letters) and envelopes with proper addressing
• Special character handling - Automatic dot placement for letter "i" variants
• Line wrapping - Intelligent text fitting within specified dimensions

📦 Installation

npm install handwriting-svg-generator

🎯 Quick Start

const { generateCardSvg, generateEnvelopeSvg } = require('handwriting-svg-generator');

// Generate a handwritten letter/card
async function createLetter() {
  const letterText = `Dear Friend,

I hope this letter finds you well. 
I wanted to reach out and share some exciting news with you.

Best regards,
Mark`;

  const cardSvg = await generateCardSvg(letterText);
  // Save cardSvg to file or send to plotter
}

// Generate a handwritten envelope
async function createEnvelope() {
  const recipientAddress = [
    "John Smith",
    "123 Main Street",
    "Anytown, CA 90210"
  ];
  
  const senderAddress = [
    "Mark Rieth", 
    "312 W. 2nd St. #2923",
    "Casper, WY 82601"
  ];

  const envelopeSvg = await generateEnvelopeSvg(recipientAddress, senderAddress);
  // Save envelopeSvg to file or send to plotter
}

📖 API Reference

generateCardSvg(text: string): Promise<string>

Generates an SVG for a handwritten card/letter with automatic scriptalization.

Parameters:

• text (string) - The text content for the card. Supports newlines (\n) for line breaks.

Returns:

• Promise<string> - Complete SVG markup ready for plotting

Example:

const cardSvg = await generateCardSvg("Hello World!\n\nHow are you today?");
console.log(cardSvg); // <svg xmlns="http://www.w3.org/2000/svg"...

generateEnvelopeSvg(recipientAddress: string[], senderAddress: string[]): Promise<string>

Generates an SVG for a handwritten envelope with proper address positioning.

Parameters:

• recipientAddress (string[]) - Array of address lines for the recipient (center-positioned)
• senderAddress (string[]) - Array of address lines for the sender (top-left positioned)

Returns:

• Promise<string> - Complete SVG markup ready for plotting

Example:

const envelopeSvg = await generateEnvelopeSvg(
  ["Jane Doe", "456 Oak Avenue", "Springfield, IL 62701"],
  ["John Smith", "123 Main St", "Anytown, CA 90210"]
);

⚙️ Technical Specifications

Locked-in Settings (Optimized for 5x7 Cards)

| Setting | Value | Purpose | |---------|-------|---------| | Card Dimensions | 653×473 points | Scaled 25% larger for printer compensation | | Envelope Dimensions | 653×473 points | Scaled 25% larger for printer compensation | | Card Font Size | 35pt | Optimized for readability on 5x7 cards | | Envelope Font Size | 38pt | Slightly larger for address visibility | | X Offset | 36pt (0.5 inches) | Left margin for printer alignment | | Y Offset | 18pt (0.25 inches) | Top margin for consistent positioning | | Line Spacing | 1.2x (cards), 1.0x (envelopes) | Optimized spacing for readability |

Font and Rendering

• Font: PremiumUltra80SL.ttf (included with package)
• Scriptalization: Automatic conversion via Scriptalizer web service
• Path Type: Single-stroke SVG paths (no filled shapes)
• Special Handling: Automatic dot placement for letter "i" variants

🎨 Output Examples

Card SVG Structure

<svg xmlns="http://www.w3.org/2000/svg" width="653" height="473">
  <g transform="translate(0, 0)">
    <path d="M36.00 54.00 L36.50 54.20..." fill="none" stroke="black" />
    <path d="M42.30 54.00 L42.80 54.20..." fill="none" stroke="black" />
    <!-- Additional path elements for each character -->
  </g>
</svg>

Envelope Address Positioning

• Sender Address: Top-left corner (20pt + X offset from edges)
• Recipient Address: Centered horizontally and vertically
• Consistent Spacing: Each line spaced by font size × line spacing

🔧 Usage Patterns

Basic Letter Generation

const { generateCardSvg } = require('handwriting-svg-generator');

async function generatePersonalNote() {
  const message = `Dear Sarah,

Thank you so much for the wonderful dinner last night. 
The conversation was delightful and the food was incredible.

I look forward to our next get-together.

Warm regards,
Michael`;

  const svg = await generateCardSvg(message);
  
  // Save to file
  const fs = require('fs');
  fs.writeFileSync('personal-note.svg', svg);
}

Batch Envelope Generation

const { generateEnvelopeSvg } = require('handwriting-svg-generator');

async function generateEnvelopes() {
  const contacts = [
    { name: "Alice Johnson", address: ["123 Pine St", "Boston, MA 02101"] },
    { name: "Bob Wilson", address: ["456 Oak Ave", "Seattle, WA 98101"] },
    { name: "Carol Brown", address: ["789 Elm Blvd", "Austin, TX 73301"] }
  ];
  
  const sender = ["Your Name", "123 Your Street", "Your City, ST 12345"];
  
  for (const [index, contact] of contacts.entries()) {
    const recipient = [contact.name, ...contact.address];
    const envelopeSvg = await generateEnvelopeSvg(recipient, sender);
    
    const fs = require('fs');
    fs.writeFileSync(`envelope-${index + 1}.svg`, envelopeSvg);
  }
}

Integration with Plotter APIs

const { generateCardSvg } = require('handwriting-svg-generator');

async function sendToPlotter(plotterAPI) {
  const cardText = "Happy Birthday!\n\nHope your day is wonderful!";
  const svg = await generateCardSvg(cardText);
  
  // Send to plotter with specific settings
  await plotterAPI.plot({
    svg: svg,
    xPadding: 1, // inch
    yPadding: 0.5, // inch
    scale: 1,
    rotation: 0
  });
}

🧪 Testing

Run the comprehensive test suite:

npm test

Tests include:

• ✅ Scriptalizer functionality
• ✅ Card SVG generation
• ✅ Envelope SVG generation
• ✅ Edge cases and error handling
• ✅ SVG structure validation
• ✅ Dimension verification

🔍 Troubleshooting

Common Issues

Issue: "Scriptalizer timeout" or puppeteer errors

Solution: Ensure you have a stable internet connection. 
The scriptalization requires access to scriptalizer.co.uk

Issue: Generated SVG appears too large/small on plotter

Solution: The package uses locked-in scaling (25% larger than A7). 
This compensates for printer scaling. Use scale: 1 in your plotter API.

Issue: Text wrapping incorrectly

Solution: The package automatically wraps text based on character width. 
If you need different wrapping, consider pre-formatting your text with \n breaks.

Issue: Special characters not rendering

Solution: The package handles most text automatically via scriptalization. 
Very special characters may need to be avoided or pre-converted.

Debug Mode

For debugging, you can import the scriptalizer directly:

const { scriptalizeText } = require('handwriting-svg-generator/dist/scriptalizer');

async function debugScriptalization() {
  const original = "Hello World";
  const scriptalized = await scriptalizeText(original, 35);
  console.log(`"${original}" → "${scriptalized}"`);
}

📋 Requirements

• Node.js: 14.0 or higher
• Internet Access: Required for scriptalization web service
• Memory: ~50MB for Puppeteer browser instance

🤝 Contributing

This package uses locked-in settings optimized for specific printing requirements.

If you need different settings, consider:

1. Forking the package for your specific use case
2. Creating wrapper functions that modify the output
3. Using the source functions as reference for your own implementation

📄 License

ISC

🏷️ Keywords

svg handwriting plotter 5x7 cards scriptalization single-stroke pen-plotter cnc drawing-machine

Note: This package was designed for specific printing requirements with carefully tuned parameters. The locked-in settings ensure consistent results for 5x7 card production. For other use cases, you may need to modify the source code or use different packages.