SVG
SVG is a file format for images that doesn't store the graphic as a grid of dots, but as a set of construction instructions made of lines, curves, and shapes. This means an SVG stays razor-sharp at any size and can be edited like text.
A normal photo consists of millions of tiny colored dots. If you zoom in far enough, you can see these dots as blocky squares. SVG takes a different approach. The file doesn’t store dots, but a description: a circle with this center point, a line from here to there, this area in red. When displaying the image, the program freshly converts this description into pixels, matching the desired size. That’s why an SVG stays sharp whether it’s shown as a tiny icon on a phone or printed as a poster. The abbreviation stands for Scalable Vector Graphics.
Why logos are almost always provided as SVG
A company logo has to work on a business card and on the side of a building. With a pixel grid, you’d need many versions at different resolutions for that. One SVG is enough for all cases. That’s exactly why companies now deliver their logos and icons in this format by default.
Then there’s file size. A simple icon made of twenty lines often only needs a few kilobytes as an SVG. The same graphic as a high-resolution bitmap image can easily be a hundred times larger. On websites with dozens of icons, that makes a noticeable difference in loading time.
A third point is accessibility. Because individual components within an SVG can be named, screen readers for blind users can read the description aloud. A pixel grid, by contrast, is just an opaque surface to such programs.
Text instead of pixels: what’s inside the file
If you open an SVG in a text editor, you see readable code. It’s written in the same language family as web pages themselves. A line might read: draw a circle with radius 50 at position 100, 100, filled in blue. The browser reads these instructions and draws the image.
The most important building block is called a path. A path is a sequence of points connected by straight segments or curved arcs. Any shape can be assembled from paths, even complicated letters or maps. Colors, line thicknesses, and transparency are specified separately as properties.
Because the whole thing is text, it can be edited afterward. A program can change an icon’s color via a command without redrawing the graphic. Movements can also be defined, such as a loading circle that spins. The downside of this openness: an SVG is allowed to contain program code. That’s why reputable websites check uploaded SVG files before displaying them.
From website icons to AI image generators
In everyday life, you usually encounter SVG without noticing. Almost every icon on a modern website is one: the magnifying glass icon for search, the shopping cart icon, the country flags in the language menu. The charts in online articles about stock prices are also often SVGs, since they stay sharp when zoomed in.
In design programs like Figma or Inkscape, SVG is the standard exchange format. Anyone who wants to move a graphic from one program to another exports it as SVG. For photos, however, the format isn’t suitable. A face isn’t made up of clear shapes, but of subtle color gradients. For that, formats like JPEG or PNG remain the right choice.
In the AI world, SVG has been showing up for some time in tests for language models. A model is asked to write the code for an image, say a bicycle or a unicorn. Because the model isn’t painting but formulating instructions, this reveals whether it truly understands spatial relationships. Early models produced bicycles with wheels in the wrong place. The task is now considered a popular benchmark for progress.