Slidie Guided Tour

This document provides a very high-level guided tour of many of Slidie’s main features, with links to more in-depth documentation.

Part 0: Creating slides

Lets start by creating some very simple slides. This is as easy as creating slide-shaped SVGs using Inkscape.

A 1920×1080 pixel page size works well for slides and can be set in the ‘Document Properties’ panel (found in the ‘File’ menu).

Since slides are usually intended for screen display it makes sense to switch the default display units to pixels too.

The document properties panel with 1920×1080 pixel size and pixel units set.

Each SVG file’s name must begin with a number which controls the order in which the slides will be included in the show. For example, you might name your files like:

  • 100 - Title.svg

  • 200 - Overview.svg

  • 1400 - Conclusions.svg

Part 1: Rendering slides

To render your directory full of SVG files into a slide show, use the slidie command:

$ cd path/to/slides/
$ slidie

By default, Slidie will build the slides in the current directory into a standalone XHTML file called out.xhtml. This can be opened directly in your web browser (no server required). Slidie XHTML files are completely self-contained and can be distributed independently of the source SVG files.

The XHTML viewer showing an example presentation.

You can override the output filename using the --output/-o argument:

$ slidie --output my_presentation.xhtml

Slidie can also render your slides as a PDF: just specify a .pdf filename:

$ slidie --output out.pdf

In general, the XHTML format supports more features (e.g. videos and presenter view) whilst the PDF format is more useful as a distribution or archival format.

See also

Supported output formats

For a comparison of all supported output formats.

The Slidie XHTML Viewer

For more details on the functionality of the XHTML viewer application.

Part 2: Reordering slides

Using BASIC-style numbers for your slides (e.g. incrementing the number by 10 or 100) makes it easier to reorder slides by renumbering them. For example, given the following:

  • 100 - a.svg

  • 200 - b.svg

  • 300 - c.svg

You can move the slide ‘C’ in-between ‘A’ and ‘B’ by renumbering it to 150.

To make this process easier, Slidie includes the slidie-mv command. You could achieve the same reordering as the example above using:

$ slidie-mv "300 - c.svg" --before "200 - b.svg"

You can alternatively use --after <slide>, --start or --end to specify the target location. You can also move several slides in one go.

If necessary, slidie-mv command will automatically rename a minimal number of adjacent slides if no gap in the numbering is available.

See also

Slidie file numbering/naming rules

For more slide numbering suggestions and rules.

slidie-mv: Slide renumbering tool

Full command usage reference.

Part 3: Building up slides step-by-step

Sometimes it is useful to build up the displayed contents of a slide over several steps. Slidie allows you to reveal (or hide) layers step-by-step by adding special annotations to layer names.

The simplest type of annotation looks like <1> or <2-4> and indicates that the layer should be visible only during step 1 or steps 2, 3 and 4 (respectively). The screenshot below shows an example SVG which specifies a slide where different layers are displayed at different points in time:

Screenshot of Inkscape with layers containing Slidie build specifications

The resulting four steps are shown below.

The resulting slides produced by the previous example.

In this example, the layer named ‘Arrows <1->’ only becomes visible from step one (note that the first step is number zero). The ending step is omitted meaning the layer will be visible on all remaining steps.

The two ‘Highlight …’ layers are only shown for a single step (specifying step 2 and 3 respectively).

Layers without a build step annotation will be visible on all steps (or hidden if you’ve hidden them in Inkscape).

The complete syntax for build specifications includes many more features including automatic numbering and connecting the visibility of groups of layers. See the documentation for a complete introduction.

See also

Builds

For a complete introduction to Slidie’s build syntax.

Part 4: Adding speaker notes

To add speaker notes to a slide, create a text box and type ### (three hashes) followed by a newline. Add your speaker notes to the remaining lines.

A screenshot of Inkscape with a set of speaker notes.

When the slides are rendered, the notes will be displayed in the notes area (and presenter view) of the XHTML viewer.

A screenshot of the XHTML viewer showing some speaker notes.

Whilst text formatting applied to the speaker notes in your source file are lost, the notes will be formatted as Markdown in the XHTML viewer.

Though it is probably most readable to place your speaker notes off the side of the page in your SVG, it is not necessary: Slidie removes the text from the slide during rendering.

If you place speaker notes on layers selectively displayed during a build up, those notes will be shown faded-out in the viewer before that build step is reached.

See also

Speaker notes

For full details on creating and using speaker notes.

Part 6: Adding a video clips to slides

Slidie supports the inclusion of a number of dynamic elements not natively supported by SVG such as videos and iframes (embedded web browsers). These inclusions make use of a Slidie feature (nerve-wrackingly) called ‘magic text’.

To insert a video into a slide, first draw a placeholder rectangle or image where the video should appear. Next, add a text box containing something like the following:

@@@
video = "path/or/url/to/video.mp4"

Finally, combine the placeholder and text in a group (e.g. using Ctrl+G).

A screenshot of a video defined in Inkscape using Slidie's magic text feature.

The @@@ syntax marks what follows as a ‘magic’ text block which Slidie will treat specially. In this case, we’ve indicated that we want to substitute the placeholder with a video player. When we render our slide we get something like this:

A screenshot of a video playing on a slide.

In PDF and PNG outputs (where videos are not supported) Slidie will only show the placeholder.

Warning

There are quite a few caveats around Slidie’s video support (seemingly like every other slide preparation tool…). Make sure to read the full documentation for details.

See also

Video

For further details of Slidie’s video embedding support.

Automatic video placeholder generation

The slidie-video-stills command can automatically substitute a placeholder rectangle with an image placeholder in slides.

Creating <iframe> elements

For how to conveniently embed iframes (i.e. web browsers) into slides. This is a potentially powerful mechanism for injecting complex interactive or live data connected elements into slides.

Magic text

For details of the magic text syntax and its other uses.