Muhaymin Bin Mehmood

Posted on Aug 27

SVG to PNG in the Browser: Rasterization, Transparency, Fonts, and a Production-Safe JavaScript Pipeline

#javascript #svg #webdev #frontend

An SVG can look perfect in a browser and still fail the moment you need to upload it somewhere that only accepts PNG.

That sounds like a simple format conversion problem.

It isn't.

When you convert JPEG to WebP, you are mostly changing how a raster image is encoded. When you convert SVG to PNG, the browser has to do something more fundamental:

turn vector instructions into pixels.

That means deciding how large the pixel grid should be, resolving SVG dimensions, loading fonts, rendering shapes, preserving transparency, and only then encoding the final result as PNG.

In this article, I'll build that pipeline in JavaScript and focus on the parts that usually break in real applications.

SVG and PNG represent images differently

An SVG is not a grid of pixels.

It can describe:

paths
lines
text
gradients
masks
filters
transforms
embedded assets

A PNG, on the other hand, stores a fixed raster.

So before converting an SVG, you have to answer an important question:

At what resolution should this vector be rendered?

For example, this SVG:

<svg viewBox="0 0 512 512">
  ...
</svg>

does not necessarily mean the output PNG must be exactly 512 × 512.

You could render it as:

512 × 512
1024 × 1024
2048 × 2048

and the vector geometry would still be sharp before rasterization.

Once you create the PNG, however, the result is locked to the chosen pixel dimensions.

The browser pipeline

A simple client-side SVG → PNG pipeline looks like this:

SVG file
   ↓
Read SVG
   ↓
Resolve width / height / viewBox
   ↓
Decode SVG as an image
   ↓
Draw it onto Canvas
   ↓
Encode Canvas as PNG
   ↓
Create Blob URL
   ↓
Download

The two browser APIs doing most of the work are:

CanvasRenderingContext2D.drawImage()
HTMLCanvasElement.toBlob()

MDN documents both APIs in detail:

Let's build it.

Step 1: Read and validate the SVG

We'll start with a File.

async function svgToPng(file, scale = 2) {
  if (!(file instanceof File)) {
    throw new TypeError("Expected a File");
  }

  if (file.type !== "image/svg+xml") {
    throw new TypeError("Expected an SVG file");
  }

  const svgText = await file.text();

  // More work coming...
}

The MIME-type check is useful, but do not treat it as a security boundary by itself.

If your application accepts untrusted files, validate input more carefully.

Step 2: Resolve the SVG dimensions

SVGs can define their size in several ways.

You may see:

<svg width="800" height="600">

or:

<svg viewBox="0 0 800 600">

or both.

A robust converter should not assume width and height always exist.

const doc = new DOMParser().parseFromString(
  svgText,
  "image/svg+xml"
);

const svg = doc.documentElement;

const widthAttr = Number.parseFloat(
  svg.getAttribute("width") ?? ""
);

const heightAttr = Number.parseFloat(
  svg.getAttribute("height") ?? ""
);

const viewBox = (svg.getAttribute("viewBox") ?? "")
  .trim()
  .split(/\s+/)
  .map(Number);

const hasValidViewBox =
  viewBox.length === 4 &&
  viewBox.every(Number.isFinite);

const viewBoxWidth = hasValidViewBox
  ? viewBox[2]
  : NaN;

const viewBoxHeight = hasValidViewBox
  ? viewBox[3]
  : NaN;

const width = Number.isFinite(widthAttr)
  ? widthAttr
  : viewBoxWidth;

const height = Number.isFinite(heightAttr)
  ? heightAttr
  : viewBoxHeight;

if (!Number.isFinite(width) || !Number.isFinite(height)) {
  throw new Error(
    "SVG needs usable width/height or a viewBox"
  );
}

This is already better than the classic:

canvas.width = img.width;
canvas.height = img.height;

because many real SVG assets depend on viewBox.

Step 3: Create a Blob URL

We can turn the SVG text into a temporary browser URL.

const objectUrl = URL.createObjectURL(
  new Blob([svgText], {
    type: "image/svg+xml"
  })
);

Then load it into an Image.

