SVG

SVG stands for Scalable Vector Graphics. It is a vector image format used to display two-dimensional graphics on websites and in applications. SVG files describe shapes, lines, colors, text, and other elements through code based on XML.

Unlike raster images such as JPG, PNG, and WebP, an SVG image is not composed solely of a fixed grid of pixels. It can therefore be enlarged or reduced without losing sharpness.

How does SVG work?

An SVG file contains instructions describing the individual elements of an image. These may include:

• lines and curves;
• rectangles, circles, and polygons;
• fills, strokes, and gradients;
• text;
• masks, filters, and effects;
• embedded raster images.

A browser reads the SVG markup and uses it to render the image. A simple symbol, for example, may consist of only a few elements defining its shape, position, and color.

What is SVG used for?

SVG is particularly suitable for graphics built from simple or geometric elements. It is commonly used for:

• logos and brand marks;
• icons and pictograms;
• vector illustrations;
• charts and diagrams;
• maps and technical drawings;
• interface elements;
• simple animations;
• decorative shapes and backgrounds.

SVG is usually not the best choice for photographs or images containing a very high level of detail. Raster formats such as JPG, PNG, or WebP are generally more appropriate for this type of content.

Advantages of SVG

The main advantages of SVG include:

• scaling without a loss of quality;
• sharp rendering on screens with different pixel densities;
• often small file sizes for simple graphics;
• the ability to edit individual elements or their properties;
• support in modern web browsers;
• the ability to modify colors and other properties with CSS;
• support for animation and interaction;
• effective use in responsive web design.

An SVG file is not always smaller than a raster image. A highly complex illustration containing thousands of points, paths, or effects may require considerable storage and processing resources.

How can SVG be added to a website?

An SVG graphic can be added to a website in several ways. One of the simplest methods is to use the file as the source of an <img> element:

<img src="/images/logo.svg" alt="Company name">

SVG can also be used as a CSS background, embedded with an <object> element, or placed directly in HTML as an <svg> element.

Adding SVG markup directly to a document makes it easier to modify individual elements with CSS and JavaScript. Using an external file in an <img> element keeps the page markup simpler and may allow the browser to reuse a cached copy of the image.

SVG vs. PNG, JPG, and WebP

SVG is a vector format, while PNG, JPG, and WebP are commonly used for raster graphics. The appropriate format depends on the type of image and how it will be used.

• SVG is well suited to logos, icons, charts, and simple illustrations;
• PNG is useful for raster graphics that require transparency or lossless quality;
• JPG is commonly used for photographs and images containing many colors;
• WebP can provide efficient compression for photographs and other raster images.

Converting a photograph to SVG generally offers little benefit. It may produce a highly complex file that is neither smaller nor easier to render.

Can SVG be interactive?

SVG elements can respond to user actions and be modified with CSS or JavaScript. This makes it possible to create animated icons, interactive maps, charts, indicators, and other dynamic interface components.

The available options depend on how the graphic is embedded. SVG markup placed directly in HTML generally provides more control over individual elements than an external file displayed as a standard image.

SVG accessibility

A meaningful SVG graphic should have a text alternative that communicates its purpose or content. When the file is embedded with an <img> element, an appropriate alt attribute should be provided. A decorative graphic should be ignored by assistive technologies, for example by using an empty alt="" attribute.

An SVG placed directly in HTML may require an appropriate role and accessible name. If the graphic contains text that is important to the user, the image should not be the only way that information is communicated.

SVG security

SVG is a code-based document format that can support scripts, links, and external resources. A file from an untrusted source may therefore create a security risk if it is published without appropriate validation.

SVG code should be inspected and sanitized before being added to a website. For this reason, some content management systems restrict SVG uploads by default. Secure SVG handling should remove prohibited elements and attributes rather than relying only on the file extension.