SVGs

SVG stands for Scalable Vector Graphics, an XML-based image format for two-dimensional graphics. Developed as a W3C standard, SVG describes graphics in a text-based vector format that scales without quality loss. The language revolves around the <svg> root element and supports shapes, paths, text, gradients, filters, and interactivity.

SVG graphics can be embedded directly in HTML, included as separate files, or used as CSS backgrounds. Being text-based, SVGs are searchable, compressible, and styleable with CSS. They can be scripted via the DOM to respond to user input, and animation can be achieved with CSS; SMIL animation exists in some browsers but is not universal.

Advantages include resolution independence, small file sizes for simple graphics, and editing ease in vector tools. As text, SVGs compress well with gzip or Brotli, and their structured markup supports accessibility and searchability when labeled and described.

Limitations include not being ideal for photographs; very complex SVGs can be heavy and taxing on CPUs. Some editors do not preserve all effects perfectly, and accessibility may require descriptive markup such as titles or aria attributes.

Common use cases include icons, logos, UI controls, charts, and scalable illustrations. SVGs can be inlined in HTML for direct styling, or loaded as resources via img, object, or iframe. Tools such as SVGO and Inkscape help reduce file size and prepare assets.

Browser support is strong among modern engines; all major browsers render SVG, with inline SVG supported for many years. For accessibility and performance, provide text alternatives and optimize files accordingly.