Raster images store pixels; vector graphics describe shapes. Use raster images for photographs and detailed pixel artwork. Use vector geometry for a logo, icon or diagram that needs to scale or be edited as shapes.
That distinction helps answer a practical question: should you keep the image you already have, export another version, or reconstruct it through vectorization? A PNG can be the correct final file. An SVG can contain a bitmap. And a smooth vector trace can still reproduce the wrong shape.
This guide compares the two representations with actual downloadable files, a small SVG you can read and a few sizing calculations. If you already know you want to trace a logo, open the logo converter or follow the step-by-step logo workflow.
Raster vs vector at a glance
| Question | Raster image | Vector geometry |
|---|---|---|
| What describes the picture? | A grid of colored pixels | Shapes, coordinates, curves, fills and strokes |
| What happens when you enlarge it? | The renderer spreads or interpolates existing samples | The renderer draws the geometry at the new size |
| What do you edit? | Pixel colors and selections | Objects, nodes, curves and their styling |
| Typical jobs | Photography, screenshots, textures, pixel art | Logos, icons, diagrams and flat illustrations |
| Familiar formats | PNG and JPEG | SVG; other document formats can also carry vectors |
| Does the extension prove the contents? | PNG and JPEG are raster formats | An SVG can mix geometry, text and raster images |
| Is it always smaller? | No | No; complexity and encoding matter |
The important decision is whether the image should be represented by shapes in the first place. Turning every photograph into thousands of regions may produce an interesting illustration, but it changes the image and can make the file harder to work with.
What a raster image stores
A raster image has a fixed number of pixel positions. A 128 × 128 PNG contains 16,384 positions; a 1,280 × 1,280 PNG contains 1,638,400. Compression can store those samples efficiently, but it does not turn them into editable circles or letters.
Imagine a black circle on a white background. At the circle’s boundary, some pixels may be gray to soften the transition. The file records those colors. It does not need to record that the object was originally drawn as a circle, where its mathematical center lies or which editor created it.
That is useful for photography. A picture of a leaf contains texture, lighting, surface variation and many irregular transitions. Describing those as pixels is a natural fit. A screenshot similarly records the appearance of an interface at one moment, rather than the underlying buttons and text objects.
PNG and JPEG make different storage choices. PNG supports lossless image compression and optional alpha transparency; JPEG commonly trades some image information for a smaller photographic file. These are format properties, not guarantees about how carefully a particular image was prepared. See the PNG specification and JPEG’s format overview.
A PNG exported from a damaged JPG preserves the damaged pixels. Saving that file again as PNG prevents a new lossy JPEG step, but does not undo the previous one. This matters when you are choosing a source for vectorization.
What vector geometry stores
A vector drawing describes objects. A circle can have a center, radius and fill; a path can describe a sequence of lines and curves. The renderer turns those instructions into the pixels needed by a screen or another output device.
Here is a complete educational SVG, written for this explanation rather than produced by the converter:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="35" fill="#83e3b1" />
</svg>The document describes one circle centered at coordinates 50, 50 with radius 35. It can be displayed at 100 pixels wide or 1,000 pixels wide without replacing the circle with a larger stored bitmap.
Editing r="35" to r="25" changes the shape’s radius. Changing the fill changes the circle’s color. A raster editor would instead modify the relevant pixel colors. That difference in editing is as important as the familiar zoom demonstration.
SVG is a document format, though, rather than a promise that every object is a circle or path. It can also contain text, effects and images. The W3C SVG overview describes that broader model. When someone asks for a “true vector,” clarify whether they need editable outlines, live text, no embedded bitmaps or a particular production format.
Why scaling reveals the difference
Suppose you display a 64-pixel-wide raster mark at 640 pixels. There are still only 64 original samples across the source. The renderer must decide how to fill the larger output. A nearest-neighbor enlargement makes blocks obvious; an interpolated enlargement softens the transitions. Neither operation retrieves the original designer’s curves.
A vector renderer evaluates the geometry for the requested output size. A curve is not restricted to the boundary suggested by those 64 original samples. That is why vector artwork is useful for a logo that appears in both a small navigation bar and a large presentation slide.
There are two qualifications. First, screens still display pixels. Vector graphics are rasterized for the actual display, so very small shapes still need to be designed and checked at their final size. A detailed symbol may need a simpler small-size variant even when its geometry is accurate.
Second, tracing a low-resolution raster into vectors reconstructs boundaries from limited evidence. The resulting curves can scale smoothly while retaining an incorrect notch or distorted letter. Smooth scaling describes the representation; it does not certify that the reconstruction matches the original.
If your existing SVG looks too small rather than pixelated, investigate its viewBox and internal whitespace. Enlarging the whole file may also enlarge the empty frame, leaving the logo looking oddly small in its layout.
A real pair of files: pixels in, paths out
The React sample in our public benchmark starts with a 128 × 128 PNG rendered from an official repository snapshot. Vectali receives those raster bytes and returns a new SVG. The original source SVG is retained as a reference, rather than supplied as geometry to the engine.
| Recorded React file | Representation | Size of this file |
|---|---|---|
| Input PNG | 128 × 128 raster pixels | 10,210 bytes |
| Converted SVG | Two path elements | 6,910 bytes |
Open the visual comparison and inspect the rings, enclosed gaps and central dot. Those features survive in this run, while small differences in ring thickness and curvature remain near the crossings. You are seeing actual output, including its limitations.
The numbers also illustrate why file size is a separate question. In the same recorded set, the Windows mark’s PNG is 962 bytes, while its four-path SVG is 1,493 bytes. One vector result is smaller than its raster input and another is larger. The simple statement “SVG is always smaller” fails even within this small collection.
These are raw downloadable file lengths, not compressed network-transfer sizes or performance measurements. The benchmark methodology documents the input preparation and engine snapshot. Selected examples do not establish a universal quality or size advantage.
Choose the representation for the job
For a website logo, vector geometry is useful when you control a destination that accepts SVG. It can accommodate different layout sizes without maintaining a raster export for each one. Check the actual artwork, framing and background before placing it in the header.
For a profile image or a form that explicitly asks for PNG, provide PNG. An SVG master can still be valuable: export the required raster dimensions from the approved geometry. A recipient’s upload requirements take precedence over a general preference for vectors.
For photographs, keep a raster master and choose an appropriate photographic delivery format. Vectorizing the photo is an artistic transformation. Use it when you want simplified regions or a traced illustration, rather than expecting an identical photograph with unlimited detail.
For a diagram, editable vectors often make later changes easier: a line can be moved, a shape recolored and a label corrected. Preserve the source document too. An exported SVG may flatten or reorganize the authoring application’s objects, depending on the export.
For printing, ask the printer what it needs. Vector geometry solves a scaling problem; it does not by itself specify color management, bleed, overprint, trapping or the accepted file format. A mixed print layout can legitimately contain vector logos and raster photography.
The narrower PNG vs SVG guide covers delivery choices and handoff examples. This distinction is about the model of the image, rather than a rule that every job must end with the same extension.
Pixels, PPI and print size: a calculation you can use
Pixel dimensions describe the available samples. PPI describes how densely those samples are placed at a particular physical size. If a recipient requests a raster image at a given PPI, divide the pixel width by that PPI to calculate the corresponding width in inches.
For example, at a requested 300 PPI:
- A 600-pixel-wide image corresponds to 2 inches.
- A 1,200-pixel-wide image corresponds to 4 inches.
- A 64-pixel-wide image corresponds to about 0.21 inches.
Those are arithmetic examples, not a universal print-resolution prescription. Ask the production provider for its requirement, because viewing distance, material and process differ. Changing a metadata number to 300 does not add the missing pixel detail to a 64-pixel image.
A vector shape is not limited by the same stored pixel grid, but raster effects or embedded images inside its document still have their own sampling limits. A file can therefore contain a perfectly scalable outline and a low-resolution texture at the same time.
For a small logo that needs to become a large clean mark, start by finding an approved vector original. When none exists, reconstructing the logo is a different operation from assigning a higher PPI to the same bitmap.
Is an SVG, PDF or EPS automatically vector?
An SVG may contain an <image> element that references a PNG or JPEG. The outer document can scale while the picture inside it remains a raster. Search the source or inspect the objects in a vector editor to understand what is actually drawing the visible artwork.
For instance, this line places a raster file in an SVG document:
<image href="logo.png" width="128" height="128" />That may be intentional in a mixed illustration. It is not raster-to-path conversion. A base64 data URL can embed the same PNG directly in the document; embedding changes portability, not the representation of that image.
Likewise, document formats associated with vector workflows can carry raster content. The extension helps identify the container, but the recipient’s actual requirement may concern the objects inside it. Do not approve a file for editable-outline delivery solely because its name ends in .svg or .pdf.
Our SVG inspection walkthrough provides paired examples and a checklist. It also explains why “no path elements” does not automatically mean raster: a document made of circles and rectangles can be entirely geometric.
What conversion can—and cannot—change
Raster-to-vector conversion traces visible regions into geometry. It changes how the image is represented. It can produce scalable outlines and make shape editing possible, but it must infer the boundaries from the source pixels.
It cannot reliably recover a letter opening that has disappeared, identify a missing brand accent or reproduce the original author’s layer organization. A genuine vector result can still need cleanup. Low-resolution inputs deserve a separate quality review because the source may not contain the information required by the destination.
The reverse operation, vector-to-raster export, renders the geometry into a chosen pixel grid. Pick the pixel dimensions for the final destination, keep the approved vector master and export another PNG when a different size is needed. Avoid using a small PNG export as the source for the next larger raster export.
You can also convert between two raster formats without vectorizing anything. JPG-to-PNG changes storage and format capabilities, while leaving the image pixel-based. PNG-to-SVG only becomes vectorization when the process reconstructs shapes rather than wrapping the bitmap in a new container.
Make the decision on your own file
Start with the destination: does it need a photograph, a fixed-size upload or editable shapes? Then inspect the source: are the important features visible, and do you already have an approved vector master?
Keep raster artwork when pixels are the appropriate representation. Keep vector artwork when you need geometry. For a logo handoff, retaining both an approved SVG and purpose-sized PNG exports is often the most useful arrangement.
If the only logo you have is a PNG or JPG, preview it in Vectali. Compare the trace against the smallest important feature before exporting. Free previews let you make that decision from the actual result rather than the promise of a file extension.