SVG to PNG Converter - Convert SVG to PNG/JPEG Online

// SVG to PNG conversion using Canvas API (Browser)
function svgToPng(svgString, options = {}) {
  const {
    width = null,
    height = null,
    scale = 1,
    backgroundColor = null,
    format = 'png',
    quality = 0.92,
  } = options;

  return new Promise((resolve, reject) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(svgString, 'image/svg+xml');
    const svg = doc.documentElement;

    let svgWidth = parseFloat(svg.getAttribute('width')) || 0;
    let svgHeight = parseFloat(svg.getAttribute('height')) || 0;

    if (!svgWidth || !svgHeight) {
      const viewBox = svg.getAttribute('viewBox');
      if (viewBox) {
        const [, , vbW, vbH] = viewBox.split(/[\s,]+/).map(Number);
        svgWidth = vbW;
        svgHeight = vbH;
      }
    }

    const outWidth = width || svgWidth * scale;
    const outHeight = height || svgHeight * scale;
    const canvas = document.createElement('canvas');
    canvas.width = outWidth;
    canvas.height = outHeight;
    const ctx = canvas.getContext('2d');

    if (backgroundColor) {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, outWidth, outHeight);
    }

    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const img = new Image();

    img.onload = () => {
      ctx.drawImage(img, 0, 0, outWidth, outHeight);
      URL.revokeObjectURL(url);
      canvas.toBlob(
        (resultBlob) => {
          resolve({
            blob: resultBlob,
            dataUrl: canvas.toDataURL(
              format === 'jpeg' ? 'image/jpeg' : 'image/png', quality
            ),
            width: outWidth,
            height: outHeight,
            size: resultBlob.size,
          });
        },
        format === 'jpeg' ? 'image/jpeg' : 'image/png',
        quality
      );
    };
    img.onerror = () => reject(new Error('Failed to load SVG'));
    img.src = url;
  });
}

// Usage
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3b82f6"/></svg>';
svgToPng(svg, { scale: 2 }).then(r => console.log(`${r.width}x${r.height}, ${r.size} bytes`));