What is SVG? A plain-English guide

SVG stands for Scalable Vector Graphics. It is an XML-based image format that describes shapes mathematically: using points, paths, and curves: instead of as a grid of colored pixels. That means an SVG file scales to any size without quality loss, from a 16-pixel favicon to a billboard.

  • How SVG works: An SVG file is a plain text file that describes shapes using elements like <path>, <rect>, <circle>, <text>, and <polygon>. Each shape has attributes for fill color, stroke color, stroke width, and transform. Browsers and design tools render the file at any size by recomputing the shape geometry.
  • When to use SVG: SVG is the right choice for logos, icons, illustrations, charts, and any other artwork that needs to scale or be edited. It is not designed for photographs, JPG or WebP is better for those.
  • Logos and brand marks
  • Icons and UI elements
  • Illustrations and infographics
  • Charts, diagrams, and dashboards
  • Anything that needs to scale crisply
  • SVG vs PNG vs JPG: PNG and JPG are raster (pixel-based) formats with fixed resolution. Scale them up and they pixelate. SVG is vector (math-based) and scales without quality loss. PNG supports transparency. JPG is best for photos due to better compression on natural imagery.
  • Editing SVG: Because SVG is plain text, you can edit it in any code editor. For visual editing, Illustrator, Inkscape, Affinity Designer, and Vectify's built-in browser editor all open and edit SVG natively.