SVG is an image format that describes shapes with text code (of the XML kind). The browser reads this code and draws the image. Because it is vector, it looks perfectly sharp on any display, even on phones with a high pixel density.

A simple sample#

Code
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1E88E5" />
</svg>

These few lines draw a blue circle. You can open this same file in a text editor and edit it.

Advantages#

  • Sharp at any size: good for logos and icons
  • Small size: usually a few kilobytes
  • Changeable with CSS: color, size and even animation
  • Searchable: the text inside it can be read

Limitations#

  • Not suitable for photos
  • A complex file with a thousand paths may get heavy
  • An unknown SVG file can contain malicious code; do not upload one from an untrusted source to your site

Where it is used#

Site icons, a site's logo, charts, light animations and simple illustration. If your WordPress theme has sharp icons, they are probably SVG.

A note#

In WordPress, for security, uploading SVG directly is blocked by default, and to enable it you usually use a plugin that sanitizes the files.