JPG and PNG store a grid of coloured pixels. SVG does something fundamentally different: it stores instructions for drawing an image — "a circle here, a line there, filled with this colour". That one difference gives SVG remarkable strengths for the right kind of graphic, and makes it useless for the wrong kind. Here's what SVG is, when to use it, and how to trim its size safely.
What SVG actually is
SVG stands for Scalable Vector Graphics. Because it describes shapes with maths rather than pixels, an SVG can scale to any size — a phone icon or a billboard — and stay perfectly crisp. There's no resolution to run out of. It's also just text (XML), so you can open one in a text editor and read the shapes inside.
When to use SVG (and when not to)
Perfect for: logos, icons, simple illustrations, charts, diagrams — anything made of defined shapes and flat colours. These stay razor-sharp at every size and usually weigh less than a pixel image of the same graphic.
Wrong for: photographs. A photo has millions of subtly different pixels with no clean shapes to describe, so representing it as vectors is impossible in practice. Photographs belong in JPEG or WebP; screenshots in PNG.
Why SVG files are often bigger than they should be
Design tools are generous savers. An icon exported from Illustrator, Inkscape or Figma carries editor metadata, document settings, licensing blocks, layer names and generous whitespace — none of which a browser needs to draw the image. On a small icon, that overhead is frequently half the file. Since logos and icons load on every page of a site, those wasted bytes are paid over and over.
How to optimize an SVG safely
Safe optimization removes only what doesn't affect rendering:
- Remove: XML comments,
<metadata>and<desc>blocks, editor-specific attributes (Inkscape/Sodipodi), unused namespaces, and whitespace between tags. - Keep: all geometry, the
viewBox, styles, and any IDs or classes — these may be referenced by your CSS or JavaScript, and removing them can silently break styling or animation.
The SVG optimizer on this site does exactly this and shows a live preview of each cleaned file, so you can confirm it renders identically before downloading. Files exported from design tools typically shrink 20–60%.
Two more SVG tips
SVG gzips beautifully. Because it's text, your server's gzip/Brotli compression squeezes it further in transit — but gzip can't remove bloat as effectively as deleting it at the source, so optimize first, then let the server compress.
Inline vs. file. Tiny, frequently-used icons are often pasted directly into your HTML (inlined) to save a request; larger illustrations are better as separate .svg files that browsers can cache. Either way, optimizing first keeps the payload lean.
Compress your images now
Ready to put this into practice? Use the free WebPcompress compressor — it runs entirely in your browser, handles 20 images at a time, and your photos never leave your device.