I wrote a game of Tetris in JavaScript with SVG many years ago. It had nice graphics and was smoothly animated. I hadn’t heard of anyone else using SVG like that at the time.

I also made a game called Pro Office Calculator (available on Steam), which includes a Doom-style 3D engine for which I used Inkscape as my map editor. Here’s an example of a map: https://github.com/robjinman/pro_office_calc/blob/develop/da...

Fun to see how apparent boundaries can be pushed or broken with clever use of lesser known features.

That said, most of this is probably better done with CSS today.

My only professional exposure to SVG was when a pen tester found my predecessor's code had unintentionally allowed them, and that one can do injection attacks from the SVG itself. Of course this was around the time a client discovered SVG worked for them, so I had to make support official and defeat injection attacks. Good times.

This taught me that SVGs can be animated with CSS. Cool!

I wonder if anybody has recreated vector graphics games like Asteroids using SVGs and animation. You'd have to use JS to change the shape and direction of the asteroids when they're shot, but that would just require a bit of JS.

Haven't done much recently, but I do really like SVG. I did a fun project for a grid scale battery company in 2017. I generated graphical reports of battery status and health. I used a .Net extension in Sql Server to generate the graphics from the database.

A lot of ecosystem vibe seems to go to Lottie at the moment though.. does SVG cover a matching feature set? is there hope for a conversion tool?

Great article! On mobile I can't find anywhere to demo/see the animated content in action, not sure if it's desktop only or what.

i'll be a contrarian, that css and svg "hacks" like this are "impressive" are a symptom of a web-platform that is dogshit for multimedia. If a game did this nobody would even blink, the fact that it's another convoluted css hack makes it "notable".

All I want is a browser that executes WASM and displays SVG... get out out of JS/HTML hell.

Svg Tailwind combo makes hover animations easy and fun.

    <svg
        class="w-16 h-16 text-blue-500 transition-all duration-300 ease-in-out transform hover:scale-125 hover:rotate-12 hover:text-purple-600"
        fill="currentColor"
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
    >
        <circle cx="50" cy="50" r="40" />
    </svg>

svg based games, wen?