SVG Presentation Maker
Creating presentations from markdown files
Steve Turbek turbek.com
The SVG Presentation Maker converts markdown files into interactive SVG-based presentations that run directly in your browser.
No complex setup. No dependencies. Just markdown and SVGs.
Key Features
Markdown-based slides - Write your presentation in simple markdown
- SVG graphics support - Embed and display SVG images in your slides
- Browser-based - Runs entirely in the browser, no installation needed
- Keyboard navigation - Arrow keys to move between slides
- Lightweight - Minimal code, fast loading
How It Works
- Write your presentation in markdown
- Use
--- to separate slides
- Reference SVG files with the image syntax
- Open in browser and present!
Each slide is separated by --- (three dashes)
Content goes here
Adding Images
Use the standard image tag to include SVG graphics:
<image href="image.svg" x="0" y="0" width="400" height="400"/>
- Position and size your images with x, y, width, and height attributes
- SVG files will be integrated, PNG and JPG files will be referenced.
- File must be in the folder path in the image tag in presentation.md
Backgrounds
Set slide backgrounds using simple comments:
<!-- slide-bg=#2d3748 -->
You can use solid colors, gradients, or SVG images:
<!-- slide-bg=url(#myGradient) -->
<image href="BG.svg" x="0" y="0" width="100%" height="100%"/>
Navigation
- Right Arrow / Space - Next slide
- Left Arrow - Previous slide
- Home - First slide
- End - Last slide
Simple keyboard controls for smooth presentations
Video works also
File Structure
/files
├── presentation.md (your markdown content)
├── image1.svg (SVG graphics)
├── image2.svg
└── ...
Keep your markdown and SVG files in the files directory
Why SVG Presentations?
- Infinite scalability - SVG graphics never pixelate
- Small file sizes - Vector graphics are compact
- Interactive potential - SVGs can include animations and interactivity
- Portable - Single SVG file can contain text and SVGs
- Designer-friendly - Create graphics in Figma or Illustrator
Getting Started
- Edit
presentation.md with your content
- Add any SVG graphics to the
files directory
- Experiment with different layouts and SVG graphics.
- Use the tool to generate your
presentation.svg
- Open in your browser
- Present!
Perfect For
- Quick presentations and demos
- Design portfolios showcasing SVG work
- Teaching and workshops
- Technical talks with code examples
- Any presentation where you want full control
Open Source
This tool is open source and free to use.
Modify it, extend it, make it your own.