close

DEV Community

swift king
swift king

Posted on

The SVG Rendering Bug That Cost a Client $2,000

A designer sent me a panicked Slack message. Their client's product icons had leaked onto a public PNG download site. The designer had used a free SVG-to-PNG converter to export icon sets for a developer handoff. The converter stored uploaded files on a publicly accessible CDN with predictable URLs. Nobody read the privacy policy.

I'm Jamie, a UI/UX designer. After that incident, I stopped recommending server-based converters entirely. Here's why and what I built instead.

The Server Problem Nobody Discusses

Most online SVG converters work like this: upload SVG → server renders PNG → download result. What happens to your file in between is anyone's guess. I tested six popular converters. One admitted to retaining files for 30 days. Three had privacy policies so vague I couldn't determine their retention policy. One had no privacy policy at all.

For designers, this isn't about national security. It's about client NDAs. That icon set might be for an unreleased product. That illustration might contain pre-launch branding. Uploading it to a stranger's server is a breach of trust even if nothing leaks.

Browser-Local Rendering Actually Works Now

The Canvas API has been around for over a decade. But it's only recently that browsers reliably render complex SVGs at high resolutions. The combination of DOMParsersvg2pngandbrowser-svg-to-png` means you can convert SVG to PNG entirely in the browser tab—no server involved.

The core pattern looks like this:

js
const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(svgBlob);
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth * scale;
canvas.height = img.naturalHeight * scale;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.toBlob(blob => {
// Download or preview the PNG
});
};
img.src = url;

The SVG gets parsed, drawn to the canvas at any resolution, and exported—all without a single byte leaving your machine.

What I Tell My Design Clients Now

I keep a short checklist when recommending tools:

  1. No upload — all processing happens in the browser tab
  2. Batch capable — at least 20 files at once for icon sets
  3. Format options—PNG for transparency, WebP for web, JPG for sharing
  4. Works offline — should function without internet after initial load

I built svg2png.org around these requirements—it's the converter I wished existed when I started client work. But the specific tool matters less than the principle: you don't have to trust a server with your files anymore.

Next time someone tells you "just use any SVG converter," ask them where the files go. If they can't answer, find a better tool.


Jamie Park is a UI/UX designer who builds browser-native design tools at svg2png.org

Top comments (0)