Last updated
Converting SVG to JPG
SVG is a vector format; JPG is a raster format. Converting SVG to JPG rasterizes the vector graphics at a specific resolution. The quality of the output depends on the resolution you choose — higher resolution means larger file size but sharper output. JPG does not support transparency, so any transparent areas in the SVG will be filled with a background color (typically white).
Browser-Based Conversion
JavaScript
async function svgToJpg(svgString, width = 800, quality = 0.92) {
// Calculate height from viewBox
const parser = new DOMParser();
const doc = parser.parseFromString(svgString, 'image/svg+xml');
const svg = doc.documentElement;
const vb = svg.getAttribute('viewBox')?.split(' ').map(Number);
const aspect = vb ? vb[3] / vb[2] : 1;
const height = Math.round(width * aspect);
// Render to canvas via Image
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.src = url;
await new Promise(r => img.onload = r);
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ffffff'; // white background (no transparency in JPG)
ctx.fillRect(0, 0, width, height);
ctx.drawImage(img, 0, 0, width, height);
URL.revokeObjectURL(url);
return new Promise(r => canvas.toBlob(r, 'image/jpeg', quality));
}Resolution Guidelines
| Use Case | Recommended Width |
|---|---|
| Web thumbnail | 300–600px |
| Web full-size | 1200–1920px |
| Print (A4 at 150 DPI) | 1240px |
| Print (A4 at 300 DPI) | 2480px |
| Social media | 1200×630px |