Infographic Slide

Create stunning, data-driven graphics that automatically personalize with user or account-specific data. The Infographic slide is compatible with both static SVGs and animated SVGs with embedded CSS.


What Would You Like to Visualize?

Choose the type of data visualization you need:

📊 Progress & Performance Metrics

Perfect for: KPIs, completion rates, performance scores, comparisons, progress tracking

Available visualizations:

  • Horizontal Bars - Compare multiple items side-by-side
  • Vertical Columns - Show rankings or time series data
  • Circular Progress - Display single percentage or completion status
  • Range Sliders - Show min-max values or data ranges

→ View Progress Metrics Guide

🥧 Distribution & Proportions

Perfect for: Market share, survey results, budget allocation, category breakdowns, NPS scores

Available visualizations:

  • Donut Charts - Show segmented proportional data
  • Ring Charts - Display hierarchical or comparative data in concentric rings
  • Labels & Legends - Add colored labels and descriptions to any chart

→ View Distribution Guide

🎨 Styling & Visual Effects

Perfect for: Status indicators, performance heatmaps, hero images, attention-grabbing effects

Available effects:

  • Dynamic Colors - Change colors based on status or conditions
  • Heatmaps - Show intensity through color gradients
  • Ken Burns Animation - Add cinematic zoom and pan effects

→ View Styling & Effects Guide

📝 Text & Content Display

Perfect for: Long descriptions, testimonials, overflowing content, event dates

Available options:

  • Scrolling Text - Auto-scroll when content exceeds container
  • Faded Text - Apply fade effect for overflow indication
  • Formatted Dates - Display dates in an attractive calendar format

→ View Text & Content Guide

🖼️ Images & Videos

Perfect for: Dynamic logos, product images, video demos, personalized media

Available options:

  • Dynamic Images - Display uploaded images from your data
  • Dynamic Videos - Embed and autoplay video content
  • Ken Burns Effects - Add motion to static images

→ View Media Integration Guide

Getting Started

⚙️ New to Infographic Slides?

Learn how to create and export SVGs from Figma or SVGator:

→ Setup & Export Guide

📋 Already Know What You Need?

Quick syntax reference for all dynamic elements:

→ Quick Reference Cheat Sheet

How It Works

Infographic slides use special ID naming conventions in your SVG files to create dynamic, personalized content:

  1. Text Personalization - Add lc_variableName to element IDs to replace with dynamic data
  2. Show/Hide Elements - Use lc_ or hid_ prefixes to control visibility
  3. Dynamic Attributes - Special prefixes like lc_bar_, lc_circle_, etc. adjust visual properties

Basic Example 

<!-- In your SVG -->
<text id="lc_customer-name">John Doe</text>
<rect id="lc_bar_revenue" />

<!-- In your dataset -->
{{ customer-name }} = "Acme Corp"
{{ revenue }} = "75"

The slide will automatically replace “John Doe” with “Acme Corp” and set the bar width to 75%.

SVG Standards

  • Desktop SVGs: 1080 x 810 pixels (4:3 aspect ratio)
  • Mobile SVGs: 440 x 836 pixels (1:1.9 aspect ratio)
  • Format: Static or animated SVGs with embedded CSS
  • Animation: CSS-only animations supported (no JavaScript)

Need Help?

Table of contents