Last updated: November 2026 · Reading time: about 11 minutes
What this guide covers
- Why a logo is the wrong thing to save as a JPG
- How SVG is different — vectors vs pixels
- The measurement: a real comparison
- What this actually does to page speed
- The CSS advantage — recolouring without a new file
- When SVG is the wrong choice
- How to optimise an SVG before publishing
- Converting a raster logo to SVG — and when not to
- Worked example: the Nigerian flag
- FAQ
Why a logo is the wrong thing to save as a JPG
A logo is almost always one of three things: a wordmark (text), a symbol (geometric shapes), or a combination. All three are made of edges, curves and flat colours. They are exactly the kind of image that compression-based formats handle badly and vector formats handle perfectly.
Three reasons a raster logo is a poor fit:
- JPG is designed for photographs. Its compression assumes smooth gradients and subtle colour variation. A logo is sharp edges and flat colour blocks, which is the opposite — so JPG adds blurring and compression artefacts exactly where sharpness matters most. A logo saved as JPG will look soft even at its native size.
- PNG is lossless but stores every pixel. No artefacts, but the file is large because it contains the actual pixel data. A 400×400 logo at 2× density is 800×800 pixels; even with compression, that's 40–100 KB for a logo that could be 3 KB.
- Raster files don't scale. If you need the same logo at 32px for a favicon, 200px for a header and 800px for a social preview, a raster file requires three files at three sizes — or one large file downscaled by the browser, which wastes bytes for the small contexts.
How SVG is different — vectors vs pixels
A JPG or PNG contains a grid of coloured pixels. The format tells the browser "pixel 1 is this colour, pixel 2 is this colour" for every single pixel in the image.
An SVG contains drawing instructions. It tells the browser "draw a circle at this position with this radius and this fill colour." The browser renders it at whatever size and resolution the screen needs.
Three consequences follow:
| JPG / PNG (raster) | SVG (vector) | |
|---|---|---|
| What is stored | Every pixel, individually | Shapes, paths, colours as instructions |
| File size for a logo | 40–200 KB depending on size and compression | 2–8 KB for a clean production file |
| Scaling | Blurs when enlarged beyond native size | Sharp at any size, from 16px to a billboard |
| Retina / high-DPI | Requires a 2× file (4× the data) | No extra file needed — renders sharp at any density |
| Recolouring | Requires editing the image and exporting a new file | Can be recoloured with a single CSS property |
| Suited to | Photographs, complex illustrations | Logos, icons, charts, maps, diagrams, line art |
The retina point is the one most people miss. Serving a logo at 2× density as PNG means either a file at four times the pixel count, or letting the browser upscale a smaller file (which looks blurry). SVG eliminates the choice entirely — one small file looks perfect on a 1× laptop and a 3× phone.
The measurement: a real comparison
These figures are illustrative but representative, based on a typical corporate wordmark at 400×100 pixels on a white background:
| Format | File size | Notes |
|---|---|---|
| PNG at 1× (400×100) | ~18 KB | Lossless, no artefacts, but blurry on retina screens |
| PNG at 2× (800×200) | ~52 KB | Sharp on retina but four times the data |
| JPG at 2× (800×200, quality 85) | ~24 KB | Smaller but with visible softness and artefacts around text |
| WebP at 2× | ~14 KB | Better than JPG and PNG, but still raster — still blurry if scaled up |
| SVG (optimised) | ~3 KB | Sharp at every size, one file, editable with CSS |
That's a 94% reduction against the 2× PNG and an 83% reduction against the 1× PNG — for a logo that is sharper on every device.
On its own, 50 KB is not going to change a page's performance. But the logo appears on every page, and it appears on the same page as other images, fonts, scripts and stylesheets. Saving 50 KB per page across 5,000 monthly page views is 250 MB of data saved per month — and the saving compounds with every other image you convert.
What this actually does to page speed
Two effects, and they're different.
Effect 1: smaller downloads. A 3 KB SVG downloads faster than a 52 KB PNG, and on a slow mobile connection that difference is measurable. The logo is usually loaded above the fold, so it delays the largest contentful paint (LCP) — one of Google's Core Web Vitals. Smaller logo, faster LCP.
Effect 2: no extra HTTP request. This is the one that matters more. An SVG can be inlined directly into the HTML, which means the browser doesn't have to make a separate request to fetch it. That eliminates a round-trip to the server — typically 100–300ms on a mobile connection, even for a small file.
So the realistic gains are:
- One fewer HTTP request per page load if the logo is inlined
- ~50 KB saved per page load if a 2× PNG is replaced
- Sharper rendering on every device, with no extra files
- Faster LCP because the logo is usually the above-the-fold image
What SVG does not do: it doesn't fix slow server response times, render-blocking scripts, unoptimised fonts, or oversized hero images. A logo is one part of a page's weight, not the whole thing. Anyone claiming that "switching to SVG" will dramatically change your Core Web Vitals is overselling it — but it's a genuine improvement, and it's one of the easiest to make.
The CSS advantage — recolouring without a new file
This is the capability a JPG or PNG cannot match, and it's the one most useful in a real site build.
If an SVG is inlined into the HTML, every shape inside it becomes part of the DOM. That means it can be styled with CSS — including fill, which sets the colour of a path.
The classic use case: a logo that needs to be dark on a light header and white on a dark footer. With a PNG you need two files. With SVG you can use one:
That's a two-file saving, and it's more maintainable — one asset, not two, and no chance of the two versions drifting apart over time.
The same applies to hover states, dark mode, high-contrast mode, and brand colours that change per product. With SVG it's a CSS property. With raster it's a new file export each time.
When SVG is the wrong choice
SVG is not universally better. Four situations where it's worse:
- Photographs and complex illustrations. A photo converted to SVG is larger than the JPG, because the tracing produces thousands of paths. If the image has more than a few dozen colours, use JPEG, WebP or AVIF.
- Very small icons at very high quantity. If you have 500 tiny icons and you inline each one, the HTML file becomes huge. In these cases an SVG sprite sheet is the answer — but that's more complex than a plain
<img>tag. - Unoptimised SVG from a design tool. A logo exported from Illustrator or Figma as SVG can be 40–80 KB because it includes invisible metadata, unused layers, filters, embedded fonts and redundant decimal places. This is the case where SVG is slower than PNG — because the SVG was never optimised.
- Email signatures and some older clients. SVG support in email clients is inconsistent (Gmail webmail strips it, Outlook desktop blocks it entirely in many configurations). For email logos, use a PNG or JPEG.
How to optimise an SVG before publishing
The difference between a raw export and an optimised SVG is usually a factor of 5–10×.
Four passes:
- Remove invisible metadata. Design tools include the file's origin, the layer structure, editing hints and often a comment block. None of it affects rendering.
- Remove unused shapes and paths. A logo often has layers that were hidden in the export but are still in the file.
- Round decimal places. Coordinates like
M12.3847562,45.9281736can beM12.38,45.93— the difference is invisible, the file size difference is significant. - Remove filters and gradients where they aren't needed. A drop shadow filter in SVG can add hundreds of bytes and forces the browser to compute the shadow on every render. If the logo doesn't need it, remove it.
Free tools that do all four in one click:
- SVGO — the standard. Available as a CLI, as a web tool at SVGOMG, and as a Figma plugin. Expect 60–90% size reduction on a raw export.
- SVGOMG — a browser-based GUI for SVGO. Drop the file in, see the size reduction and the visual comparison before you download.
- svgtopng — useful for the inverse operation, but not for optimisation.
What a well-optimised logo SVG looks like: under 5 KB, no filters, no embedded fonts, no metadata comments, coordinates rounded to one or two decimal places, and paths merged where possible. Most professional logos can be reduced to 2–4 KB with no visible difference.
Converting a raster logo to SVG — and when not to
If your logo only exists as a JPG or PNG, you have three options.
| Approach | Quality | When to use |
|---|---|---|
| Re-export from the original design file | Perfect | If you or your designer still have the AI, Figma, Sketch or SVG source |
| Auto-trace (Illustrator Image Trace, Vectorizer, or similar) | Variable — often visible artefacting | Simple geometric logos only. Complex logos will look wrong and the resulting SVG will often be larger than the PNG |
| Manual trace or redesign | Perfect | If the logo is simple enough to redraw in a vector tool. Often faster than cleaning up an auto-trace |
The auto-trace trap is worth its own paragraph. Tracing a 500×500 PNG of a logo into SVG produces a file with thousands of tiny paths — the tracing algorithm approximates every pixel edge. The resulting SVG can be 100–500 KB, which defeats the entire purpose. If the auto-trace output is bigger than 20 KB, don't use it — either find the original vector source or keep the PNG.
The best case is always the original design file. A vector logo designed properly is 2–5 KB. A traced version is rarely under 20 KB. The difference is not the format — it's whether the shapes were ever vectors to begin with.
Worked example: the Nigerian flag
The Nigerian flag — three vertical bands, green-white-green — is a perfect illustration of why vector formats suit simple shapes and why unoptimised vector code can defeat the purpose.
The flag itself is three rectangles. That's the entire design. The simplest correct SVG is about 200 bytes:
Two rectangles. Two colours. Done. No filters, no gradients, no metadata, no embedded fonts — just the shapes the flag is actually made of. That's the essence of why SVG wins for logos: the file contains exactly as much data as the shape needs, and not one byte more.
What a PNG of the same flag would look like. At 600×400 pixels — a reasonable hero size — a PNG of the Nigerian flag would be roughly 3–5 KB. Not enormous, because flat colours compress well. But now consider:
- A 32×32 favicon version of the same flag
- A 200×133 version for the header
- A 1200×800 version for a social card
- A 2× retina version of each
That's four raster files at eight sizes if you want retina coverage — about 15–25 KB total, plus the HTTP requests to fetch them. The SVG file for the same flag, at any size, on any screen, is the same 200 bytes. One file, every use case, permanently sharp.
What an unoptimised version looks like. Now suppose someone opened the flag in Adobe Illustrator, added a subtle drop shadow filter to give it depth, kept the layer structure in the export, embedded a text label reading "Nigeria" in a system font, and included a 400-byte comment block with the file's creation metadata. The same three rectangles become 15–30 KB of SVG — still sharp at any size, but larger than a PNG would have been.
This is the trap worth showing to any designer or developer who says "we switched to SVG and the site got slower." The problem was never SVG. The problem was the export — the format was correct, the file was not. Running that 25 KB file through SVGO would have brought it back to under 400 bytes.
The lesson: SVG is not automatically smaller. A well-optimised SVG is smaller. An unoptimised one can be larger than the PNG it replaced. The format gives you the potential. The optimisation is what realises it.
Frequently asked questions
Should I use SVG or PNG for my website logo?
SVG, in almost every case. A logo is made of shapes, text or flat colours — exactly what vector formats handle efficiently. A PNG logo at retina density is typically 40–100 KB; the same logo as an optimised SVG is 2–8 KB and stays sharp at any size. The only exception is if you don't have a vector source and can't get one traced cleanly.
How much smaller is an SVG than a PNG for the same logo?
Typically 80–95% smaller. A 400×100 wordmark as a 1× PNG is around 18 KB; the same logo as an optimised SVG is around 3 KB — roughly 83% smaller. Against a 2× retina PNG (~52 KB), the reduction is about 94%. The exact saving depends on the logo's complexity, but anything under a 5× reduction usually means the SVG wasn't optimised.
Is SVG actually faster than PNG for page speed?
Yes, for two reasons. First, the file is smaller, so it downloads faster. Second — and more importantly — an SVG can be inlined into the HTML, which eliminates an HTTP request. On mobile connections, that's typically 100–300ms saved per page load. The visible effect on Core Web Vitals depends on where the logo sits on the page, but above-the-fold logos are a common LCP element.
Why does my SVG file look blurry on Retina screens?
It shouldn't — SVG is resolution-independent and renders sharp at any pixel density. If it looks blurry, the likely causes are: the SVG contains an embedded raster image (check the source for a base64 <image> tag), or the CSS is scaling it up with a filter, or you're not viewing the actual SVG — check that the file extension and content-type are correct.
Can I convert a JPG logo to SVG?
You can, but the quality is highly variable. Auto-tracing (Illustrator Image Trace, online vectorisers) works well for simple geometric logos and badly for anything complex — often producing an SVG larger than the original PNG. The right approach is to get the original vector source file (AI, Figma, Sketch, SVG) or redraw the logo manually. Traced SVGs are usually larger and lower quality than a properly designed vector.
What is the maximum file size for an SVG logo?
There's no hard limit, but a practical target is under 5 KB for a production logo, and under 3 KB for a simple one. If your SVG exceeds 10 KB, something is wrong — usually leftover filters, embedded fonts, unrounded coordinates, or unused layers from the design tool. Run it through SVGOMG (SVGO in a browser) and check the result.
Does Google care whether my logo is SVG or PNG?
Google indexes both formats, but it explicitly recommends SVG for structured data, favicons and logos in Article schema. Google's documentation on Logo schema states that SVG is preferred. Beyond structured data, page speed matters for Core Web Vitals, and a smaller logo contributes to that — but the direct SEO effect of the format alone is small; the indirect effect through page speed is larger.
Can I use SVG in email signatures?
Not reliably. Gmail's webmail strips SVG attachments and inline SVG images. Outlook desktop blocks SVG in many configurations. Apple Mail and iOS Mail have reasonable SVG support but inconsistent rendering of complex files. For email signatures, use a PNG (the retina 2× version) or a small JPEG — this is the one place where raster formats are still the correct choice.
What about WebP or AVIF — aren't they better than PNG?
Better than PNG for photographs and complex images, yes. For a logo, no — they are still raster formats, so they still need one file per size, still need a 2× version for retina, and still blur when scaled. WebP and AVIF are the right answer for photographs, not for logos. The format should match the content type, not the "modernity" of the format.
Is SVG safe for SEO from a security perspective?
SVG can technically contain JavaScript, which is why some platforms restrict inline SVG uploads. For a logo you've created yourself or optimised from a trusted design source, this isn't a concern. For an SVG uploaded by a third party, run it through SVGO first — SVGO can strip scripts, external references, and event handlers with the appropriate configuration.
Do I need multiple SVG files for different sizes?
No — that's the point. One SVG file renders correctly at 16px, 200px, 800px and 12,000px, with no additional files. If you're maintaining multiple SVG files for different sizes, something has gone wrong — probably the SVG is being rendered inside an <img> tag with fixed dimensions that don't match its viewBox, or the SVG contains raster content.
Can I animate an SVG logo?
Yes, and this is another capability raster formats can't match. SVG supports CSS animations and transitions on its internal shapes — a logo whose elements fade in, or a hover effect that recolours a specific path. Keep it subtle and respect prefers-reduced-motion; animated logos are a user preference, not a default behaviour.
Related reading on Dedon Tech: how to convert AIFF to MP4 on Mac with FFmpeg · InsurTech vs traditional insurance: who actually carries the risk · fintech vs traditional banking: where your money actually sits · full site map
0 Comments: