Learn how Craig Stevenson, founder and director at Arck Learning, replaced heavy GIFs and JavaScript-dependent animations with CSS-based SVGs, reducing production time by 80% while improving course performance across devices.
This change was driven by a clear operational need. Working within accepted graphic and file-type limitations required an animation approach that stayed visually crisp, technically dependable, and efficient to produce at scale.
Table Of Contents
The Challenge: Creating High-Quality Animations For eLearning
The solution: A CSS-based SVG animation editor
The results: Better performance & 80% time reduction
The Challenge: Creating High-Quality Animations For eLearning
Arck Learning specializes in custom eLearning development for corporate training environments, where learner experience must balance visual clarity, performance, and the technical constraints of the authoring tool being used. Animation is applied intentionally rather than decoratively, serving to guide attention, reinforce concepts, and add subtle visual clarity within those tool-specific limitations.
The challenge was finding a way to do this efficiently without compromising compatibility, load times, or visual quality.
Craig’s primary authoring tool, Intellum Evolve, does not accept JavaScript-based animations as standard graphic files. Many typical animation workflows, such as After Effects combined with Lottie exports, rely on JavaScript, which cannot be added directly. While Lotties can be embedded via an iframe, this approach is not ideal for layout or responsiveness.
As a result, GIFs were often used as a fallback. While simple to implement, they introduced multiple issues. File sizes were large, animations felt clunky, and visuals frequently pixelated on larger or high-resolution screens. These drawbacks directly affected course performance and learner experience, especially for users on slower connections.
The production process itself was also inefficient. Craig is not a dedicated motion designer and uses animation as a supporting element, not a core deliverable. Even simple animations could take anywhere from an hour to a full day to design, build, and export cleanly.
Multiple tools and conversion steps created unnecessary friction and slowed down course development. Testing and adjusting animations required repeated exports and trial and error, further stretching timelines.
The solution: A CSS-based SVG animation editor
Craig needed a way to create animated SVGs that could be exported as CSS, remain lightweight, and work reliably inside Intellum Evolve. SVGator provided a solution that matched both technical constraints and creative needs.
With SVGator, static vectors can be designed in Illustrator or created directly inside the tool, then animated using a visual timeline without writing code. The animations export as clean, CSS-based SVGs, ensuring compatibility with the accepted file types of the authoring tool.
This workflow eliminated the need for players, scripts, or workaround solutions. It also made experimentation easier. Animations can be previewed instantly, timing adjusted quickly, and ideas refined without breaking course builds or restarting the process. SVGator fits naturally into Craig’s existing toolchain rather than forcing a new one.
The results: Better performance & 80% time reduction
Faster production
The time savings were immediate and measurable. Animations that previously took hours could now be completed in minutes. Simple animated elements typically take 5 to 15 minutes, while more complex pieces take around 20 to 30 minutes. Overall, this represents a 70 to 90 percent reduction in animation production time.
Lightweight animations
Performance also improved significantly. SVG animations are extremely lightweight compared to GIFs, load quickly, and remain crisp at any screen size. Courses feel smoother and more responsive, with no pixelation on large displays and no unnecessary strain on bandwidth.
The unexpected benefits
Additional benefits emerged in day-to-day workflow. Iteration is fast and low risk, making it easy to explore motion ideas, adjust timing, and refine animations with confidence.
| Feature | Advantage | Benefit |
| CSS-based SVG export | No JavaScript and no dependencies | Works seamlessly in platforms like Intellum Evolve without technical workarounds |
| Visual timeline editor | Create and adjust animations without code | Experiment and iterate in minutes instead of hours, enabling faster feedback and more confident design decisions |
| Vector-based output | Resolution-independent, tiny file sizes | Courses load faster on any device, and animations stay crisp on any screen size |
| Direct Illustrator integration | No conversion steps between tools | Streamlined workflow from design to deployment with fewer points of friction |
Final thoughts
For eLearning teams working within technical constraints, animation often feels like a tradeoff between creativity and technical reliability. SVGator removes that tension.
By enabling lightweight, CSS-based SVG animations without JavaScript dependencies, SVGator makes it possible to enhance learning experiences while improving performance and reducing production time.
