Quick Reference Cheat Sheet

A comprehensive quick reference for all Infographic slide dynamic elements.

Progress & Metrics

Element Element Type Input Format Example
Horizontal Bars
lc_bar_*		 <rect> "40" or {"value": 40, "color": "blue"} {{ revenue }} = "75"
Vertical Columns
lc_column_*		 <rect> "60" or {"value": 60, "color": "red"} {{ q1 }} = "85"
Circular Progress
lc_circle_*		 <circle> "50" (percentage) {{ completion }} = "68"
Range Sliders
lc_range_*		 <rect> "10,40" (position, width) {{ price }} = "20,50"

Background Elements: Add _bg_ suffix for semi-transparent backgrounds

  • lc_bar_bg_*, lc_column_bg_*, lc_circle_bg_*, lc_range_bg_*

Distribution & Proportions

Element Element Type Input Format Example
Donut Charts
lc_doughnut_*		 <circle> "58;32;10" or with colors:
"58,green;32,yellow;10,red"		 {{ nps }} = "58,#4CAF50;32,#FFC107;10,#F44336"
Ring Charts
lc_rings_*		 <rect> JSON array:
[{"value": 85, "label": "Label", "color": "#4285F4"}]		 See detailed format below
Labels/Legends
lc_label_*		 <text> "Label1;Label2;Label3" or:
"Label1,color1;Label2,color2"		 {{ legend }} = "Promoters,green;Passives,yellow"

Donut Chart Format:

"value1,color1;value2,color2;value3,color3"

Ring Chart Format:

[
  { "value": 85, "label": "Item 1", "color": "#4285F4" },
  { "value": 72, "label": "Item 2", "color": "#EA4335" }
]

Label Format with Wrapping:

"Label Text,color,20"

(Third parameter = character wrap limit)

Styling & Effects

Element Element Type Input Format Example
Dynamic Colors
lc_color_*		 Any SVG "#2196F3" or "royalblue" {{ status }} = "#4CAF50"
Heatmaps
lc_heatmap_*		 Any SVG
(requires dataFill attribute)		 "75" (opacity 0-100) {{ intensity }} = "85"
Ken Burns
lc_kenburns_*		 Any SVG JSON config (see below) See detailed format below

Heatmap Required Attribute:

<rect id="lc_heatmap_item" dataFill="#2196F3" />

Ken Burns Format:

{
  "duration": 4,
  "startScale": 0.8,
  "endScale": 1.0,
  "ease": "power2.out"
}

Text & Media

Element Element Type Input Format Example
Scrolling Text
lc_scrolltext_*		 <rect> Plain text string {{ description }} = "Long text..."
Faded Text
lc_fadetext_*		 <rect> Plain text string {{ summary }} = "Preview text..."
Dynamic Images
lc_image_*		 <rect> Image URL {{ logo }} = "https://cdn.../image.png"
Dynamic Videos
lc_video_*		 <rect> Video URL {{ demo }} = "https://cdn.../video.mp4"
Formatted Dates
lc_date_*		 <rect> "YYYY-M-D" or "today" {{ event }} = "2025-10-13"

Basic Text Personalization

Replace any text in your SVG using lc_ prefix:

<!-- In SVG -->
<text id="lc_customer-name">Placeholder</text>
<text id="abc-lc_revenue">$0</text>

<!-- In Dataset -->
 = "Acme Corp"
 = "$125,000"

Note: Prefixes before lc_ are automatically detected (e.g., abc-lc_name works)

Show/Hide Elements

Control visibility with lc_ or hid_ prefixes:

<text id="lc_metric-label">Label</text>
<g id="hid_performance">...</g>

These can be controlled in narration settings to show, hide, or dim elements.

Color Specification Options

All color inputs accept:

Format Example
Hex codes "#2196F3", "#FF5722"
CSS names "blue", "royalblue", "green"
RGB values "rgb(33, 150, 243)"

Value Ranges & Clamping

Element Type Range Notes
Bar/Column 0-100% Values >100 clamped to 100
Circle 1-100% 0 converted to 1 (minimum)
Range Position: 1-100%
Width: 0-99%		 Combined cannot exceed 100%
Heatmap 0-100 Values >100 treated as 100
Ken Burns Scale 0-2 1.0 = 100% (original size)
Ken Burns Duration 1-10 seconds Default: 4 seconds

Element Type Requirements

Feature Required Element
lc_bar_*, lc_column_*, lc_range_* <rect>
lc_circle_*, lc_doughnut_* <circle>
lc_rings_* <rect>
lc_label_* <text>
lc_scrolltext_*, lc_fadetext_* <rect>
lc_image_*, lc_video_*, lc_date_* <rect>
lc_color_*, lc_heatmap_*, lc_kenburns_* Any SVG element

Figma Export Checklist

When exporting SVGs from Figma:

  • ✅ Include bounding box - Checked
  • ✅ Include “id” attribute - Checked
  • ❌ Outline Text - Unchecked (unless text doesn’t need personalization)

SVGator Export Checklist

When exporting animated SVGs from SVGator:

  • ✅ Exported IDs → “Element’s name”
  • ✅ Animation type → “CSS only”
  • ✅ Direction → Normal/Reverse/Alternate
  • ✅ Iterations → Infinite or count
  • ✅ Save → Before exporting

Troubleshooting Quick Fixes

Problem Quick Fix
Element not updating Check ID prefix matches feature (lc_bar_, etc.)
Wrong element type Verify element type (e.g., bars need <rect>, circles need <circle>)
Text not personalizing Ensure “Outline Text” was unchecked in Figma
Animation not playing Check SVGator export: “CSS only”, not JavaScript
Colors not matching Use exact same color values in chart and labels
Values not clamping Check value ranges - most are 0-100
JSON not parsing Validate JSON format with quotes around strings
Date not displaying Use ISO format: YYYY-M-D (e.g., 2025-10-13)

SVG Standards

Desktop SVGs:

  • Dimensions: 1080 x 810 pixels
  • Aspect Ratio: 4:3

Mobile SVGs:

  • Dimensions: 440 x 836 pixels
  • Aspect Ratio: 1:1.9

Animation Support:

  • ✅ CSS animations
  • ❌ JavaScript animations

JSON Formatting Examples

Ring Chart:

[
  { "value": 85, "label": "Item 1", "color": "#4285F4" },
  { "value": 72, "label": "Item 2", "color": "#EA4335" },
  { "value": 58, "label": "Item 3", "color": "#FBBC04" }
]

Ken Burns Animation:

{
  "duration": 4,
  "startScale": 0.8,
  "endScale": 1.0,
  "ease": "power2.out"
}

Bar/Column with Color:

{
  "value": 75,
  "color": "blue"
}

Need More Details?

← Back to Infographic Overview