Reveal.js: SVG animation

[hadim]

I build a lot of SVG files with Inkscape to display figures inside reveal.js slides. I wonder to know if there is a way to animate these SVG ?

For example I would like to display a group in the SVG file first and then display another group by pressing "space" or "right arrow".

Thank you

[hadim]

Probably related to #1239

[flying-sheep]

check out what i did in my reveal-template project.

if you don’t want to use the whole thing (although i’m pretty fond of it), just use the code as plugin or inline (you’ll have to run it though e.g. babel first, though, since it’s ES6).

as the comment at the top explains, it accepts <svg data-src="images/test.svg"></svg>-style SVGs that will be embedded inline into the document. (the second part is about making class="stretch" work with those SVGs)

if you use inkscape’s XML edior to add class="fragment" to <g/>s or other SVG elements, they will behave like expected when embedded that way.

[hadim]

That seems to fit exactly my needs !!!!

Unfortunately I am really bad with JS and I only want the code inside data-src-svg.js, but when I add it to index.html and call loadDataSrcSVG();, I have an error Uncaught ReferenceError: loadDataSrcSVG is not defined(anonymous function) @ index.html:405.

Could you help me with that ?

[hadim]

How it handles when there is multiple fragments in the same svg file ?

[flying-sheep]

about your second question: multiple fragments are handled fine :)

and about the first: it’s unfortunately a bit involved to get it to work without some other stuff.

1. you’ll need to run babel on it. copy the code on the right
2. it needs a polyfill for _Promise_
3. it needs a polyfill for _fetch_ (called “whatwg-fetch-polyfill” or so)

[hadim]

Thanks !

I don't really understand why you need to compile javascript to have another javascript code but whatever :-)

And last, what is a polyfill ? Is that a kind of JS plugin I need to include inside my presentation ?

[flying-sheep]

I don't really understand why you need to compile javascript to have another javascript code but whatever :-)

haha, it’s new JS to older JS. you see those lets and =>? most browsers can’t handle them yet, so babel converts it.

what is a polyfill ?

it’s simply a script that you include which makes new APIs available to for all browsers.

here’s es6-promise, which makes new Promise and Promise.all(...) and so on work, and here is fetch, which makes fetch(...) work.

[hadim]

Thank you very much @flying-sheep. I finally decided to setup your whole system just to have svg fragment working :-)

And it works really great !!!!!

[flying-sheep]

haha great, thanks! you get how it works?

you just run gulp and while it’s running you edit the index.html, src/index.js and src/index.scss files, and it will automatically refresh your browser once you save changes.

[ghost]

Hi,
sorry, but it seems i'm the noob here, and i don't really get how it works.

you'll have to load the js in the script in the html.

and then to insert the figure.

and then class=fragment needs to be added in the svg file.

But i don't get how you can do a 'two step' animation.
lets say layer 1 has to be there from the start. layer 2 come up after the first 'click', layer 3 goes over that with the next click, and layer 4 appears with yet another 'click' and layer 2 should then dissappear.
how do you define the order of the layers? is that the order of appearence in the xml?
is it possible to remove a layer again?

or is all of this just bad practice?

[flying-sheep]

that’s a bit more complicated, and has nothing to do with SVGs, but with how fragments work in reveal.js

you’ll have to use this information.

for SVGs that maybe means nested groups (<g class="fragment"><g class="fragment">...</g></g>)

[ghost]

owkay. So If i understood right the only thing i need to do is then add the data-src-svg.js file to my dependecies iin the end of the reveal.js stuff:
{ src: 'fill:///Path/to/src/data-src-svg.js', async: false },; }

and use

but that doens't seem to work...

[flying-sheep]

what does fill:// mean? and no, you’ll need a bit more.

you’ll need this version of it, and you’ll need a fetch polyfill.

[ghost]

Hi,
Just to complete:
I didn't got this stuff to work, but like i said, that is probably due to my own lack of knowledge.

however I got this going:

