Hacker News new | ask | show | jobs
by TheZenPsycho 4347 days ago
as I've commented before, SVG fits pretty much all those criteria:

- works inside an <img> tag

- works in background: url()

- supports both smil animation and css animation

- supported back to IE10 (with css animations)

- plays automatically in a loop with no play controls

- can embed jpegs, pngs, videos as videostrips or diff images

- can apply alpha transparency via a mask operation

- flexible enough to apply a wide variety of compression techniques including multiple update regions (where gif only supports one rect per frame)

- Controllable via javascript (as long as you trade off putting it in an img tag and use an object tag instead)

previous comments here: https://news.ycombinator.com/item?id=8038838

all that's missing is widely available software to author SVG animations.

2 comments

A major use-case is to efficiently play a clip from a video camera, so purely vector animation or a sequence of frames from still images isn't good enough.

I've tested an SVG with an <svg:video> element (http://www.w3.org/TR/SVGTiny12/multimedia.html#restrictedVid...), but unfortunately it doesn't seem to be supported anywhere.

I've also tested an SVG playing video via HTML in a <foreignObject>. In Firefox it does play when the SVG is opened as a standalone file, but not when embedded in <img src>. So close :(

sequence of still images from jpeg frames is still an improvement over gif for that usecase. Plus, all the same optimisations (and more) that have been available to gif for that use case are also available to SVG. Just not in any authoring software.
This, imo, represents a fundamental misunderstanding of the typical use case.

If posting the image on a typical forum requires more than some sort of [img]http://foohost.com/23452t23t.baz[/img] it's a non-starter.

Yes. SVG works in that use case.

with animations.

it does.

I misunderstood nothing.

behold:

http://www.zenpsycho.com/squirrelrun.html

"svg with css animations img tag " and the object tag ones are the only SVG-based ones that worked for me.

Still, that's awesome. Need a simple "animated gif to animated jpeg (svg)" converter tool.

I think I am having issues with http headers on my server, making not the best impression.
The SVG inside an <img> tag doesn't animate under Firefox for me.
The video one or the css animations one?
The video one doesn't seem to load for me. The CSS animation one works fine when I view it alone, but isn't animated when embedded in the web page.
hmm I may have to iron out some bugs.