SVG optimization and conversion: when to use SVG, PNG, or JPG
SVG is a text-based vector format that scales without pixelation, but raw SVG exported from design tools is often bloated with unused metadata, editor-specific attributes, and inline styles. Cleaning it up, removing hidden attack surface, and knowing when PNG is actually the better choice are the three skills that make SVGs work well on the web.
SVG earns its place for logos, icons, illustrations, and any mark that must stay sharp at every size. The workflow is always the same: export from the tool, run through SVGO, sanitize before embedding in HTML, and rasterize to PNG only when you hit a browser or tooling constraint. A clean, optimized SVG is both smaller and safer than the file your design tool hands you.
What makes SVG different from PNG and JPEG
SVG (Scalable Vector Graphics) stores artwork as XML — a tree of geometric primitives like `<path>`, `<circle>`, and `<polygon>` with fill and stroke attributes. Because the geometry is resolution-independent, an SVG scales from a 16-pixel favicon to a billboard without a single pixel becoming blurry.
PNG and JPEG store a fixed grid of color samples. Enlarging them means the renderer must interpolate between samples, which is why logos and icons saved as PNG look blurry on retina displays at 2× and above unless you supply a 2× version. SVG avoids this problem entirely.
The downside of SVG is complexity. A photograph encoded as SVG with thousands of gradient-filled paths is far larger and slower to render than a JPEG of the same image. SVG is the right tool when the artwork is geometrically simple; raster is the right tool when the image is photographically complex.
Why exported SVGs are larger than they need to be
Design tools like Figma, Illustrator, and Inkscape export SVGs that are correct but not lean. The exported file typically includes: an XML declaration, a `<!DOCTYPE>` preamble, editor-specific namespaces (`xmlns:dc`, `xmlns:cc`, `xmlns:rdf`), layer names as `<title>` and `<desc>` elements, inline style rules duplicated from the cascade, coordinates stored to six decimal places when two suffice, and groups that contain only one child.
None of this affects appearance, but it inflates the file. A logo exported from Illustrator at 24 KB commonly shrinks to 4–6 KB after optimization with no visible change, which is a meaningful saving when that logo loads on every page.
A practical SVG optimization pipeline
- Export a clean baseline from the design tool
In Figma, use 'Copy as SVG' or export with 'Include id attributes' off. In Illustrator, use 'SVG Tiny' or the 'Minify' export option. Reducing noise at export makes the optimizer's job easier.
- Run SVGO
SVGO (SVG Optimizer) is the standard command-line tool for the job. `npx svgo --multipass input.svg -o output.svg` applies multiple passes to remove metadata, collapse groups, convert shapes to paths, and merge redundant styles. The `--multipass` flag is worth the extra time.
- Check the result visually
Open the optimized file in a browser and compare it with the original. SVGO's default preset is conservative, but aggressive settings like `convertShapeToPath` can round corners or alter appearance on complex artwork. Keep the original until you have verified the output.
- Serve with gzip or Brotli
SVG is XML, and XML compresses extremely well. An already-optimized 5 KB SVG often transfers as 1.5 KB over Brotli. Set `Content-Type: image/svg+xml` and ensure your web server's compression rules include `.svg`.
SVG versus PNG versus JPEG
| Property | SVG | PNG | JPEG |
|---|---|---|---|
| Scalability | Infinite, lossless | Fixed resolution | Fixed resolution |
| Transparency | Yes (native) | Yes (alpha channel) | No |
| Best content | Icons, logos, diagrams | Screenshots, graphics with transparency | Photographs |
| File size on photos | Huge (impractical) | Large | Small |
| Editable as code | Yes | No | No |
| Animation support | Yes (CSS/SMIL) | APNG only | No |
| Browser support | All modern | Universal | Universal |
When to rasterize SVG to PNG
Some contexts cannot accept SVG: email clients (most strip SVGs or render them incorrectly), Open Graph images (social platforms require PNG or JPEG), favicon toolchains that predate SVG favicon support, and native mobile apps that import assets as bitmaps.
When you rasterize, choose a target resolution deliberately. A logo that appears at 200px wide on the page needs at least 400px for 2× retina displays. If the logo also appears at 600px elsewhere, render at 1200px and let the browser scale down — downscaling PNG is visually clean. ImageMagick's `magick -background none input.svg -resize 800x png:output.png` preserves transparency and renders at 800px wide.
For rasterizing directly in the browser, PixMovo accepts an SVG upload and exports a PNG at a chosen resolution, which is convenient for one-off conversions without installing ImageMagick.
Useful SVGO plugin settings
- `removeViewBox: false` — keep the viewBox attribute or the SVG will not scale correctly in all browsers.
- `cleanupIds: true` — renames verbose IDs to short ones; be careful if JavaScript references IDs by name.
- `mergePaths: true` — combines adjacent paths into one, which reduces both file size and DOM nodes.
- `convertColors: { shorthex: true }` — converts six-digit hex to three-digit where possible.
- `removeUnknownsAndDefaults: true` — removes attributes whose values match the SVG spec default, e.g. `fill-opacity='1'`.
Inline SVG versus `<img src>`: which to use
Inline SVG — pasting the markup directly into HTML — gives you full CSS and JavaScript access to the SVG's interior elements. You can change fill colors on hover, animate individual paths, or target IDs with querySelector. The tradeoff is that the browser cannot cache the SVG separately from the page, and the markup inflates the HTML document.
Using an `<img>` tag or a CSS `background-image` lets the browser cache the file independently and keeps the HTML clean. JavaScript and external CSS cannot reach inside the SVG in this mode. For icons whose color must respond to theme changes, inline SVG or SVG in a `<use>` element referencing a sprite is the right approach.
Frequently asked questions
- What is the best tool for optimizing SVG files?
- SVGO is the standard choice. Run `npx svgo --multipass input.svg -o output.svg` for most files. The multipass flag applies multiple rounds of optimization and typically produces the smallest output.
- Is it safe to use user-uploaded SVGs on a webpage?
- Not without sanitization. SVG can contain scripts, event handlers, and external references that create XSS vulnerabilities. Always run uploaded SVGs through DOMPurify or a server-side sanitizer before embedding them in a page or storing them for other users to view.
- When should I convert an SVG to PNG?
- Convert to PNG when the target context cannot accept SVG: email clients, Open Graph images, many native mobile asset pipelines, and anywhere a bitmap at a specific resolution is required. Rasterize at 2× the display size to keep things crisp on retina screens.
- Why does my SVG look blurry after SVGO optimization?
- SVGO's aggressive path merging or shape conversion settings may have altered the geometry. Check if `mergePaths`, `convertShapeToPath`, or `roundingPrecision` caused the change, and add those plugins to the disabled list in your SVGO config.
- Can I animate an SVG?
- Yes. CSS animations targeting SVG elements work in all modern browsers. SMIL animations are supported but deprecated in some engines; CSS is the safer long-term choice. JavaScript can also manipulate SVG DOM elements for interactive animations.