SVG file format
An SVG is not a picture but a set of drawing instructions written in XML, so it stays razor-sharp at any size and can be edited in a text editor.
or drag & drop them here · images, video, audio and documents · up to 2 GB
What is SVG?
SVG became a W3C recommendation in 2001 and is plain text under the hood. Instead of a grid of pixels it stores shapes: this path, this stroke width, this fill colour, these coordinates. The browser executes those instructions at whatever size the layout asks for, which is why a logo in SVG is perfectly crisp on a phone, on a 5K display and on a printed poster from the same handful of kilobytes.
Being text has consequences beyond scaling. An SVG diffs cleanly in Git, so design changes are reviewable line by line. Its elements can be styled with CSS and animated or manipulated with JavaScript like any other DOM nodes. And it compresses well with gzip, so a complex icon set often costs less over the wire than a single PNG sprite.
The same openness is a security concern. Because SVG can contain <script> elements, external references and event handlers, a file uploaded by a user and served from your own domain is a cross-site scripting vector. Anything accepted from outside should be sanitised or served from a separate origin — a precaution no raster format requires.
| Extension | .svg |
|---|---|
| Category | Image |
| MIME type | image/svg+xml |
| Released | 2001 |
| Developed by | W3C |
| Compression | Vector (no pixel compression) |
| Transparency | Yes |
| Animation | Yes |
SVG: frequently asked questions
- Why does my SVG show the wrong font?
- Because the file references a font by name and expects the viewer to have it. If the font is missing, the renderer substitutes another and the layout shifts. Convert text to outlines before exporting, or embed the font, and the drawing becomes self-contained.
- Can I convert a JPEG or PNG to SVG?
- Only by tracing, which is an approximation rather than a conversion. Vectorisers detect edges and fit curves to them, which works well for logos and flat line art. Photographs come out as thousands of mismatched patches — larger than the original and worse looking.
- Why does an SVG not appear in Photoshop or Word?
- Many raster editors and older office suites either rasterise the file at import or refuse it entirely, and support for filters, masks and embedded fonts is uneven. Exporting a PNG at the size you actually need is the reliable way to hand vector artwork to those tools.
- Is it safe to accept SVG uploads from users?
- Not without sanitising them. SVG can carry JavaScript, event handlers and external references, so a malicious file served from your domain can run script in your users' sessions. Strip scripting with a sanitiser, or serve user content from a separate origin.
- How do I make an SVG file smaller?
- Run it through an optimiser such as SVGO: editors leave behind hidden layers, editor metadata, absurd coordinate precision and unused definitions. Rounding coordinates to one or two decimals and merging paths often halves the file with no visible change, and gzip on the server does the rest.
- Should icons be SVG or PNG?
- SVG, in almost every case. One file covers every screen density with no separate @2x and @3x exports, colours can be changed with CSS, and the file is usually smaller. Use PNG only where the target does not render SVG, such as email clients and some legacy apps.