const image = await new Promise(
  (resolve, reject) => {
    const img = new Image();

    img.onload = () => resolve(img);

    img.onerror = () => {
      reject(
        new Error("Could not decode the SVG")
      );
    };

    img.src = objectUrl;
  }
);

Do not draw before the image has loaded.

That sounds obvious, but race conditions here are one of the easiest ways to get blank PNGs.

Step 4: Wait for fonts

Text inside an SVG can depend on fonts that are not ready yet.

If the SVG relies on a custom font and you rasterize too early, the browser can render a fallback font instead.

For document-level fonts, you can wait for:

await document.fonts?.ready;

The browser's CSS Font Loading API gives you more control when font timing matters.

This becomes especially important for:

logos with text
certificates
social graphics
branded SVG exports
dynamically generated charts

Step 5: Create the raster canvas

Now we choose the actual PNG resolution.

const canvas = document.createElement(
  "canvas"
);

canvas.width = Math.round(width * scale);
canvas.height = Math.round(height * scale);

const ctx = canvas.getContext("2d");

if (!ctx) {
  throw new Error(
    "2D canvas is unavailable"
  );
}

If scale = 2, a 512 × 512 SVG becomes a 1024 × 1024 PNG.

Important distinction:

we are not upscaling an existing bitmap.

We are rasterizing vector geometry directly onto a larger pixel grid.

That is why a larger render can still look sharp.

Step 6: Preserve transparency

A new canvas is transparent by default.

So if your SVG has transparent regions and you want them preserved in the PNG, simply do not paint a background first.

ctx.drawImage(
  image,
  0,
  0,
  canvas.width,
  canvas.height
);

If you need a white background instead:

ctx.fillStyle = "#ffffff";

ctx.fillRect(
  0,
  0,
  canvas.width,
  canvas.height
);

ctx.drawImage(
  image,
  0,
  0,
  canvas.width,
  canvas.height
);

The difference matters for:

logos
icons
UI assets
product overlays
stickers
presentation graphics

Step 7: Encode Canvas as PNG

Use toBlob() rather than building a huge base64 data URL.

const pngBlob = await new Promise(
  (resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        if (!blob) {
          reject(
            new Error("PNG encoding failed")
          );

          return;
        }

        resolve(blob);
      },
      "image/png"
    );
  }
);

Then return it:

return pngBlob;

Complete converter

Here's the full version:

async function svgToPng(
  file,
  scale = 2
) {
  if (
    !(file instanceof File) ||
    file.type !== "image/svg+xml"
  ) {
    throw new TypeError(
      "Expected an SVG file"
    );
  }

  const svgText = await file.text();

  const doc = new DOMParser()
    .parseFromString(
      svgText,
      "image/svg+xml"
    );

  const svg = doc.documentElement;

  const widthAttr =
    Number.parseFloat(
      svg.getAttribute("width") ?? ""
    );

  const heightAttr =
    Number.parseFloat(
      svg.getAttribute("height") ?? ""
    );

  const viewBox =
    (svg.getAttribute("viewBox") ?? "")
      .trim()
      .split(/\s+/)
      .map(Number);

  const validViewBox =
    viewBox.length === 4 &&
    viewBox.every(Number.isFinite);

  const width =
    Number.isFinite(widthAttr)
      ? widthAttr
      : validViewBox
        ? viewBox[2]
        : NaN;

  const height =
    Number.isFinite(heightAttr)
      ? heightAttr
      : validViewBox
        ? viewBox[3]
        : NaN;

  if (
    !Number.isFinite(width) ||
    !Number.isFinite(height)
  ) {
    throw new Error(
      "SVG needs usable dimensions"
    );
  }

  const objectUrl =
    URL.createObjectURL(
      new Blob(
        [svgText],
        { type: "image/svg+xml" }
      )
    );

  try {
    const image =
      await new Promise(
        (resolve, reject) => {
          const img = new Image();

          img.onload = () =>
            resolve(img);

          img.onerror = () =>
            reject(
              new Error(
                "Could not decode SVG"
              )
            );

          img.src = objectUrl;
        }
      );

    await document.fonts?.ready;

    const canvas =
      document.createElement(
        "canvas"
      );

    canvas.width =
      Math.round(width * scale);

    canvas.height =
      Math.round(height * scale);

    const ctx =
      canvas.getContext("2d");

    if (!ctx) {
      throw new Error(
        "2D canvas unavailable"
      );
    }

    ctx.drawImage(
      image,
      0,
      0,
      canvas.width,
      canvas.height
    );

    return await new Promise(
      (resolve, reject) => {
        canvas.toBlob(
          (blob) => {
            blob
              ? resolve(blob)
              : reject(
                  new Error(
                    "PNG encoding failed"
                  )
                );
          },
          "image/png"
        );
      }
    );
  } finally {
    URL.revokeObjectURL(
      objectUrl
    );
  }
}

