How I Built a Free SVG to PNG Converter in 1 Hour

#svg #webdev #tutorial #showdev

I needed a quick way to convert SVG icons to PNG for a project. Every online converter I found required uploading files to a server — slow, privacy-invasive, and overkill for a 2KB icon.

So I built imgloft.com — a free, client-side SVG to PNG converter that works entirely in your browser. No uploads, no server, 100% private.

The Problem

Most online SVG-to-PNG tools follow the same pattern:

Upload your SVG to their server
Server runs a conversion library (ImageMagick, librsvg, etc.)
Download the result

This is fine for occasional use, but it breaks down when:

You're working with sensitive design assets
The file is large and upload takes forever
You're offline or behind a restrictive firewall
You just want to convert a tiny icon without waiting

The 1-Hour Solution

The entire converter is built with three browser APIs:

// 1. Read the SVG file
const reader = new FileReader();
reader.onload = (e) => {
  const svgText = e.target.result;

  // 2. Draw it on a canvas at the desired resolution
  const img = new Image();
  const svgBlob = new Blob([svgText], {type: 'image/svg+xml'});
  img.src = URL.createObjectURL(svgBlob);

  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // 3. Export as PNG
    canvas.toBlob((blob) => {
      const url = URL.createObjectURL(blob);
      // Trigger download
    }, 'image/png');
  };
};
reader.readAsText(file);

That's it. Three APIs, zero dependencies, zero server cost.

Why It Only Took 1 Hour

No backend. The entire tool runs in the browser using the Canvas API. No Express, no ImageMagick, no Docker container. Just a static HTML file served from Cloudflare Pages.

No auth. Users don't need accounts — they come, convert, and leave. No database, no user management, no session tokens.

No framework. Plain HTML, vanilla JavaScript, and a few lines of CSS. No React, no build step, no node_modules.

What I Learned

Client-side is underrated. The browser can do way more than we give it credit for. SVG rendering, image encoding, even basic image manipulation — all built in.

Ship the MVP. I could have spent weeks adding batch conversion, format options, color filters. Instead I shipped the core feature in an afternoon and let users tell me what they need.

Free tools attract real users. Within days of going live, Google started indexing the site. People are searching for "svg to png converter" — 40,000 times a month. The demand is real.