SVG vs PNG for logos: why an SVG can still look blurry

Use a genuine vector SVG as the source for a logo that needs several sizes, and export a PNG at the required pixel dimensions when a destination accepts only raster images. Check the SVG’s contents: a small PNG embedded inside it will become soft when enlarged, even though its filename ends in .svg.

See what the file contains

These practice files use the same teal ring and orange right arrow. The comparison shows each version at a width of 256 CSS pixels.

The vector SVG has a 256 × 256 viewport and two path elements. It has no image element. The ring’s center and the background are open.

The 64 × 64 PNG was rasterized from that vector. The SVG wrapper has a 256 × 256 viewport, but its only artwork is that same 64 × 64 PNG embedded in an image element. It has no paths. At the tested display width, the PNG and wrapper show the same enlarged, soft pixel contours; the vector’s contours remain smooth.

A larger SVG viewport does not add detail to a PNG inside it. Compare an export made directly from the vector source in the separate 256 × 256 transparent PNG.

Inspect an SVG without guessing

Make a copy of the SVG and open the copy in a plain text editor. Look at the elements that describe the artwork, rather than relying on the filename or the dimensions near the top of the file.

A viewBox describes a coordinate area; it does not, by itself, tell you whether the visible artwork is vector. Elements such as path, rect, and circle can describe shapes. An image element can embed an image, including raster content or another SVG, as MDN’s SVG image reference explains. If you see an image reference containing PNG data, that part of the artwork is still raster. An SVG may contain both shape elements and an embedded image, so one image element does not mean every part of the file is raster.

In the practice files, inspection gives a clear answer: mark-vector.svg contains two paths and no image; mark-bitmap-wrapper.svg contains one image with the small PNG embedded and no paths. For an unfamiliar logo, inspect the elements that actually make up the mark. If the only available artwork is a small embedded bitmap, changing the extension or placing it in an SVG wrapper cannot recover the original shapes. Ask the source owner for the vector original or a larger export.

Size a PNG for where it will appear

A raster image has a fixed number of source pixels. In the comparison above, the 64-pixel-wide PNG is displayed 256 CSS pixels wide. Each source pixel spans four display pixels across in this test, or 16 display pixels in area. The SVG wrapper uses that same small PNG, so its 256 × 256 viewport does not change the calculation.

For another example, suppose a logo will appear 240 CSS pixels wide on a screen with two device pixels per CSS pixel. Supplying 480 source pixels across would match that display width. If you have the vector source, export the needed raster dimensions from it instead of stretching a 64-pixel PNG.

Check both width and height when you change an export size. Doubling each dimension makes four times as many pixels; it does not guarantee a particular compressed file size. A size cap and a pixel-dimension requirement are separate constraints, so read both before exporting. For screen use, work from the displayed size and the required pixel dimensions rather than assuming a universal DPI setting.

Fit the destination without distorting the logo

Read the destination’s accepted file types, required pixel dimensions, file-size cap, and canvas shape. Those requirements determine the export you need; the source SVG remains available for another destination.

For example, if a destination asks for a 512 × 512 image, make a square 512 × 512 canvas and give the logo appropriate space within it. Do not stretch a nonsquare mark to fill the square. Use the dimensions requested by your destination; 512 × 512 is an example, not a universal requirement.

MDN’s image-format guide describes SVG as suited to scalable shape graphics and PNG as supporting transparency. Those properties can guide a choice, but the destination’s accepted types still decide what you can submit.

Trace blur to the right stage

If an SVG looks blurry, first check whether the soft part is an embedded raster image. Inspect the file and compare it with the original bitmap if you have both. Enlarging the SVG wrapper will enlarge that bitmap too.

Next, identify what you are viewing. A destination might convert an SVG into a raster preview. If the original SVG looks crisp but a destination preview looks soft, inspect the preview’s displayed size and the file the destination actually uses before changing the source artwork.

Finally, consider the logo itself at its intended display size. Very small or complex details can be hard to read even when their source is vector. Simplifying those details is an artwork decision, separate from choosing SVG or PNG.

Ask for the source that can fix the problem

If the only logo you have is the 64-pixel PNG in this download set, ask whoever owns the artwork for its original shape-based SVG or another original vector file. Include the destination’s required dimensions in the request. A useful request is: “Please send the original vector artwork and a PNG export at the upload size, with the logo’s proportions preserved.” A larger screenshot of the small PNG would still contain the same softened artwork.

When you receive the replacement, compare the mark’s shape with the existing logo before substituting it. A different drawing can be sharp while having the wrong arrow, spacing, or proportions. Keep the original source and the upload export as separate files so the next size request can start from the source.

Source note: The comparison uses original CC0 practice artwork rendered in headless Chrome with Playwright-core at 256 CSS pixels wide and a device scale factor of 1. It covers browser display and rasterization only, not an editor or upload destination. The practice-file permission text applies to these samples, not to unrelated logos.