Downloading the result

const pngBlob =
  await svgToPng(
    fileInput.files[0],
    2
  );

const downloadUrl =
  URL.createObjectURL(pngBlob);

const link =
  document.createElement("a");

link.href = downloadUrl;
link.download = "converted.png";
link.click();

URL.revokeObjectURL(
  downloadUrl
);

Production problem #1: remote assets and CORS

A self-contained local SVG is the easiest case.

The situation becomes more complicated if the SVG references resources hosted on another origin.

For example:

<image
  href="https://example.com/photo.jpg"
/>

The browser may allow the asset to render visually but prevent you from exporting the resulting canvas.

That is the infamous tainted canvas problem.

Once unauthorized cross-origin content reaches a Canvas, APIs such as toBlob() and toDataURL() can fail for security reasons.

MDN covers this under cross-origin images and Canvas.

Production problem #2: huge output dimensions

Suppose the input SVG describes:

4000 × 4000

and the user asks for 4×.

That would create:

16000 × 16000

which is:

256,000,000 pixels

Before encoding, Canvas may require a large amount of memory for that surface.

So production tools should enforce sensible limits.

A simple check:

const outputWidth = width * scale;
const outputHeight = height * scale;

const pixelCount =
  outputWidth * outputHeight;

const MAX_PIXELS = 80_000_000;

if (pixelCount > MAX_PIXELS) {
  throw new Error(
    "Requested output is too large"
  );
}

The exact limit should depend on your application and target browsers.

Production problem #3: dimensions are product decisions

A converter needs more than technically correct rendering.

It also needs a policy.

For example:

preserve original dimensions
use viewBox dimensions
render at 1× / 2× / 4×
let the user define width
maintain aspect ratio automatically
reject absurdly large targets

These choices determine whether the result is useful.

The conversion code is often the easy part.

The product behavior around it is the difficult part.

Why I prefer browser-side conversion for local SVGs

For a self-contained SVG, there is often no reason to upload the file to a server just to rasterize it.

A browser already has:

an SVG renderer
Canvas
Blob APIs
file access
download APIs

Keeping the operation local gives you an attractive architecture:

User file
   ↓
Browser memory
   ↓
Canvas
   ↓
PNG Blob
   ↓
User download

No temporary server upload is required.

That is particularly useful for:

internal company graphics
unpublished logos
client assets
product mockups
design-system icons

Build it or use a tool?

If SVG rasterization is part of your product, owning this pipeline makes sense.

You may need:

custom sizing
worker-based rendering
queue management
asset validation
custom fonts
telemetry
batch handling

But if you simply need to convert an SVG into PNG, maintaining a conversion pipeline is unnecessary work.

I added a dedicated browser-side SVG → PNG workflow to BatchSet for exactly that kind of task.

Need the PNG without maintaining rasterization code?

Try BatchSet's SVG → PNG converter

It is designed for the direct job: drop in an SVG, rasterize it to PNG in the browser, preserve transparency, and download the result without creating an account.

Final takeaway

SVG → PNG is not just "change the extension."

The browser has to:

understand the SVG
resolve dimensions
load dependencies
choose a pixel grid
rasterize the vector
encode the result

Once you understand that pipeline, bugs involving blurry output, missing fonts, blank canvases, lost transparency, and CORS become much easier to reason about.

And if you only need the finished PNG, the best code may be the code you do not have to maintain.