SVGFragments

A reveal.js plugin to enable SVG element fragments.

✨👉 Live demo 👈✨

Installation

Copy the repository to the plugin directory of your reveal.js installation;

reveal.js/plugin $  wget https://github.com/marceloalcocer/reveal-svgfragments/archive/main.zip
reveal.js/plugin $  unzip main.zip && rm main.zip
reveal.js/plugin $  mv reveal-svgfragments-main svgfragments
reveal.js/plugin $
reveal.js/plugin $  # …or perhaps…
reveal.js/plugin $
reveal.js/plugin $  git clone https://github.com/marceloalcocer/reveal-svgfragments.git svgfragments

Include svgfragments.js in the presentation (after reveal.js), and add SVGFragments to the plugins array when initializing Reveal;

<script src="dist/reveal.js"></script>
<script src="plugin/svgfragments/svgfragments.js"></script>
<script>
  Reveal.initialize({
    plugins: [ SVGFragments ]
  });
</script>

Usage

Include SVG documents in the presentation using <object> tags. Add child tags with class="fragment" to mark elements within the SVG file as fragments. Elements are specified using CSS selectors in the data-selector attribute;

<!-- circles.svg -->
<svg>
  <circle id="circle0" r="8.0" cy="10.0" cx="10.0" style="fill:#ff0000;"/>
  <circle id="circle1" r="8.0" cy="10.0" cx="30.0" style="fill:#00ff00;"/>
  <circle id="circle2" r="8.0" cy="10.0" cx="50.0" style="fill:#0000ff;"/>
</svg>

<!-- presentation.html -->
<object data="circles.svg" type="image/svg+xml">
  <span class="fragment" data-selector="#circle1"></span>
</object>

Fragment effects, nested fragments, and fragment indices can be used as normal;

<!-- presentation.html -->
<object data="circles.svg" type="image/svg+xml">
  <span class="fragment fade-in" data-fragment-index="2" data-selector="#circle0">
    <span class="fragment fade-out" data-fragment-index="3" data-selector="#circle0"></span>
  </span>
  <span class="fragment fade-up" data-fragment-index="1" data-selector="#circle1"></span>
  <span class="fragment fade-down" data-fragment-index="4" data-selector="#circle2"></span>
</object>

Some fragment effects (e.g. highlights) may however not apply correctly to SVG elements.