Dive SVG is written in Elm makes visual presentations like Prezi's possible with plain SVG.
If you are interested in an approach based on HTML5 Canvas, check out Dive.
This Web tool is powered by this library and gets your SVG file rendered as a visual presentation in the browser (works best in Chrome).
First, clone this project.
You need elm-install to build this project since it uses non-published elm packages.
Then run
elm-install
elm make src/Main.elm --output elm.js
Navigate your browser to the directory where you cloned this project and append ?samples/demo.svg
to its URL. For example:
http://localhost/dive-svg/?samples/demo.svg
This runs Dive SVG and loads the sample presentation contained in this project from the file samples/demo.svg
.
Dive SVG exposes a Parser module which turns an SVG file into Dive SVG's Model. Groups of red rectangles and a number are recognized as frames. This model then contains a function slides : Frame -> Svg msg
which renders the SVG with viewbox parameters given by the Frame.
However, for your application you might only need to incorporate this library's init
, update
and view
functions. The latter draws the SVG element at full width and height now, hard coded.
BSD-3