SVG (Scalable Vector Graphics).

Raster graphics such as JPG, PNG or WebP consist of individual pixels. Enlarge them and they become blurred. An SVG file, by contrast, says: 'Draw a circle here with this radius in this colour.' The browser recalculates the image at any size. That is why an SVG logo looks equally sharp on a small smartphone and on a large Retina screen, without needing several file sizes.

SVG is a text-based format built on XML. It can be written directly into a page's HTML (inline), which allows colours to be changed via CSS and elements to be animated — an icon that changes colour on hover, for instance, or a line that draws itself as you scroll. For logos, icons, simple illustrations, maps and diagrams, SVG is usually the best choice; for photos it is unsuitable, because describing millions of colour gradations would produce enormous files.

Many SVG files exported from design programs contain unnecessary ballast: metadata, hidden layers, excessively precise coordinates. Tools such as SVGO strip this out and often reduce file sizes considerably. With inline SVG, accessibility also needs attention: decorative graphics are hidden from screen readers, while meaningful graphics get a title or description — analogous to alt text for images.

One security aspect is often overlooked: because SVG can contain code, scripts can be hidden inside SVG files. Websites where users upload their own files should therefore either block SVG uploads or sanitise them. For your own, checked graphics this risk does not exist.