Convert SVG in HTML to PNG

The short answer

An SVG inside an HTML page is a set of drawing instructions, not pixels. A PNG is a fixed grid of pixels. Converting one to the other means rendering the SVG at a chosen pixel size and saving the result. The common routes are: let the browser render the inline SVG onto a canvas and export that canvas as PNG; save the SVG markup as a standalone file and rasterize it with a command-line or desktop tool; or capture the rendered element with a headless browser. All of them work. The quality of the PNG depends on whether the SVG still renders correctly once it is separated from the page's CSS, fonts and linked resources.

For a logo, the PNG is a delivery copy for places that cannot use vector files, such as some social platforms, email signatures, office documents and older software. Keep the SVG as the master. A PNG cannot be scaled up cleanly or edited as paths, so export it at the largest size you are likely to need and regenerate it from the SVG when requirements change.

First, identify what the page is actually showing

Pages show logo graphics in several ways. The way the logo is embedded determines which conversion method applies, and whether you are dealing with vector artwork at all.

• Inline SVG: an <svg> element written directly into the HTML. This is the case the methods below are designed for.
• SVG referenced as a file: an <img>, <object> or CSS background pointing to a .svg file. You can save that file and convert it directly, without serializing anything from the page.
• Raster image presented as a logo: a PNG, JPEG or WebP file. There is no vector artwork to convert, only a raster file to resize or re-save.
• SVG that wraps a raster: an SVG whose content is mainly an <image> element holding embedded bitmap data. It has an .svg extension but no editable vector paths. Converting it to PNG just re-rasterizes the embedded bitmap, and a larger export will not add detail.

Do not assume an .svg file contains vector paths because of its name or extension. Open the markup, or inspect it in the browser's developer tools, and look for <path>, <circle>, <polygon> and similar shape elements, as opposed to an <image> element carrying encoded image data.

Before you convert: rights and permissions

Being able to reach a logo in a page's source does not grant permission to reuse it. Permission to download a file, permission to modify its artwork, licensing for any fonts in it, and the right to use a trademark are separate questions. If the logo is not yours, check the brand owner's guidelines or press materials, or ask the owner, before producing derivative files for public use.

What to have ready

• The SVG markup itself, either copied from the page or obtained by right-clicking the element in developer tools and copying its outer HTML.
• The target pixel dimensions, or the scale factor relative to the on-screen size.
• A decision on background: transparent, or a solid color.
• Any fonts the logo text uses, if that text is live <text> rather than outlined paths.
• Any page CSS that styles the SVG, such as fills set by class names or colors inherited through currentColor.

Method 1: export from the browser with a canvas

This approach runs in the page itself, so it suits a developer tool, a download button, or a one-off export from the browser console. The steps are: clone the SVG element, serialize it to a string, load that string as an image, draw the image onto a canvas at the target size, and export the canvas as PNG. Because the browser rasterizes the SVG at the size it is drawn, scaling up at this stage keeps edges sharp. Upscaling an existing PNG would not.

async function svgElementToPng(svg, scale = 2) {
  const box = svg.getBoundingClientRect();
  const width = Math.round(box.width * scale);
  const height = Math.round(box.height * scale);

  const clone = svg.cloneNode(true);
  clone.setAttribute('width', box.width);
  clone.setAttribute('height', box.height);

  const markup = new XMLSerializer().serializeToString(clone);
  const blob = new Blob([markup], { type: 'image/svg+xml;charset=utf-8' });
  const objectUrl = URL.createObjectURL(blob);

  try {
    const img = new Image();
    img.src = objectUrl;
    await img.decode();

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    // Uncomment for a solid background instead of transparency:
    // ctx.fillStyle = '#ffffff';
    // ctx.fillRect(0, 0, width, height);
    ctx.drawImage(img, 0, 0, width, height);

    return await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
  } finally {
    URL.revokeObjectURL(objectUrl);
  }
}

To save the result, create a temporary object URL for the returned blob, assign it to an anchor element that has a download attribute, and trigger a click. Setting explicit width and height on the cloned root element matters because some browsers do not draw an SVG image that has only a viewBox. XMLSerializer writes the SVG namespace declaration that a standalone SVG document needs.

