Animated SVG makes practical sense for interface work. The files stay small, and browsers run them without a separate player library. Production is where it gets complicated. If the design software already on your machine offers no route to an animated vector, the animation does not get made.
Yesser Afghani works independently as Conceptside, a design practice building user interfaces for websites, apps, and digital portals. This case study covers how animated SVG went from a format he had stopped attempting to a regular part of his client work, and what had to change for that to happen.
Table of contents
- The challenge: Designing interfaces with no way to have animated SVG
- The solution: An animation tool built for the format he needed
- The results: From zero animated SVGs to weekly motion work
- Final thoughts
The challenge: Designing interfaces with no way to have animated SVG
Yesser designs interfaces rather than illustrations, and that distinction shapes what he needs motion for. His work is menus, buttons, and the small moving parts of a website or app.
Before he found a tool built for the format, his animated SVG output was zero. The work was not slow or occasional, it was absent. He had spent years as an Adobe user and had tried to pull animated vectors out of Flash, and later out of Adobe Animate. In his experience, neither gave him a workable path to an animated SVG, and the other design software available to him did not offer one either.
No single deadline or client request turned this around. The frustration built up across a long stretch of attempts, until he went looking for software that treated animated SVG as its actual output instead of a workaround.
The solution: An animation tool built for the format he needed
Two things had to be true. The tool had to produce animated vectors, and the files coming out of it had to suit the way he builds and hands over sites.
SVGator handled the first part by treating animated SVG as native output rather than a conversion. The second part is what he talks about. Four things carry the work from his canvas onto a client page:
- JavaScript export, for animations that need the full range of animators and interactive triggers
- The choice between JavaScript only and CSS only, so the file matches what the build can take instead of what the tool prefers
- APNG export, for the cases where a vector file is not the right answer
- The WordPress plugin, which pulls animations from his project library into the WordPress media library with no exporting, converting, or upload restrictions in between
He names that export choice as a benefit he had not expected to care about. His sequence is short: design the interface element, animate it, pick the export format, place it on the client site.
The results: from zero animated SVGs to weekly motion work
Animated SVG was not part of what Conceptside delivered. The interfaces Yesser handed over were static, and years of trying to change that had gone nowhere. Animation now comes up four to five times a week.
An animated menu button takes him about 30 minutes to get right. He describes the workflow as easier and faster, and puts that down to two things: the JavaScript file he can export, and the WordPress plugin that carries it onto the site. Animation stopped being a separate project and became one more step in building an interface.
Clients notice. His menu animation is the piece they bring up, and the praise has been steady enough that he counts it among the things setting his interface work apart from what else is on offer.
| Before | Now | |
| Animated SVG output | None | A routine part of his client interface work |
| Tools tried for animated vectors | Flash, then Adobe Animate | SVGator |
| Route onto a live client site | No workable one | WordPress plugin, straight from his project library |
| Control over export format | No animated SVG to export | JavaScript, CSS only, or APNG |
| How often animation work happens | Not at all | Four to five times a week during active web projects |
Final thoughts
There is a version of this story where the designer decides animation belongs to somebody else and moves on. Yesser went the other way, and he did it without changing what he does for a living. He is still a designer working on interfaces. What changed is that motion is now something he produces and hands over himself.
For anyone holding a full design toolkit that still has no path to an animated vector, the interesting part is not the animation software on its own. It is what happens after the animation is finished. That is where SVGator earned a place in his stack. It hands him a web-ready file and lets him decide the form that file takes.
