3 4 5 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

What is SVG

SVG as a vector graphics format Definition: SVG is an open format for describing two-dimensional vector graphics through XML-based text. Its name stands for Scalable Vector Graphics, it commonly uses the .svg extension, and its MIME type is image/svg+xml.

Instead of storing a fixed grid of pixels, an SVG file defines shapes, coordinates, strokes, fills, text, and transformations. This allows vector graphics to adapt to different sizes without the pixelation caused by enlarging a raster image, although complexity and file size still depend on the content.

How SVG Works

The browser interprets the document’s elements and attributes to build a graphic scene. Shapes such as rectangles, circles, lines, and paths are positioned within a coordinate system and rendered at the resolution available on each screen or printed output.

The viewBox attribute establishes the internal coordinate space, while width, height, and preserveAspectRatio affect how the graphic fits its container. Correct settings preserve proportions and make the image easier to adapt across sizes.

The SVG 2 specification defines elements for geometry, text, color, gradients, clipping, masks, and filters. The format can also include raster images, animation, or scripts, so a file with an SVG extension does not necessarily contain only simple shapes.

File Structure

SVG uses XML syntax. The root <svg> element contains the graphic objects and can group them to share styles or transformations. Common SVG elements include:

  • Basic shapes: Rectangles, circles, ellipses, lines, polylines, and polygons.
  • Paths: The <path> element describes lines and curves through a sequence of commands.
  • Text: Characters remain selectable when they have not been converted into outlines.
  • Groups: They organize objects and apply shared attributes.
  • Definitions: Gradients, symbols, patterns, masks, and other reusable resources.

Presentation can be declared through attributes or CSS. When SVG is inserted directly into HTML, its nodes become part of the document and can receive styles or interactions. When loaded through <img>, it behaves as an external image and the browser applies different restrictions.

Uses of SVG

The format is especially useful for graphics defined by geometry, flat colors, or elements that must appear at several sizes. Its common uses include:

  • Logos: Visual identities that must keep sharp edges across different media.
  • Icons: Interface symbols whose size or color may change.
  • Illustrations: Compositions built from shapes, strokes, text, and gradients.
  • Data graphics: Diagrams, maps, and visualizations with identifiable elements.
  • Animations: Attribute changes created with CSS, JavaScript, or native format features.

SVG is not the best choice for every image. A detailed photograph may require an enormous number of shapes or an embedded raster image, removing the vector advantage and potentially increasing both file size and rendering cost.

Comparison With Other Formats

The choice depends on content type, compatibility, transparency, animation, and final weight. The main differences are:

  • PNG: It represents a fixed pixel grid, preserves alpha transparency, and suits screenshots or raster graphics.
  • JPG: It compresses photographs by discarding information and does not support alpha transparency.
  • GIF: It uses a limited palette and can store simple frame-based animations.
  • WebP and AVIF: These are modern raster formats with compression, transparency, and animation options.

SVG stays sharp when its geometry is scaled, but that property does not guarantee a small file. A complex path, numerous filters, editing metadata, or embedded images can produce a heavier document than a well-prepared raster alternative.

SVG Accessibility

When SVG is used through <img>, the alt attribute supplies alternative text. An inline SVG can use <title>, <desc>, role="img", and ARIA relationships. The accessible description should reflect the graphic’s real purpose and avoid needlessly repeating nearby content.

Text kept as text is easier to select, translate, and adapt than lettering converted to paths. However, textual elements alone do not guarantee accessibility. Reading order, contrast, focus, and an understandable alternative also matter for complex visualizations.

SVG Optimization

Optimizing SVG means removing unnecessary information without changing the result or discarding useful semantics. Recommended optimization steps include:

  • Clean metadata: Remove editor data, comments, and unused definitions.
  • Simplify paths: Reduce nodes and decimal precision when the visible shape does not change.
  • Reuse elements: Define shared symbols, styles, or resources instead of duplicating them.
  • Keep viewBox: Preserve a coordinate system that lets the graphic adapt.
  • Compress transfer: Minify the text and apply HTTP compression when appropriate.

File size should be assessed together with rendering time and context. In WPO, a lightweight SVG may avoid raster variants, while a complex scene may require more processing. Any third-party file should also be sanitized first, because the format can contain scripts, links, or external references depending on how it is loaded.

Related Terms