A SmartSVG™ is built in six layers. Your artwork goes in, and what comes back is one file that already knows what to do in dark mode, on a narrow screen, under high contrast, and in front of a screen reader.
Here is the whole path at a glance, and then each layer in turn.
The six layers
1
Asset ingestion
One file, or the set of variants you already ship, arrives through the web app or the API. Logos, icons, illustrations and interface graphics are all in scope. Photographs are not, because a photograph is pixels all the way down and there is no geometry to recover.
2
Processing pipeline
Every file is checked, cleaned and queued. Anything that could execute is removed before the file goes any further. A graphic has no business running code, and the safest way to guarantee that is to make sure the code never survives the door.
3
SVG transformation
The artwork is rebuilt as scalable geometry. Editor metadata, unused definitions and coordinates carried to more decimal places than any screen can show are dropped. What is left is the drawing and the logic that adapts it.
4
Accessibility
A readable name and description are written inside the file, so they travel with it. The same graphic reused on another page arrives already named, instead of arriving unnamed and waiting for someone to remember.
5
Adaptive rendering
Colour, contrast and layout rules for light and dark mode, narrow screens and high contrast are carried in the file as declarative CSS the browser already understands. Nothing is computed at run time, because nothing needs to be.
6
Delivery and API
One file comes back, ready to drop into any site or app. No runtime, no library, nothing to keep in sync. It is a text file, so it reviews in a pull request like the rest of your code.