What is an SVG file?

Beginner's guide

An SVG (Scalable Vector Graphics) is an image format based on XML text. Instead of storing pixels like a JPG or PNG, an SVG stores mathematical instructions: lines, curves, shapes and colors. The browser reads those instructions and draws the image.

Why is it "scalable"?

Because it is defined with formulas and not pixels, an SVG looks sharp at any size. You can scale it from 16px to a billboard and it never pixelates or looks blurry. That's why it's ideal for logos, icons and illustrations.

SVG vs PNG vs JPG

SVG: vector, sharp at any scale, low weight for simple graphics, editable as text. Ideal for logos, icons, graphics.
PNG: raster (pixels), supports transparency, but loses quality when enlarged. Good for screenshots and images with transparency.
JPG: raster, lossy compression. Good for photos, bad for text and sharp edges.

Advantages of SVG

Infinite quality: it never pixelates.
Light weight for graphics with few shapes.
Editable: you can open the code and change colors or shapes.
Can be animated and styled with CSS and JavaScript.
Accessible and compatible with all modern browsers.

What does an SVG look like inside?

A blue circle is as simple as this:

That text IS the image. Changing fill changes the color instantly.

What is it used for?

Logos, UI icons, illustrations, charts and diagrams, maps, and any element that must look perfect on screens of different resolutions (including Retina displays).

Edit your SVG now

With svgdesk you can open an SVG, modify its shapes, colors and nodes, and export it again, all free and from the browser.

Open the editor