reveal.js-inline-svg

A Reveal.js plugin that includes svgs inline with the html code. This is useful in combination with reveal.js-svg-timeline-fragment, or in cases where you need to manipulate the svg as if it were any other html element.

Installation

npm i reveal.js-inline-svg

Usage

Add the plugin:

<script type="module">
  import RevealInlineSvg from "reveal.js-inline-svg";

  import Reveal from "reveal.js";

  let deck = new Reveal({
    plugins: [RevealInlineSvg],
  });
  deck.initialize();
</script>

Declare an inline svg that includes a file named image.svg:

<section>
  <inline-svg src="image.svg"></inline-svg>
</section>

Compatibility with RevealHighlight

To work correctly, this plugin needs to be passed before RevealHightlight in the plugins array when initializing Reveal.

import Reveal from "reveal.js";      
import Markdown from "reveal.js/plugin/markdown/markdown.esm.js";
import RevealHighlight from "reveal.js/plugin/highlight/highlight.esm.js";
import RevealAnimateFragments from "reveal.js-animate-fragments";

let deck = new Reveal({
  plugins: [Markdown, RevealAnimateFragments, RevealHighlight],
});
deck.initialize();