About SVG
SVG, Scalable Vector Graphics, became a W3C standard in 2001. Instead of pixels, an SVG file describes shapes: lines, curves, fills and text, written as XML. A browser draws them fresh at whatever size is needed, so an SVG logo is as sharp on a phone as on a billboard, and usually tiny in file size.
That makes it the right format for logos, icons, diagrams, maps and illustrations with clean shapes. It is the wrong format for photographs, which have no shapes to describe.
Going from SVG to pixels
Plenty of places will not take an SVG: social media, most upload forms, email, office software. Rendering it as PNG at 2× or 4× gives a crisp image for those. Remember that SVGs drawn as images cannot load external fonts or pictures, so outline text in your design tool before exporting.
Going from pixels to SVG
Converting the other way is tracing. The tool above groups the image into a few colours and fits curves around each area. Simple, high-contrast artwork traces cleanly; photos do not. Treat the result as a solid draft and tidy it in a vector editor if it will be used widely.
A note on uploads
Because SVG is code, it can contain scripts. That is why some platforms refuse SVG uploads entirely, and why you should be careful opening SVGs from untrusted sources in software that runs them.
SVG at a glance
| First released | 2001 |
|---|---|
| Compression | Vector, stored as text |
| Transparency | Yes |
| Animation or pages | Animation via CSS |
| Best for | Logos, icons and diagrams |
| Support | Browsers and design tools |
Questions people ask
Can I convert a JPG to SVG?
Yes, by tracing. It works well for logos and line art and poorly for photos.
What size PNG should I make from an SVG?
2× for screens, 4× or more for print. The SVG is redrawn, so larger renders stay sharp.
Why do some sites not allow SVG uploads?
SVG files can contain scripts, which is a security risk on sites that display user uploads.