Choose SVG or a raster image for a logo

Use SVG for a simple logo made of shapes and lines that needs to appear at several sizes. Use a raster format for a detailed photograph or artwork whose appearance depends on individual pixels and fine texture. The MDN image format guide describes how SVG and raster formats differ.

Start with the artwork you have, then choose the file for its destination:

1. Look at the logo’s details. Clean shapes and lines are a good fit for SVG because vector graphics can scale without becoming pixelated. Photographic detail calls for a raster image.
2. Check which formats the destination accepts. A website may display SVG, while an upload form may require a raster file. Follow the stated format requirements before exporting.
3. If you need a raster version of a logo, consider PNG when you need transparency or sharp edges. JPEG is generally suited to photographic images and does not support transparency. Keep the intended background in mind when choosing between them.
4. Open the exported file at the smallest and largest sizes where you plan to use it. Check that the logo is legible, its edges look appropriate, and its background behaves as intended. Also check that the receiving page or upload form accepts the file.

The source artwork matters. An SVG is useful when the logo is actually described as vector shapes. Saving a photographic bitmap inside an SVG wrapper does not turn its pixels into scalable vector artwork. If you only have a small raster copy of a logo, ask for the original brand asset before assuming that a new extension will solve enlargement. For a portal that accepts only PNG, export a PNG from a suitable original at the dimensions the portal requests and inspect that file separately.

A useful self-check is to place the file against both a light and a dark background, then inspect it at the intended display sizes. If the logo needs a clear background, confirm that the exported file actually has one. If SVG is rejected by the destination, supply an accepted raster format instead. A raster export can serve that destination, but it will not give you the same scaling behavior as vector artwork.

If a large version looks blocky, inspect the source file rather than increasing display dimensions again. A true vector original or a higher-resolution raster source can support a new export; a renamed low-resolution file cannot add missing image detail. Keep the original and the destination-specific output as separate assets so a later requirement does not inherit the current portal’s limits.