Everyone else ships variants: a light logo and a dark one, a full lockup and a small-screen mark. A Smart SVG™ is one file that already contains those decisions.
It carries the colors for light and dark mode, a layout for a narrow screen, high-contrast handling and the name a screen reader needs. No runtime, no library, nothing to keep in sync.
An SVG is a picture written as code rather than stored as a grid of colored dots. Because it is code, a browser draws it fresh at whatever size it is asked for so it stays crisp on any screen.
Most SVGs stop there. A Smart SVG™ carries logic as well as shapes and responds to the reader’s settings by itself.
Icons, illustrations, interface components, and the rest of the artwork your interface depends on. Most of it still ships as a static file: storage, bandwidth and energy you do not need, duplicate variants to keep in sync, and often nothing meaningful for blind and low-vision readers. That is the work a Smart SVG™ takes on.
Light and dark colors, a narrow-screen layout and high-contrast handling are all inside one file, written in CSS the browser already supports. No runtime, no library, nothing to configure.
A title and description travel with the graphic instead of being supplied by whatever page it lands on so the name survives being reused somewhere else.
A Smart SVG™ is usually smaller than the set of variants it replaces and there is nothing left to keep in sync when the brand changes.
A design tool exports more than you drew: editor metadata, definitions nothing references, coordinates carried to more decimal places than a screen can show. None of it renders. All of it downloads.
Equivalent strips out the unnecessary parts when it converts your file to a Smart SVG™. What comes back is the scalable asset, the logic that adapts it, and none of the bloat that was weighing it down.
A Smart SVG™ is the same standard SVG any browser already renders. The intelligence is inside it. If our service disappeared tomorrow, every file we have produced would keep working.
It is a text file, not a binary. The format is XML, the same family as HTML, so you can open it in any editor, read the diff in a pull request, and edit it by hand. A PNG offers none of that.
Because it is code, it travels the way your code does. The same file drops into React, Next.js, Vue, Svelte, Angular, Astro, Nuxt, Hugo, Jekyll, Eleventy, Gatsby or Zola, and there is a working sample for every one of them.
And because its colors are tokens rather than values baked into the artwork, a palette change reaches it the same way it reaches the rest of your interface. Designers stay in tokens, developers stay in code, and the handoff stops being the place things break.
There is a free account to start on, and a paid plan that lifts its limits and adds API access. Either way, the files we learn most from are the awkward ones: the intricate illustration, the icon set nobody has touched in three years, the diagram with more layers than it needs.
Test it, try to break it, and tell us what happened. Every report goes on our public board, and the things people find are what we fix next.
Tell us what you are building and what you need your graphics to do. Questions about the beta, the API, or whether a Smart SVG™ fits your stack are all welcome.