SVG File
Definition
SVG stands for Scalable Vector Graphics, and the file really is text: open one in an editor and you see elements, coordinates, fills and strokes. It is the web's format for vector graphics, standardised by the W3C — SVG 1.1 dates from 2011, and SVG 2 is still a working draft that browsers have adopted in parts. The extension is .svg and the MIME type is image/svg+xml. A single file serves a 16-pixel favicon and a full-width illustration with no second export, because the renderer rasterises the shapes at whatever resolution the device has. It can also carry CSS, gradients, filters, fonts and, importantly, JavaScript.
Why It Matters
For logos, icons, charts and diagrams, an SVG is usually both smaller and better looking than any pixel export. A typical wordmark is 2 to 4 KB of markup where a 3x PNG of the same mark might be 40 KB, and the SVG never blurs on a high-density screen. It also stays editable and recolourable: a fill can be changed from CSS, so one file covers light and dark themes. The catch is the script support. An SVG is a document, not an inert picture, so an untrusted one opened directly in a browser can run code — a cross-site scripting vector — which is why hosts treat user-uploaded SVGs more carefully than they treat JPEGs.
How It Works
The root svg element carries a viewBox, which defines the internal coordinate system, and the width or height applied by CSS decides how large that coordinate system is drawn. Inside it, path elements hold a d attribute of move, line, curve and arc commands; other elements cover circles, rectangles, text and groups. Because the payload is text, Gzip compression typically shaves 60 to 80 percent off the transferred size, and running SVGO to round coordinates and drop editor metadata often halves the file before that. Inlining the markup straight into the HTML removes a request entirely and lets page CSS reach the shapes. When an SVG is referenced from an img tag, scripts inside it do not execute; when it is opened as its own URL, they do, so a host serving files uploaded by strangers will isolate them on a separate domain or send them with a Content-Security-Policy.
Real-World Example
A design studio publishes a brand kit on 99helpers at studio-kit.99helpers.site, with logo.svg sitting beside the PDF guidelines. The exported file was 9 KB; after SVGO it is 3.4 KB, and about 1.3 KB over the wire once compressed. The six PNG exports it replaced — three densities in two colours — came to 310 KB between them. Anyone who needs a raster copy converts locally, since 99helpers serves the file you upload and does not rasterise anything for you.
Common Mistakes
- ✕Exporting straight from a design tool without cleaning up — editor metadata, hidden layers and 12-decimal coordinates can triple the size of an otherwise tiny file
- ✕Leaving out the viewBox — without it the image has no intrinsic coordinate system to scale against, so it renders at a fixed size and ignores CSS width
- ✕Accepting SVG uploads from the public and serving them from the main domain — a crafted file can carry script that runs against your origin
- ✕Tracing a photograph into vector paths — the result is larger than the JPEG, slower to render and worse to look at
Related Terms
Vector Graphics
Vector graphics describe a picture as shapes — points, lines, curves and fills — rather than as pixels. One file renders sharply at any size, because the shapes are drawn fresh at whatever resolution the device has.
Raster Graphics
Raster graphics are images stored as a grid of pixels, each holding its own colour. Photographs, screenshots and scans are all raster, and enlarging one beyond its native size makes it soft or blocky.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Cross-Site Scripting
A flaw in which text supplied by a visitor ends up being executed as JavaScript on your page. Because the script runs on your origin, it inherits everything your page can see.
Gzip Compression
Gzip compression shrinks a response before it leaves the server and the browser expands it again on arrival. It is lossless, it has been supported by every browser for decades, and it typically cuts text files to a third of their original size.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →