Reveal figures bit by bit

To reveal a figure bit by bit, you have mostly two options:

  • The first one is to have your figure in SVG. This way, you can add identifiers and classes to the relevant parts of the figure.

  • The other one is to have multiple version of the figure as images, and use a carousel.

Using an SVG figure

Similarly to slipshow document, an SVG image allow to add classes and ids.

This allows to display the image bit by bit just like we would do that for text in a slipshow:

<!-- file.svg contains an svg with the my-square identifier -->

![](file.svg)

{reveal=my-square}

It only remains to know how to add identifiers and classes.

In Inkscape

To add an id, select the element you want to add an identifier (it can be a group).

Then, go to the Object Properties view, accessible among other options under the Object menu.

Under Properties, you have the opportunity to change the ID for the selected object.

In order to add a class, select the CSS and selectors under the Object menu. Then, click on the bottom + named “Add a new CSS selector”. Choose .class-name where you replace the name with your own, keeping the ..

The selected object is added the class. You can see the list of elements with the class, and add some with the + button next to the class name.

By hand

If you open an SVG image with a text editor, it looks like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 10 10">
  <rect style="fill: red" width="6" height="6" x="2" y="2" />
  <rect style="fill: blue" width="2" height="2" x="8" y="8" />
</svg>

This allows you to add classes and IDs:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 10 10">
  <rect id="my-square" class="unrevealed" style="fill: red" width="6" height="6" x="2" y="2" />
  <rect style="fill: blue" width="2" height="2" x="8" y="8" />
</svg>