Somebody sends you the logo. It is a PNG, 400 pixels wide, with a white box around it. You need it on a banner. This is one of the small recurring tragedies of working with images, and it is entirely avoidable if everyone involved understands one distinction.
Two completely different things
A raster image is a grid of colored squares. A photograph, a screenshot, a PNG, a JPEG. It knows the color of every pixel and nothing else. Ask it to be twice as big and it has to invent the pixels in between, which is why enlarged pictures go soft.
A vector image is a set of instructions. A circle of this radius at this position, a curve through these points, filled with this color. It has no resolution at all. Ask it to be twice as big and it simply draws the same instructions at a different scale, perfectly sharp, at any size from a favicon to the side of a building.
That is the entire difference, and everything below follows from it.
What each one is for
Vector is for anything drawn: logos, icons, illustrations with flat color, diagrams, type, patterns, anything that gets printed at more than one size. SVG on the web, PDF or EPS for print.
Raster is for anything captured or continuously toned: photographs, screenshots, textures, anything painted with a brush, anything with real-world noise in it.
The mistakes go both ways. A logo stored only as PNG is the common one. The reverse happens too: someone auto-traces a photograph into a vector and gets a fifteen megabyte file made of forty thousand shapes that looks worse than the original and brings the browser to its knees.
The five things vector gives you that people forget
- Any size, forever. The obvious one. One file works for a favicon and a trade show banner.
- Tiny files for flat artwork. A logo as SVG is often a couple of kilobytes against a hundred for the PNG version, and it is sharp on every screen instead of only one.
- Editable after the fact. Colors, shapes and text stay separate objects. Recoloring a logo for a dark background is a click rather than a rebuild.
- Styleable in the browser. An inline SVG can be recolored with CSS, animated, or made to react to a theme switch. A PNG cannot.
- Real transparency, no edges. No halo, no matte color baked in, no surprise white box.
When you only have the raster version
Sometimes the original genuinely no longer exists. The agency closed, the designer left, the file is on a drive nobody can find. You have a 400 pixel PNG and a deadline.
Two honest options.
Vectorise it. Automatic tracing looks at the pixels and produces shapes. For a flat logo with clean edges and a handful of colors, modern tracing is genuinely good and will get you something usable in seconds. For anything with gradients, soft edges, texture or fine detail, it produces a mess that looks fine at thumbnail size and falls apart when you zoom.
Always compare the trace against the original at large size before you trust it. The typical failure is corners going slightly round and the counters of letters filling in.
Upscale it. Modern upscaling reconstructs plausible detail rather than just interpolating, and for photographs it is remarkable. For a logo it is the wrong tool, because plausible is not the same as correct and a logo has to be exactly right.
Rule of thumb: photograph too small, upscale. Logo too small, vectorise, then clean up the result by hand.
SVG on a website: three things worth knowing
Clean it before you upload. Files exported from design software carry an astonishing amount of junk: editor metadata, empty groups, hidden layers, absurd decimal precision. Running an SVG through an optimizer routinely halves it or better, with no visible change.
Convert text to outlines, or embed the font. An SVG that references a font renders with whatever the viewer happens to have. For a logo, outline the text. It is no longer editable as text, which is precisely why you keep the original.
SVG is code, and code can be malicious. An SVG can contain scripts. That is why WordPress does not allow SVG uploads out of the box, and it is a sensible default rather than an annoyance. If you enable them, sanitise on upload and only accept files from people you trust.
The rule that prevents all of this
Whenever a logo, an icon set or an illustration is made, ask for the vector source at the same moment. Not the export, the source. Store it somewhere findable, next to the brand colors and the fonts, and export the PNGs from it whenever you need them.
A brand kit is exactly the right home for this: the logo, the watermark, the colors and the typefaces in one place, so the version everybody uses is the current one and nobody is rebuilding a logo from a screenshot of a business card.
It takes one email at the right moment and saves an afternoon at the wrong one, which is my favorite kind of trade.
