canvg

Rendering SVG to Canvas

This code sample demonstrates how to load an SVG file, render it onto a Canvas, and then save the Canvas output as a PNG file. This is useful for server-side generation of images from SVG files.

const canvg = require('canvg');
const Canvas = require('canvas');
const fs = require('fs');

const canvas = Canvas.createCanvas(800, 600);
const ctx = canvas.getContext('2d');
const svg = fs.readFileSync('path/to/your/svgfile.svg', 'utf-8');
canvg(ctx, svg);

const out = fs.createWriteStream('path/to/output.png');
const stream = canvas.createPNGStream();
stream.pipe(out);

Manipulating SVG before rendering

This example shows how to manipulate SVG data by changing its color before rendering it to a Canvas. This is useful for dynamically altering the appearance of SVGs based on runtime conditions.

const canvg = require('canvg');
const Canvas = require('canvas');
const fs = require('fs');

const canvas = Canvas.createCanvas(800, 600);
const ctx = canvas.getContext('2d');
let svg = fs.readFileSync('path/to/your/svgfile.svg', 'utf-8');

// Modify SVG data
svg = svg.replace('fill:#000000', 'fill:#123456');

// Render modified SVG to canvas
canvg(ctx, svg);