A picture written as code rather than stored as a grid of colored dots. Because it is code, the browser draws it fresh at whatever size it is asked for, so it stays sharp on any screen and at any zoom. An SVG is a text file in the XML family, the same family as HTML. You can open it in any editor, read it in a pull request and edit it by hand.
A Smart SVG™ is a standard SVG that carries its own decisions. Alongside the drawing it holds a palette declared as custom properties, a dark-mode block, a narrow-screen layout, high-contrast handling and its own accessible name. It is not a new format and it needs no runtime, no library and no build step. Any browser that renders SVG renders it, which means a file keeps working whether or not the service that produced it still exists.
An image stored as a grid of colored dots, one value per pixel. PNG, JPEG and WebP are raster formats. A raster image blurs when displayed larger than the size it was saved at, and it cannot change with the reader: supporting dark mode or a narrow screen means exporting another file for each condition.
Artwork described as shapes and coordinates rather than as pixels. A circle is stored as a center, a radius and a fill, so the renderer can draw it at any size without losing definition. Icons, logos, diagrams, illustrations and interface graphics are usually vector. Photographs are not, which is why they are outside what this product works on.
A named design decision, such as a color, a spacing step or a type size, stored once and referred to everywhere it is used. Tokens matter here because a graphic that reads its colors from tokens follows a brand change automatically. The alternative is a hex value copied into the artwork, which has to be found and changed by hand in every file that holds a copy.
A named value declared in a stylesheet, written as --name: value and read back with var(--name). It is how a design token becomes something the browser can use. Inside an SVG, custom properties are what let a media query change a palette without redrawing anything: the shapes reference the names, and only the values change.
A condition the browser evaluates while rendering, such as whether the reader prefers a dark color scheme or how wide the viewport is. Media queries work inside an SVG the same way they work on a page. That is the mechanism behind an adaptive graphic, and it is why the adaptation needs no script: the browser is already doing this work.
The media query that reports whether the reader has asked their operating system for a light or dark appearance. A graphic that answers it swaps its palette values rather than being replaced by a second file, so there is one asset to maintain instead of two.
The media query that reports that the reader is using a high-contrast mode, in which the operating system substitutes its own colors for the page. A graphic that answers it steps out of the way, using system color keywords such as Canvas and CanvasText so the reader gets the palette they asked for. A graphic that ignores it keeps insisting on colors the reader has explicitly overridden.
The media query that reports that the reader has asked for less animation, usually because motion causes them discomfort or makes content harder to follow. The safer way to write it is to add motion under a no-preference query rather than removing it under a reduce query, so the still version is the default and movement is the addition.
A short description of an image, written in the page markup, that assistive technology reads in place of the picture. Alt text describes what a graphic means in the context of the page it is on, which is why it should stay even when a graphic carries its own name. A decorative image takes an empty alt so it is skipped rather than announced.
The label assistive technology announces for an element. For an image it usually comes from alt text; for an SVG it can come from a title element inside the file, referenced with aria-labelledby. A name written inside the file travels with the file. A name written on the page does not, which is why the same graphic often arrives unnamed once it is reused somewhere else.
Software that reads a page aloud or renders it to a braille display, used by people who are blind or have low vision. A screen reader announces an image by its accessible name. Given none, it may read the filename or say nothing, which is why an unnamed graphic is a real failure rather than a cosmetic one.
The international guidelines for making web content usable by people with disabilities, organized into levels A, AA and AAA. Conformance is a property of a whole page and of how it is used, not of any single file. A graphic can remove a common failure without making the page around it conformant, and no tool can promise conformance on your behalf.
The set of separate exports a team accumulates for one piece of artwork: a light version, a dark version, a small-screen version, a high-contrast version. Each export is a reasonable decision on its own. Together they are copies of one design that have to be kept in agreement by hand, and the copy nobody opens is the one that goes stale.
An SVG written directly into the page markup rather than referenced with an img tag. Inlined, a graphic is part of the same document as the page, so it can read the page CSS custom properties and follow the site theme. Referenced, it is a separate document: its own media queries still work, but it cannot see the page tokens.
The attribute that defines an SVG coordinate system: the region of the drawing the browser should show. It is what lets one file scale to any size. A file with a viewBox but no fixed width or height fills whatever space it is given, which is why removing hard-coded dimensions is part of preparing a graphic.
Removing anything from an uploaded file that could execute or reach outside it, before that file is stored or displayed. An SVG is markup, so it can carry scripts, event handlers and external references. Everything uploaded here is sanitized on the way in; the styles, media queries and animation that make a graphic adaptive are kept, because they are declarative and cannot execute.