<svg viewBox="0 0 500 400">
  <svg class="fragment" data-fragment-index="2" viewBox="0 0 500 400">
    <use xlink:href="images/drawing_plain.svg#layer1">
  </svg>
  <svg class="fragment" data-fragment-index="1" viewBox="0 0 500 400">
    <use xlink:href="images/drawing_plain.svg#layer3">
  </svg>
  <svg class="fragment" data-fragment-index="2" viewBox="0 0 500 400">
    <use xlink:href="images/drawing_plain.svg#layer2">
  </svg>
</svg>

with in the svg the ids set to layer1, layer2, layer3.
i suppose you could even use css with this?
I should also check whether there is a difference between using or
the viewBox is important in order to overlay the layer in the right position

[flying-sheep]

i didn’t think of that. glad that it works for you!

[rajgoel]

Hi, I just added a link to a small plugin for svg animation that might be of interest: https://github.com/hakimel/reveal.js/issues/1239#issuecomment-121765373, but above solution looks also very interesting

[pacharanero]

@ilpepe thanks for your solution, which works best for me out of the solutions described in this thread and others for SVG animation, and I think is perhaps the solution that fits best with a natural workflow for image creation in Inkscape.
So we have this workaround for now, but @hakimel do you think reveal.js might eventually support stepping through the layers of an SVG more 'natively' - eg without having to specify viewbox details? Images are one are where Reveal.js is behind other presentation tools, this is one way to advance that issue.

Something like <svg class="fragment" svg-data="img/file.svg" svg-layer="1"><\svg>. I'd submit a PR but my JS is nowhere near good enough.

[alanafoleykeane]

Hi, I am trying to animate my SVGs so when we are on the present slide the animation begins.

I have inserted my animations like this: <img data-src="pres-assets/svg/03-clip.svg" style="height: 89%; width: 67%;" />

However the viewDistance: 5 is loading the slides before hand and setting them to display: none - which means my SVG animation have already ran before the slide becomes .present.

Has anyone found a workaround for this please?

Note: _All my CSS animation keyframes are saved within each SVG file and then inserted as an img in my html._

[pres-luca]

I'm not sure if anyone will even discover this thread again since it's so old, but I have the exact same problem as @hadim : I want to show elements of a slide only after I clicked forward or space or anything. I tried @flying-sheep 's script but the svg doesn't even show up. I can only display the file when I don't use the <img> tag which then makes the data-src-svg not work again. I thought I'd try the reveal.js plugin "anything" but although it seems to support what I am planning I can't get it to work since it has no documentation at all.

[flying-sheep]

but the…?

If you have a <svg data-src="https://a.working/url.svg"></svg> and your SVG file contains elements with class="fragment" it should work. If it doesn’t, I need to see error messages to be able to help you.

[pres-luca]

@flying-sheep That <img> somehow made the rest of my comment invisible when rendered, I'm sorry & I fixed it now.
My problem is that the <svg> tags seem to be not working at all. I used the exact line you quoted with multiple svg files but none of them is showing in reveal.js at all. I don't even think that has got anything to do with your program but I don't really know where else to ask. I am writing my presentation in markdown by the way, don't know if that makes any difference since inline html worked flawlessly for me until now.
So no error messages at all, just no visible svg in my presentation. Thank you though for answering so quick.

[flying-sheep]

Sure. Well, it doesn’t work if the fetch fails which should appear in the logs …

[pres-luca]

@flying-sheep Sorry but I'm not entirely sure where I can find those logs. If that helps: The terminal window in which I ran npm start to start the server shows no errors, only the times I changed my markdown presentation file.

[flying-sheep]

The network tab of your browser’s devtools will tell you if the SVGs are successfully being loaded.

[pres-luca]

@flying-sheep Ok so I checked this and there isn't a svg showing up at all. What I noticed tho is that there are errors in data-src-svg.js and also in the anything plugin. I removed those plugins then but the SVG still doesn't appear.