Free SVG to PNG Converter

# What is SVG and why convert it to PNG?

Scalable Vector Graphics, or SVG, is an open vector graphics format developed by the W3C. SVG uses a descriptive language to encode a picture in terms of coordinates and drawing commands. Because individual pixel data is not stored, SVGs can be scaled up or down indefinitely without getting blurry or losing details.

All modern browsers and plenty of other software supports loading and displaying SVGs natively. Regardless, PNG format may be preferred in some situations, such as:

• Pixel-perfect iconography. Without knowing anything about the target display hardware, SVGs can sometimes look blurry in scenarios like UI icons. This is typically due to SVG geometry crossing pixel boundaries, causing unwanted anti-aliasing. With PNG, you are guaranteed that the pixels in your image file will be aligned exactly to pixel boundaries, resulting in crisp appearance no matter the display.
• Performance-sensitive environments. Blitting pixel data to a screen is one of the fastest graphics operations that hardware/software can perform. In contrast, drawing SVG requires a full rasterization pipeline. In some cases, including game development, rasterization of SVGs might result in unacceptable performance loss. Encoding those SVG assets to PNG for production is one way of addressing the performance issue.
• File size. Sometimes, an SVG image can actually have a larger filesize than the equivalent PNG. If you have an application involving a large number of images, it's worth examining whether the image bundle would be smaller if PNGs were used instead.

# When should you choose PNG over SVG?

Choose PNG over SVG when one or more of the following is important or required for your case:

• Predictable file appearance. PNGs have no issue displaying text with custom fonts, or shapes with blurs, effects, etc. SVGs may appear differently on different systems.
• Compatibility guarantees, where the destination environment may not support rendering SVG inputs.
• Exact pixel control. PNGs have every pixel defined, so crisp, thin lines can be easier to achieve than SVG.

# Understanding DPI and scale when converting to PNG

DPI is a frequently misunderstood measurement of resolution of a raster image file like PNG. It simply means "dots per inch" (sometimes denoted PPI or pixels per inch), which gives an indication of the physical size the PNG is intended to appear as. Historically, DPI requirements for images were common because lots of media was destined for printing to physical form. Today, most of that media stays in the digital world, making exact DPI less important, as your viewers' screens will have a wide variety of pixel densities.

Instead, Apple popularized a convention of 1x, 2x, 3x, etc, "resolution-aware" copies of image assets at different scale factors. A PNG file with base resolution 200x100 would be 200x100 pixels @1x scale, 400x200 pixels @2x scale, and so on. When a resolution-aware image is displayed, the displaying system will choose the @-multiple to be as close to the device pixel ratio as possible. Other systems have since adopted this convention, making it a popular choice for image asset organization.

One frequently repeated, but ultimately incorrect, piece of advice is that "DPI specification does not matter for digital display." In a somewhat amusing twist of history, Apple software such as Preview or Keynote still today has special behavior when an image has metadata specifying the "magic" value of 144 DPI ¹. Images tagged with 144 DPI in their metadata will be displayed by these applications as if they were @2x images. In practical terms, this means that a 100x100 PNG with unspecified DPI will be upscaled by 2x on Apple Retina displays, resulting in blurry appearance. The same PNG with 144 DPI specified will not be upscaled, resulting in a physically smaller but much sharper appearance. The same PNG again exported at 200x200 pixels with 144 DPI specified will appear at the same size as the original 100x100 no-DPI image, but as sharp as the smaller size 100x100 144-DPI image.

¹In writing this article, we were unable to find an authoritative source or specification of this behavior. If you're aware of one, please let us know!