Vector logo
What a vector logo is, how SVG and other vector formats differ from raster files like PNG and JPG, how to check a file, and which format to use when.
Contents
A vector logo is a logo stored as mathematical shapes, such as points, lines, curves and fills, rather than as a fixed grid of colored pixels. Because the shapes are recalculated each time the file is displayed or printed, a vector logo can be scaled from a favicon to a billboard without blurring or jagged edges. SVG is the most common vector format for logos on the web. PNG, JPG and similar formats are raster files and have a fixed resolution.
Scope note: the brief does not name a specific brand or logo, and no subject-specific evidence such as file specifications, version dates or brand guidelines was supplied. This guide therefore explains the general concept and how to evaluate any logo file. It does not describe a particular company's assets.
Vector versus raster: the core difference
A raster image records a color value for every pixel in a grid of set dimensions. Enlarging it beyond that grid forces software to invent pixels, so edges soften or become blocky. A vector image records instructions instead, for example a curve between two points filled with one color. Those instructions are resolution-independent: the output is rendered sharply at whatever size the screen or printer requires.
| Aspect | Vector (SVG, AI, EPS, vector PDF) | Raster (PNG, JPG, GIF, WebP) |
| How the image is stored | Paths, shapes and fills defined mathematically | Fixed grid of colored pixels |
| Scaling | Stays sharp at any size | Loses quality when enlarged past its pixel dimensions |
| Editing shapes and colors | Individual elements can be edited | Changes are made pixel by pixel |
| Best suited to | Master logo files, print, signage, responsive web graphics | Photos, social media uploads, contexts that require a specific pixel size |
| Transparency | Supported in SVG, AI, EPS and PDF | Supported in PNG, GIF and WebP; not in JPG |
Common vector logo formats
- SVG (Scalable Vector Graphics): an open, text-based format that browsers display natively. It is the usual choice for logos on websites and in apps.
- AI: the native Adobe Illustrator working file. It typically preserves layers and editability, but it requires compatible software.
- EPS: an older PostScript-based format that is still requested by some print shops and sign makers.
- PDF: can contain true vector artwork and is widely readable. A PDF can also simply wrap a raster image, so it needs checking.
What makes SVG logos different
An SVG file is written in XML, so you can open it in a text editor and read the shapes it contains. A logo built from path, circle, rect or polygon elements is genuinely vector. However, an SVG can also contain an embedded image element that points to, or includes, a PNG or JPG. In that case the file has an .svg extension but the logo itself is still raster and will blur when enlarged.
<!-- True vector: a shape defined by coordinates -->
<path d="M10 80 L50 10 L90 80 Z" fill="#000000"/>
<!-- Raster inside an SVG wrapper: still pixel-based -->
<image href="logo.png" width="100" height="100"/>How to check whether a logo file is really vector
A file extension alone does not prove that a file contains vector geometry. Saving or renaming a raster image as SVG, EPS or PDF does not convert it. Use observable checks instead.
- Zoom in far: vector edges stay crisp, while raster edges show pixels or blur.
- Use outline or wireframe view in a vector editor: true vector artwork shows editable paths, while an embedded raster appears as a single rectangular box.
- Open an SVG in a text editor: look for path and shape elements, and be cautious if you see an image element or a long block of encoded data.
- Try selecting individual parts: in a vector file, letters and shapes can usually be selected and recolored separately.
- Check the text: if the wordmark is live text rather than converted outlines, it may display incorrectly on computers that don't have the font installed.
Which format to use in which situation
- Master or archive copy: keep an editable vector file (AI, SVG or vector PDF) as the source from which every other version is exported.
- Website headers, icons and responsive layouts: SVG, because it stays sharp on high-density screens at any size.
- Professional printing, embroidery, signage and vehicle graphics: a vector file, usually in whatever format the vendor specifies (often PDF, EPS or AI).
- Social media profiles, email signatures and platforms that only accept images: PNG exported from the vector master at the required pixel size, with a transparent background where needed.
- Photographic or textured logo treatments: these may rely on raster effects that cannot be fully represented as vector shapes, so a high-resolution raster file may be necessary alongside the vector version.
Practical caveats
Being able to scale a logo doesn't guarantee it will read well at every size. Fine details and thin strokes can disappear at very small sizes, which is why some identities include simplified small-size versions. Separately, the fact that a logo file is downloadable, for example as an SVG from a website or a logo collection, does not mean you have permission to use it. Brand owners typically control usage through trademark rights and brand guidelines, so confirm permission before reusing another organization's logo.
Next step
If you are assembling or auditing a logo package, start by confirming that at least one file is genuinely vector, using the checks above. Then export the raster versions you need from that master rather than enlarging existing PNG or JPG files. If no true vector source exists, the logo will need to be redrawn as vector artwork, ideally by tracing it manually rather than relying solely on automatic tracing, which can distort curves and letterforms.