SVG

w3.org

XML-based vector graphics format for scalable icons, illustrations, and web imagery.

Overview

SVG 2 is the W3C specification that defines Scalable Vector Graphics, a language for describing two-dimensional graphics using XML. It supports vector shapes, images, text, transformations, clipping, masking, and filter effects, making it suitable for both static and interactive graphical content.

SVG content can be styled with CSS, animated declaratively or via scripting, and integrated with HTML or other XML documents. The specification defines multiple processing modes—from fully interactive to secure static—to accommodate different use cases, from web applications to embedded images and print documents.

The language provides a rich DOM interface for programmatic access and supports accessibility features, internationalization, and Web platform integration, enabling sophisticated interactive and dynamic graphics applications.

Key features

  • Vector shapes and paths
  • CSS styling support
  • Declarative and script-based animation
  • DOM and JavaScript integration
  • Clipping and masking
  • Filter effects and transformations
  • Text rendering
  • Raster image embedding
  • Multiple processing modes
  • Accessibility features
Pros
  • Scalable to any resolution without quality loss
  • Native web standard with broad browser support
  • Integrates seamlessly with HTML and CSS
  • Full programmatic control via DOM and JavaScript
  • Supports both static and interactive content
  • Excellent accessibility support with ARIA
Cons
  • Steeper learning curve than simple image formats
  • Can be verbose for complex graphics
  • Performance may degrade with very large or complex documents
  • Not ideal for photorealistic imagery
Use this if
You need to create scalable, resolution-independent graphics for web or print; want native browser support without external dependencies; need interactive or animated graphics with full DOM control; or require accessible graphical content.
Skip this if
You need photorealistic imagery, prefer simple raster formats, or require graphics that don't need to scale across different resolutions.

Best for

Creating scalable vector graphicsWeb-based interactive graphicsAnimated graphics and illustrationsEmbedded graphics in HTML documentsPrint-ready vector contentAccessible graphical presentations

Alternatives

Canvas (HTML5)WebGLPDFAdobe Illustrator (proprietary format)Inkscape (open-source editor)

Compare SVG alternatives

More Design

Compare all
View Canva
CanvaSponsored

Online design and publishing tool for social, presentations, video, and docs.

View Aura Build
Aura Build

AI tool to create design systems and UI components from text or brand guidelines.

View LottieFiles
LottieFiles

Platform for discovering, editing, and shipping lightweight Lottie motion graphics.

View Experience Platform
Experience Platform

Tool in the design tools & developer tools space.