Why the canvas result can differ from what you see on the page

When an SVG is loaded as an image, it is rendered as an isolated document. The serialized SVG carries only its own content, so anything it borrowed from the surrounding page is lost unless you bring it along. Most failed conversions come from one of the following.

• Page CSS: fills, strokes or visibility set by the page's stylesheets do not apply. Copy the relevant rules into a <style> element inside the cloned SVG, or write the computed values onto the elements as attributes.
• currentColor: colors inherited from the parent HTML element fall back to the default (usually black). Set an explicit color on the cloned root, or replace currentColor with the actual value.
• Web fonts: SVG rendered as an image does not load external fonts, so live text falls back to a system font. For a logo, convert text to outlines in the source artwork, which is usually the right choice for brand marks anyway. Otherwise embed the font data inside the SVG, provided the font license allows it.
• External references: images or other resources linked by address from inside the SVG are not loaded in this image context. Embed them as data inside the SVG first.
• Cross-origin content: if anything drawn onto the canvas comes from another origin without permission, the canvas becomes tainted and the PNG export is blocked.

Method 2: save the SVG and convert it with a dedicated tool

If you do not need the conversion to happen inside a web page, the simplest route is often to save the SVG markup as its own .svg file and rasterize it outside the browser. This is easier to repeat and to script for batches. The same cautions about page CSS, inherited colors and fonts apply: the saved file must be self-contained. Before saving, inline any styles that came from the page.

# Inkscape 1.x command line
inkscape logo.svg --export-type=png --export-filename=logo.png --export-width=1024

# librsvg
rsvg-convert -w 1024 -o logo.png logo.svg

Option names differ between tool versions, so confirm them against your installed version's help output. Desktop vector editors can also open the saved file and export a PNG through their export dialog, which shows a preview of the artboard bounds and resolution before writing the file. Online converters can do the same job. They require uploading the artwork, though, which may not suit unreleased or client logos, and they face the same font and external-resource limits.

Method 3: capture the rendered element with a headless browser

When the SVG depends heavily on the page, such as styling from several stylesheets, web fonts or values set by scripts, it can be more reliable to render the full page and screenshot just the element. Browser automation libraries such as Puppeteer and Playwright can capture a single element. They can also omit the default white background to keep transparency, and raise the device scale factor to get more pixels. The output matches what the browser displays because it is the browser's own rendering in context. The trade-off is a heavier toolchain.

Choosing a method

Method | Best for | Main limitation

Browser canvas export | In-page download features and quick one-off exports | Loses page CSS, web fonts and external references unless you inline them

Standalone file plus converter | Repeatable or batch exports and design handoff | The SVG must first be made self-contained

Headless browser capture | SVGs that rely on page styles, fonts or scripts | Needs an automation setup; output depends on the page as it renders

Choosing size and background

Pick the pixel dimensions from where the PNG will be used, not from how large the logo looks on the page. On high-density screens, an image displayed at a given size needs more pixels than that size to look sharp, which is why the canvas example scales up by default. If several sizes are needed, export each one from the SVG rather than resizing one PNG. Keep the background transparent for logos that will sit on varied backgrounds. Use a solid fill only when the destination does not support or handle transparency well.

Final inspection

• Dimensions: confirm the PNG has the intended pixel width and height and the correct aspect ratio, with nothing cropped at the edges of the viewBox.
• Transparency: view the PNG on both light and dark backgrounds to check for an unwanted white box or fringing.
• Colors: compare fills and strokes against the original on the page, especially any that came from CSS or currentColor.
• Text: check that lettering matches the original typeface rather than a fallback font.
• Edges and fine detail: zoom in to confirm thin strokes and small shapes rendered cleanly at the chosen size.
• Missing parts: look for elements that disappeared because they depended on external images, masks or filters that were not carried into the standalone render.

Limits of this guide

No tool-specific test results, benchmarks or version-by-version compatibility data were available for this article. The methods above describe documented browser and tool behavior in general terms. Rendering details can vary between browsers and converter versions, so the final inspection step is the reliable check for any particular logo.