SVG to PNG Converter

Rasterizing vector markup in the browser

SVG describes shapes, paths, text, gradients, and filters as XML-based vector instructions. PNG stores a fixed grid of pixels with lossless compression and alpha transparency. Converting SVG to PNG is therefore a rendering operation: the browser lays out the vector at a chosen pixel size, paints it onto a canvas, and encodes that bitmap as PNG.

This tool accepts SVG markup, previews the raster result, and downloads converted-image.png. It offers square canvases of 128×128, 256×256, and 512×512 pixels. Changes to code or size trigger a fresh render locally in the page.

The render pipeline

The component wraps the SVG string in an image/svg+xml Blob and creates a temporary object URL. A browser Image loads that URL. On load, the tool creates a square HTML canvas, sets both dimensions to the selected size, draws the image across the entire canvas, and calls toDataURL('image/png'). The preview and download link use that PNG data URL.

This means rendering follows the current browser’s SVG and canvas engines. It is not an independent graphics library, and results can differ slightly from design applications in font metrics, filters, color management, or unsupported features.

Preparing portable SVG code

A self-contained icon is the best input:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect width="24" height="24" rx="4" fill="#0f172a"/>
  <path d="M7 12h10M12 7l5 5-5 5" fill="none" stroke="#fff" stroke-width="2"/>
</svg>

Include the SVG namespace and a valid viewBox. Explicit width and height can help establish intrinsic proportions, although the canvas draw uses the selected output dimensions. Inline essential fills, strokes, and font declarations. External stylesheets and application CSS classes are not reliably available inside the image document.

Remove scripts, unsupported foreign content, and references requiring authentication. For reproducible assets, embed needed resources or convert them to vector paths where licensing permits.

Choosing 128, 256, or 512 pixels

Select the pixel dimensions required by the destination, not merely the largest available option. A 128×128 PNG is compact for a small interface icon. A 256×256 version gives more detail for thumbnails or medium-density use. A 512×512 export provides more pixels for high-density displays or later downscaling.

Raster output cannot regain vector detail after export. Downscaling a larger clean render can sometimes improve edge appearance, but it also adds file size and an extra processing step. For pixel-snapped icons, preview the exact final size because strokes centered on fractional device pixels can look soft.

The tool always creates a square. If source proportions are not square, drawImage(img, 0, 0, size, size) stretches the source to fill both dimensions. A 2:1 banner becomes distorted. To preserve aspect ratio, first edit the SVG into a square artboard with the desired padding, or use an exporter that supports independent width and height.

Artboard, viewBox, and clipping

The viewBox determines the internal coordinate region mapped onto the viewport. If important paths lie outside it, they are clipped before rasterization. If the icon appears tiny, the viewBox probably includes excessive empty space. If edges are cut off, strokes may extend beyond the viewBox even when path coordinates are inside it.

For a square icon, establish a square viewBox such as 0 0 24 24, leave enough inset for stroke width, and use vector coordinates consistently. Avoid “fixing” clipping by changing only canvas size; more output pixels do not change the source coordinate boundary.

SVG width and height without a viewBox can produce less predictable scaling. A complete viewBox makes the intended crop and aspect ratio explicit.

Transparency and backgrounds

The canvas starts transparent. If the SVG does not paint a background, the downloaded PNG retains transparent pixels even though the preview image is displayed on a white-styled surface. To guarantee a solid background, add a rectangle as the first SVG child:

<rect width="100%" height="100%" fill="#ffffff"/>

Do not infer transparency from the visual preview alone. Open the download over a checkerboard or contrasting background. Semi-transparent edges are normal results of antialiasing and help curves blend with varied backgrounds.

CSS variables such as fill="var(--brand)" may not resolve in the isolated image context. Replace them with explicit colors before export. Similarly, currentColor needs a defined color inside the SVG rather than relying on the host page.

Exporting an application icon

Begin with a square, self-contained source and inspect it for external dependencies. Paste it, choose 512×512, and check shape, colors, transparency, and margins. Download the file, then use platform-specific tooling to generate the complete icon set. Mobile and desktop ecosystems often require several sizes, masks, safe zones, and metadata that one PNG cannot provide.

For a web thumbnail, choose the closest output size, download, and inspect its byte dimensions. Optimize the PNG afterward if transfer size matters; canvas export is lossless but not necessarily the smallest possible encoder result. Keep the SVG as the source of truth so future sizes can be rerendered cleanly.

Text and fonts

SVG text depends on font availability and loading. A browser image may fall back to another typeface if the requested web font is not embedded or ready. That changes wrapping, alignment, and glyph shape. Remote font references can also be blocked by cross-origin restrictions.

For a logo where typography must be exact, convert text to paths in the authoring application or embed an appropriately licensed font. For dynamic charts where accessible source text matters, keep a text-based SVG too; the downloaded PNG has pixels only and no selectable text or semantic labels.

External images and canvas security

An SVG can reference raster images, other SVGs, fonts, and filters. External resources may fail because the blob document has a different origin context, because credentials are unavailable, or because the server denies cross-origin use. Drawing cross-origin content can taint a canvas and prevent toDataURL, even when the image appears to load.

Prefer data URLs or embedded assets for one-off portable markup. Do not embed untrusted SVG from unknown sources casually: SVG is an active document format with a broad feature set. This converter catches only synchronous setup errors and logs them; image load failures may simply leave the previous preview or no new result rather than showing a detailed diagnostic.

Features that may render differently

Complex filters, masks, blend modes, nested clipping, CSS animations, <foreignObject>, and browser-specific text layout can vary. Animation is not exported as animation; PNG contains one static raster frame. SVG accessibility metadata, IDs, classes, links, scripts, and editability do not survive rasterization.

Color profiles and print workflows are also outside this tool. Canvas PNG output is intended for normal screen use. Professional print production may require controlled resolution, physical dimensions, bleed, and color space support from dedicated software.

Troubleshooting a missing or poor preview

If no preview appears, check XML syntax, matching tags, quoted attributes, the SVG namespace, and a sensible width/height or viewBox. Browser developer tools may reveal a load error. If the image is blank, verify that fills and strokes contrast with the background and that content lies inside the viewBox.

If output is stretched, make the SVG artboard square before using this square exporter. If it is blurry, render at the actual destination size, align small geometry to pixels, and review stroke widths. If colors are missing, replace host CSS variables and classes with inline values. If text changes, embed the font or outline glyphs. If external images vanish, make the SVG self-contained.

SVG to PNG questions

Does conversion preserve transparency?

Yes, unpainted canvas pixels remain transparent. Add a background rectangle when a solid PNG is required.

Can I set a custom width and height?

No. The available outputs are square 128, 256, or 512 pixels.

Why is my rectangular SVG distorted?

The source is drawn to fill a square canvas without aspect-ratio fitting. Add square padding in the SVG or use a dimension-aware exporter.

Are external fonts and images included?

Not reliably. Network, origin, and loading restrictions apply. Self-contained markup is the safest input.

Does the PNG remain scalable?

No. It has fixed pixels. Retain the original SVG for future sizes.

Is the downloaded file generated locally?

Yes. The browser creates a canvas data URL and the download link saves it as converted-image.png; normal browser and device security policies still apply.