logoredraws.com

How to Convert an SVG from HTML to PNG

Turn an inline SVG logo from an HTML page into a PNG: extract the markup, choose pixel dimensions, keep transparency and fonts intact, and check the result.

Published

Contents
  1. The short answer
  2. Why an inline SVG doesn't always export cleanly
  3. Step 1: Extract the SVG markup
  4. Step 2: Choose a conversion method
  5. Vector editor
  6. Command line
  7. Browser JavaScript
  8. Headless browser screenshot
  9. Step 3: Pick the right pixel size
  10. Step 4: Verify the PNG
  11. A note on permission and source quality

The short answer

An SVG embedded in HTML is markup, not a file. To get a PNG, you first isolate that markup as a standalone SVG, then rasterize it at a chosen pixel size. You can do this with a vector editor, a command-line renderer, a few lines of browser JavaScript, or a headless browser. Whichever route you take, decide the output width and height in pixels before exporting, keep the background transparent if the logo will sit on other colors, and make sure any fonts and styles the page supplied are carried into the SVG itself.

A few terms set the scope. SVG (Scalable Vector Graphics) describes shapes as paths and coordinates, so it can be redrawn sharply at any size. PNG is a raster format: a fixed grid of pixels that supports transparency but blurs or pixelates when enlarged. Rasterizing means rendering the vector drawing into that pixel grid. An inline SVG is an svg element written directly into the page's HTML, as opposed to one loaded from a separate file through an img tag or CSS.

Why an inline SVG doesn't always export cleanly

On the page, an inline logo can rely on things that live outside the svg element. Once you lift it out, those dependencies disappear, and the PNG may come out with missing colors, substituted fonts or blank areas. Check for these before converting:

  • Page CSS: fills, strokes or sizes set by classes in the site's stylesheet will not travel with the copied markup.
  • currentColor: shapes filled with currentColor inherit the surrounding text color on the page and may turn black or another default color once isolated.
  • Web fonts: live text elements depend on fonts loaded by the page. Outside it, the renderer substitutes whatever font is available.
  • Sprite references: a use element pointing to a symbol defined elsewhere in the page draws nothing when the definition is not included.
  • External images: embedded image elements that reference other files may fail to load, and in the browser canvas method they can block export entirely.
  • Missing viewBox: without a viewBox (the attribute defining the drawing's internal coordinate area), scaling to a larger PNG can crop or misplace the artwork.

The fix is to make the SVG self-contained: copy the relevant style rules into the SVG as attributes or an embedded style block, replace currentColor with the actual brand color, include any referenced symbols, and either convert text to outlines (paths) in a vector editor or embed the font. Converting text to outlines is the more reliable choice for a logo, because the letterforms then render identically everywhere.

Step 1: Extract the SVG markup

Open the page, then open the browser's developer tools and use the element inspector to select the svg element. Right-click it in the Elements (or Inspector) panel and copy its outer HTML. Paste the result into a plain-text editor and save it with an .svg extension. If the opening svg tag lacks an xmlns attribute, add the standard SVG namespace declaration; many standalone tools refuse to open the file without it.

Open the saved file directly in a browser. If it looks the same as on the page, it is self-contained. If colors, text or parts of the shape are missing, resolve the dependencies listed above before going further.

Step 2: Choose a conversion method

Method | Best for | Watch out for
Vector editor (for example Inkscape or Illustrator) | One-off exports, outlining text, checking artwork | Confirm the export area is the drawing, not a larger page
Command-line renderer (Inkscape CLI, rsvg-convert) | Repeatable exports at several sizes | Fonts must be installed on the machine doing the rendering
Browser JavaScript with canvas | Exporting from the live page without installing anything | Page styles and web fonts do not apply; external images can block export
Headless browser screenshot (for example Puppeteer) | Capturing exactly what the page renders, including page CSS | Set the device scale factor and a transparent background explicitly
DevTools node screenshot | Quick previews | Output size follows screen pixel density, and page background may be included

Vector editor

Open the saved SVG, check that the artwork is correct, and convert any live text to outlines if you can. Use the editor's PNG export, set the export area to the drawing or a selection rather than the full canvas, enter the pixel width you need, and leave the background transparent unless the PNG is meant for a specific solid color.

Command line

Command-line renderers are useful when you need the same logo at several sizes. With Inkscape 1.x and with rsvg-convert, setting only the width preserves the aspect ratio:

inkscape logo.svg --export-type=png --export-width=1024 --export-filename=logo-1024.png

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

The width shown is an example, not a requirement. Check your installed version's help output, because command options have changed between major releases of these tools.

Browser JavaScript

Run this in the developer console on the page that contains the logo. Adjust the selector to match the svg element. It serializes the element, draws it onto a canvas at a multiple of its viewBox size, and downloads the result as a PNG. A canvas starts transparent, so areas without fill stay transparent.

const svg = document.querySelector('svg.logo');
const { width, height } = svg.viewBox.baseVal;
const scale = 4;

const markup = new XMLSerializer().serializeToString(svg);
const blob = new Blob([markup], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);

const img = new Image();
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = width * scale;
  canvas.height = height * scale;
  canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
  URL.revokeObjectURL(url);

  const link = document.createElement('a');
  link.download = 'logo.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
};
img.src = url;

