SVG

SVG (Scalable Vector Graphics) is an XML-based vector graphics format. Instead of storing an image as a grid of pixels, SVG describes it mathematically — with points, lines, curves and shapes. As a result, SVG graphics can be enlarged and shrunk to any size without losing sharpness and without increasing file weight. The format is an open standard of the W3C and is natively supported by all modern browsers.

What the SVG format is

An SVG file is essentially a text document containing drawing instructions. Because the image is described in code, it can be edited in any text editor, styled with CSS and animated with JavaScript. This is the fundamental difference from raster graphics:

• Scalability — the same graphic looks sharp on a small icon and on a large banner;
• Small weight — simple illustrations and logos take up less than their raster equivalents;
• Editability — colors, shapes and text can be changed directly in the code;
• Accessibility — SVG objects can include text descriptions read by screen readers.

The format's limitation is photographs and complex photographic images — these are better saved in raster formats such as JPEG, PNG or WebP.

Practical application

SVG is today the standard for logos, icons, charts and simple illustrations on websites. The format works well in responsive interfaces, because a single graphic serves all screen resolutions, including high-pixel-density displays. SVG is also used for interactive maps, animations and as a favicon element.

By embedding SVG directly in the HTML code, you avoid extra server requests, which speeds up page loading. However, because an SVG file can contain scripts, uploading such files from external users requires sanitizing their content to prevent XSS attacks. Used correctly, the format combines low weight, sharpness on every screen and full control over the graphic's appearance.