Show HN: Doom Inside an SVG
chrisdalke.com
I got nerd sniped by a tweet talking about JavaScript in SVG, and set out to find out if I could run DOOM inside an image. And it works, with some caveats.
This is technically an SVG that plays DOOM, including audio and interactivity. Pretty cool, although I'm not sure who had the bright idea to allow Javascript in SVG...
The SVG is just using <foreignObject> to create an HMTL namespace, creating a canvas, and then running js-dos / DOSBox in the canvas.
The big caveat, probably a good thing, is that JavaScript in SVG only works if you load the SVG directly and not inside an <img>, since browsers block this as an XSS prevention.
So this is not portable and can't be embedded in a webpage, but I guess was a fun use of a few hours...
> Pretty cool, although I'm not sure who had the bright idea to allow Javascript in SVG...
Is the decision making process public and transparent? Can we find out what committee made the decision, and when? Who the members were and their individual votes?
Yes. It's a W3C specification.
That said, the original 2001 version of the spec includes scripting https://www.w3.org/TR/2001/REC-SVG-20010904/REC-SVG-20010904... - so some decisions may be lost to time.
My understanding was one of the goals for SVG+JS was an intentional need/desire to replace SMIL: https://en.wikipedia.org/wiki/Synchronized_Multimedia_Integr...
"Lost" standards can be fun rabbit holes sometimes.
A developer who worked on the webkit SVG implementation went into some of the history in a HN comment: https://news.ycombinator.com/item?id=39082633
Wow that comment is super detailed, thanks for linking that.
“ IIRC the end solution that every browser went for was to just say "screw this" and drop most SVG features from SVGs loaded through image elements.”
I was on the Adobe SVG implementation QA team, focused on the javascript testing. I think that comment got some stuff wrong.
Critically, SVG became a W3C recommendation in 2001, but Macromedia wasn't acquired by Adobe until 2005.
W3C was interested in SVG because they wanted a vector image format. They included some stuff for animation, but it was all key-frame based, not scripted. But Adobe was interested in it because they saw it as a way to challenge Flash. So Adobe pushed for the Javascript stuff hard. This was also long before the current browser implementations. Remember that Google Chrome didn't come out until 2008. SVG was supported via a browser plugin you had to install, so if you want any sort of script interaction is needed to be baked into the SVG file itself.
After SVG launched there wan't a huge amount of uptake. Mostly because it was a plugin you had to install. It was also early days on the web, and I distinctly remember members of the working group being flabbergasted that you could generate SVG on the fly, despite the fact that it is just text. So there was clearly a gap between what it could handle and what people thought it could handle. We had evangelists at Adobe, but they could really only do so much.
Adobe saw three key differences between Flash and SVG that they thought would win:
- Flash was frame-based, SVG is all time based. SVG may drop frames, but it could stay in sync with audio. Flash would slow down, stutter, and de-sync if your PC couldn't handle it.
- Flash was a closed standard that required expensive tools to generate, SVG was an open standard with a text format that anyone could generate. Illustrator was able to export to SVG from day one, and Illustrator was not cheap, but it wasn't required.
- Flash is raster, SVG is vector. The vectors are nice for zooming and all, but people didn't really do that.
There were other benefits, like Flash using a proprietary language while SVG used Javascript.
After a few years Adobe saw that SVG wasn't going to be the Flash killer they had hoped for and opted to purchase Macromedia. Personally I think having to install the plugin was too onerous for users, so Flash just had the first mover / incumbent advantage.
TL;DR - They had to include scripting to make SVG interactive because of browser technology of the time and to challenge Flash.
> Flash is raster, SVG is vector.
That seems wrong. Having made Flash content in the early 2000's, the drawing tools in the software were all vector-based, and vector-based animation was everyone's go-to since frame-by-frame raster would have resulted in too large an SWF file for the Internet of the time. You could animate bitmap objects also, but they were usually used sparingly, and anyways SVG allows that too.
Wikipedia also identifies SWF as a vector format: https://en.wikipedia.org/wiki/SWF
Ah, mis-remembered that part. Maybe I was under that impression because the clean zoom wasn't something that was exposed to the end-user. Early SVG plugins made zoom and pan part of their UI so it was a little more obvious.
Heh, first the ZMachine runs under a PostScript file with the GhostScript interpreter, now this.
But this is a bit of cheating, because it's spawning HTML+JS inside a SVG as a foreign interface in a browser.
zmachine.ps has the whole interpreter in the PS file itself, as it's a Turing Complete language. Yes, you can play Zork on it.
one word, exceptional. Kudos for just thinking that. Doom is a classic and deserves this.
For me, this works on iPhone after tapping the svg and waiting a bit. It runs through a demo in this mode (since there is no mouse or keyboard) and is very impressive! It includes sound as well!
Crazy idea, i like it