If the svg has no viewBox, the width and height read as zero; set them manually from the element's width and height attributes instead. Because the SVG is loaded as an image, it is rendered in isolation: the page's stylesheets and web fonts are not applied, and external resources are not fetched. If the output looks different from the page, that is the reason, and the self-contained preparation in Step 1 is the fix.

Headless browser screenshot

When the logo's appearance depends on page CSS that you cannot easily inline, capturing the rendered element is the most faithful option. In Puppeteer, after loading the page, set a device scale factor to multiply the pixel output and request a transparent background:

await page.setViewport({ width: 1200, height: 800, deviceScaleFactor: 4 });
const logo = await page.$('svg.logo');
await logo.screenshot({ path: 'logo.png', omitBackground: true });

The transparent-background option only works if neither the page nor a parent element paints a background behind the logo. If one does, the color will appear in the PNG.

Step 3: Pick the right pixel size

A PNG has no physical size of its own, only pixel dimensions. Export at the largest size the PNG will be displayed, multiplied for high-density screens if it will appear on them, rather than relying on later enlargement. A DPI or PPI value stored in a PNG does not add detail; it only tells some applications how large to place the image. If you need several sizes, export each one from the SVG instead of resizing one PNG, which keeps edges crisp.

The supplied material gives no specific dimension requirements for any platform or print process. Check the destination's own specifications for exact sizes. For print, a vector file such as SVG, PDF or EPS is normally preferable to any PNG, so treat the PNG as a delivery format for screens and for tools that cannot accept vectors.

Step 4: Verify the PNG

  • Dimensions: open the file's properties and confirm the pixel width and height match what you intended.
  • Transparency: place the PNG over a dark and a light background, or view it in an editor with a checkerboard, to confirm there is no unwanted white or colored box.
  • Edges: zoom to 100% and check curves and thin strokes for jagged or clipped edges, especially at the outer boundary of the artwork.
  • Color: compare fills against the brand values and the original page. Watch for anything that turned black, which usually points to currentColor or missing CSS.
  • Typography: compare letterforms to the original. A different weight, width or spacing means a font was substituted.
  • Cropping: confirm no part of the logo touches or is cut off at the image edge unless that is intended, and that any required clear space is present.

A note on permission and source quality

Extracting a logo from a web page shows that you can obtain the artwork, not that you may reuse it. Confirm usage rights with the logo's owner or brand guidelines. Also, an .svg extension does not prove the content is clean vector artwork: a site's SVG may contain an embedded raster image, simplified paths or web-specific optimizations. For official use, request the master logo files from the owner rather than relying on a copy taken from a page.