Last updated
SVG to Raster Conversion
Converting SVG to raster formats (PNG or JPG) is necessary when you need to share images with people who don't have SVG-capable viewers, upload to platforms that don't support SVG, or use the image in contexts that require raster formats (email, some social media platforms, older software).
PNG vs JPG for SVG Exports
| Criteria | PNG | JPG |
|---|---|---|
| Transparency | Preserved | Lost (white fill) |
| Sharp edges | Perfect | Slight artifacts |
| File size (icons) | Smaller | Larger |
| File size (photos) | Larger | Smaller |
| Best for | Logos, icons, UI | Illustrations with gradients |
Batch Conversion with Node.js
JavaScript
// Using sharp (Node.js image processing library)
import sharp from 'sharp';
import { readdir, readFile } from 'fs/promises';
import path from 'path';
async function convertAllSvgs(inputDir, outputDir, format = 'png', width = 512) {
const files = (await readdir(inputDir)).filter(f => f.endsWith('.svg'));
for (const file of files) {
const svgBuffer = await readFile(path.join(inputDir, file));
const outFile = file.replace('.svg', `.${format}`);
await sharp(svgBuffer)
.resize(width)
.toFormat(format, { quality: 90 })
.toFile(path.join(outputDir, outFile));
console.log(`Converted: ${file} → ${outFile}`);
}
}
convertAllSvgs('./icons', './icons-raster', 'png', 512);