svgslides v0.0.3
SVG Slides
Slide crafting utility for nerds.
Draw your slides in a vector editor and export SVG. By annotating the SVG, you can build slide transitions with
- Incremental builds
- Magic-move / morph with precise slide-to-slide matching by object ID.
- Fade-in and out.
- Custom external web content like videos or interactive widgets.
Note: Expect this to be more work than Powerpoint or Keynote, but more rewarding :)
Prerequisites
- Install Python 3
pip install -r requirements.txt
- Install Node.js with NPM.
- We use Parcel for building the project. (
npm install -g parcel-bundler
)
Process
Fork this repo (optional, allows customization)
Draw your slides (of size
1280x720
) in your favourite vector editor I use Sketch on Mac. Cross-platform, Figma seems to work well. For Figma, make sure to enable 'include "id" attribute' in SVG export settings.Annotate your SVG IDs with attributes to set animation behavior, e.g.
myPath[stage=2][fade-in]
orrectangle[move][otherattrib=value]
Looks like this in Sketch:Run
./preprocess_slides.py demo-data/ -m demo-data/dist -o demo-data/slides.json
to pre-process your SVGs (parse these annotated ids) and turn them into one big JSON file. This also strips out embedded images and puts them indist/media/
.You can customize the presenter notes in
demo-data/notes.md
. You can find the right numbers to link notes with slides in the cockpit (pressC
to open)Run
parcel index.html
indemo-data/
to serve your slides in dev-mode.The entry-point for the code is
demo-data/index.js
.
Sketch live view
If you are using Sketch, we provide a watcher script to automatically extract the SVG and build the slides.json
file everytime you save the Sketch file.
You need to name your Sketch file slides.sketch
and give the containing directory as argument:
./sketch-generate.sh demo-data/
Step-wise appearance of nodes
- Use tags like
[stage=1]
or[stage=3-5]
in your IDs.
Entry animation
mynode[fade-in]
mynode[fade-in=2]
--- fade in, taking 2 secondsmynode[fade-in=0.5,1]
--- fade in, taking 500ms, aligning this at the end of the transition if other transitions take longermynode[draw-line]
--- for paths, draw them from start to finishmynode[fade-down]
--- fade in and come 20pix downmynode[appear-along=PathId,5,0]
--- appear along a given path object, take 5 seconds, align at the begining of the transition
Transitioning objects from one stage to the next
mynode[move=1.5]
--- 1.5 second morph .. could be color, position, rotation, ... will be morphed
Exit animation
mynode[fade-out=1]
--- 1 second fade out
External content
rect[youtube=55bjCP9Fy5I]
will embed a YT video
Shortcuts
?
--- open shortcut overviewLeft
,Right
,Up
,Down
,[
,]
--- stage navigationShift + Left
etc. --- navigation, skipping incremental buildsHome
,End
--- go to start or beginningG 10 G
-- go to slide number 10F
--- go full screenC
--- open the cockpit (presenter view). move this to a separate windowT
--- start/stop the timer (visible in presenter view)R
--- reset the timer to zeroB
--- toggle blacking out the slide