Infographic

A Infographic slide lets you personalize the background with user or account specific data. The slide is compatible with both static SVGs and animated SVGs with embedded CSS.

To use this slide, you must create an SVG background image with certain variables.

SVG Backgrounds

You can use static or animated SVGs with embedded CSS as background.

For desktop SVGs, we have standardized on 1080 x 810, but the aspect ratio of 4:3 is what matters most.

For mobile, we chose 440 x 836; again, the aspect ratio (1: 1.9) matters for vector graphics.

Cast.app also supports Personalized SVGs. Personalized SVGs allow you to:

Personalize the contents of a variable in the SVG with svg element identifiers containing “lc_“.

E.g., abc-lc_csm-name and lc_csm-email would be replaced by contents of liquid variables named:
```
{{ csm-name }} and {{ csm-email }}

<text id="abc-lc_csm-name">csmFirst csmLast</text>
<text id="lc_csm-email">csm@email.com</text>
```
Show, hide, or dim elements in the SVG with identifiers containing “lc_“ or “hid_“.

E.g., something-hid_nrr and abc-lc_csm-name could be displayed, hidden, or dimmed per narration.
```
<text id="abc-lc_csm-name">csmFirst csmLast</text>
<g id="something-hid_nrr"><path></path></g>
```

Vector Graphics - Exporting Personalized SVGs from Figma

To preserve SVG identifiers and text elements when exporting an SVG,

Include bounding box should always be checked.
Include “id” attribute must always be checked.
Outline Text must be unchecked, especially if there are “lc_“ variables in your svg. However, if you have text elements with unique fonts you do not want to personalize, you can always right-click and select “Outline stroke” on the the variable and check Outline Text.

Vector Motion Graphics - Exporting Personalized SVGs from Figma, and animating them in SVGator

Create your base svg in Figma, then upload to Svgator and apply desired animations. When Exporting an animated SVG, make the following changes to preserve identifiers and text.

Exported IDs: change to “Element’s name”
Animation type: change to “CSS only”. We do not support javascript embedded animations because of security concerns.
Set Direction to “Normal”, “Reverse”, or “Alternate”, etc.
Set Iterations to “Infinite” or set a desired count
Click on “Refresh preview” to view the configured animation
Click “Save” after making changes to ensure your settings are preserved.
Click “Export”
Note: Svgator usually appends the file name to the id’s, before “hid_“ and “lc_“, so “lc_csm-name” will become “abc-lc_csm-name”. Cast will automatically detect ids with and without the prepended file name.

Dynamically Setting SVG Attributes with lc_xxx*

This documentation describes how to dynamically adjust the width/height of elements and the percent of elements in your SVG using IDs that start with lc*range*_ and lc*circle*_. These IDs allow for the manipulation of specific attributes of these elements to fit your design requirements dynamically.

Dynamic Width and Position Adjustments with `lc_range_* and lc_range_bg_*`

lc_range Prefix used for the IDs of elements that need dynamic width and position adjustments.

lcrange_bg* Creates a background track for range sliders with 30% opacity and Matches the color of the active range element

Identify the Element:

The target element must be a with an ID that starts with `lc_range_*`.

Identify the target element as an <img> tag with an ID starting with lc_range_bg_*.

Input Format:

The input value should be a string in the format xPercentage,widthPercentage. Example: “10,40” xPercentage is 10% widthPercentage is 40%

Clamping Values:

xPercentage will be clamped between 1% and 100%.
widthPercentage will be clamped between 0% and (100% - xPercentage).
Values above 100% will be reduced to 100%.
Negative values will not be processed and will result in no changes.

Compatibility: Works with <rect> elements only

Dynamic Percentage Adjustments with `lc_circle_* and lc_circle_bg_*`

lc_circle Prefix used for the IDs of elements that need dynamic radius adjustments.

lccircle_bg* Provides a semi-transparent circular background at 30% opacity and Uses the same color as the main circle segment

Identify the Element:

The target element must be a with an ID that starts with `lc_circle_*`.

Identify the target element as an <img> tag with an ID starting with lc_circle_bg_*.

Input Format:

The input value should specify the radius percentage. Example: “50” means the radius will be set to 50% of its original size.

Clamping Values:

The radius percentage will be clamped between 1% and 100%.
Values above 100% will be reduced to 100%.
Negative values will not be processed and will result in no changes.

Compatibility: Works with <circle> elements only

Dynamic Width Adjustments with `lc_bar_* and lc_bar_bg_*`

lc_bar is a prefix used for the IDs of elements that need dynamic width adjustments.

lcbar_bg* For Bar Chart Backgrounds Creates a semi-transparent background layer for bar charts with 30% opacity and Maintains the same color as the primary bar element

Identify the Element

The target element must be a with an ID that starts with `lc_bar_*.`

Identify the target element as an <img> tag with an ID starting with lc_bar_bg_*

Input Format

The input value should be a single percentage value representing the width of the bar. Example: “40” widthPercentage is 40%

Clamping Values

widthPercentage will be clamped between 0% and 100%.
Values above 100% will be reduced to 100%.
Negative values will not be processed and will result in no changes.

Compatibility: Works with <rect> elements only

Dynamic Height Adjustments with `lc_column_* and lc_column_bg_*`

lc_column is a prefix used for the IDs of elements that need dynamic height adjustments.

lccolumn_bg* Provides a semi-transparent background for vertical column charts at 30% opacity and Uses the same color as the main column element

Identify the Element

The target element must be a <div> with an ID that starts with lccolumn_. Identify the target element as an <img> tag with an ID starting with lc*column_bg*_

Input Format

The input value should be a single percentage value representing the height of the column. Example: “60” heightPercentage is 60%

Clamping Values

heightPercentage will be clamped between 0% and 100%:

Values above 100% will be reduced to 100%.
Negative values will not be processed and will result in no changes.

Compatibility: Works with <rect> elements only

Dynamic Image Display with `lc_image_*`

lc_image is used to dynamically display uploaded images.

Element Identification Identify the target element as an tag with an ID starting with lc_image.

Input Requirements The input value can be a direct CDN URL to the image or a dataset containing the image URL.

Error Management If no image is uploaded or an unsupported file type is selected, display a user-friendly message such as “No Image”.

Compatibility: Works with <rect> elements only

Dynamic Heatmap Customization with `lc_heatmap_*`

lc_heatmap is a prefix used for IDs of elements that need dynamic color intensity based on data values.

Heatmaps are ideal for visualizing:

Performance metrics across different categories
Engagement levels across different content pieces
Comparison of values across time periods or regions
Data density or concentration in specific areas
Intensity of metrics like conversion rates, user activity, or satisfaction scores

Heatmaps make it easy to quickly identify high and low values in a dataset through color gradients.

Element Identification Identify the target element as an <img> tag with an ID starting with lc_heatmap_*

Input Format:

The element accepts any value between 0 and 100. If a value greater than 100 is provided, it will be treated as 100 (full).

Compatibility: Works with any SVG element

Dynamic Color Customization with `lc_color_*`

lc_color is a prefix used for IDs of elements that need dynamic color adjustments based on specific values or conditions.

Status indicators (success, warning, error, neutral states)
Data-driven color changes (profit/loss indicators, performance status)
Highlight specific elements to draw attention
Color-coding categories or segments in reports and dashboards

Element Identification

Identify the target element as an <img> tag with an ID starting with lc_color_*

Input Format:

The input value should be a valid color code in hex format or a named CSS color. Example: “#2196F3” or “royalblue”

Compatibility: Works with any SVG element

Dynamic Scrolling Text with `lc_scrolltext_*`

lc_scrolltext is a prefix used for IDs of text elements that need dynamic scrolling when content exceeds the container.

Identify the Element:

The target element must be a with an ID that starts with lc*scrolltext*\*

Input Format:

The input value should be the text content to display.

Example:

“This is a long text that will automatically scroll if needed”

Implementation Notes:

Scrolling is automatically applied only when text length exceeds container dimensions If text fits within the container, it will display normally without scrolling

Compatibility: Works with <rect> elements only

Dynamic Faded Text with `lc_fadetext_*`

lc_fadetext is a prefix used for IDs of text elements that need a fade effect applied at the end. Identify the Element:

The target element must be a with an ID that starts with lc*fadetext*\*.

Input Format:

The input value should be the text content to display with fading.

Example:

“This text will have a fade effect applied at the end”

Implementation Notes:

The fade effect is automatically applied at the end of the text
Provides a visual indicator that text continues beyond what is visible

Compatibility: Works with <rect> elements only

Dynamic Video Integration with `lc_video_*`

lc_video is a prefix used for IDs of elements that need to display video content with autoplay and looping functionality.

Identify the Element: The target element must be a container with an ID that starts with lcvideo*.

Input Format:

The input value should be a URL to the video file. Example: “https://example.com/video.mp4”

Implementation Notes:

Videos will automatically play when the slide is displayed

Compatibility: Works with <rect> elements only

Dynamic Donut Chart Visualization with `lc_doughnut_*`

lc_doughnut is a prefix used for the IDs of SVG elements that need to display segmented data in a circular donut chart format, ideal for showing proportional distribution of values across different categories. The donut chart always displays as a complete circle, with values proportionally adjusted to fill the entire circumference.

Use Cases

Proportional distribution across categories (e.g., NPS scores, market share)
Survey results and response distributions
Budget or resource allocation
Customer segmentation data
Completion status with multiple segments

Element Identification

The target element must be a or composite SVG element with an ID that starts with `lc_doughnut_*`

Input Format

The input value should be a string of semicolon-separated values representing each segment of the donut chart. Each segment can optionally include a color specification.

Basic Format:

“58;32;10” would create a donut chart with:

First segment: 58%
Second segment: 32%
Third segment: 10%

With Color Specification:

“58,#1E88E5;32,purple;10,orange” would create a donut chart with:

First segment: 58% with hex color #1E88E5 (blue)
Second segment: 32% with named color “purple”
Third segment: 10% with named color “orange”

You can specify colors using either:

CSS color names (e.g., “red”, “blue”, “purple”) Hexadecimal color values (e.g., “#FF0000”, “#1E88E5”)

If colors are not specified, the default colors from the project settings will be used.

Implementation Notes

Colors can be specified inline with each value using the format value,color (e.g., “58,#1E88E5” or “32,purple”).
Order of segments: Values are plotted clockwise starting from the 12 o’clock position.
A minimum value of 1 is required for a segment to be visible.
Negative values are treated as 1, and zero values are also converted to 1 (the minimum value for any segment is 1).

Compatibility: Works with <circle> elements only

Companion Elements

lclabel*: Used to provide labels for the donut chart segments.

Independent Operation:

Labels operate independently from the donut chart segments. They will display exactly what you pass to them without automatic synchronization with segments.

Input Format:

Labels should be provided as semicolon-separated values (e.g., “Promoters;Passives;Detractors”).

You can specify colors for each label by adding a comma followed by a color value:

Using named colors: “Promoters,blue;Passives,purple;Detractors,orange”
Using hex values: “Promoters,#1E88E5;Passives,#9C27B0;Detractors,#FF9800”

Compatibility: Works with <text> elements only

Manual Association:

You need to manually ensure that labels correspond to the appropriate segments. The system will not automatically associate labels with segments or adjust their positions based on segment sizes.

Dynamic Ring Chart Visualization with `lc_rings_*`

lc_rings is a prefix used for the IDs of SVG elements that need to display data in concentric ring format, ideal for showing hierarchical or comparative data across multiple categories with visual emphasis through ring positioning.

Use Cases

Performance metrics across different time periods or categories
Competitive analysis with multiple data points
Hierarchical data visualization with emphasis on top performers
Multi-dimensional comparison data
Progress tracking across different initiatives
Resource allocation across departments or projects

Element Identification

The target element must be a with an ID that starts with `lc_rings_*`

Input Format

The input value should be a JSON string containing an array of objects with the following structure:

[
  {
    "value": 85,
    "label": "Artificial Intelligence Framework",
    "color": "#4285F4"
  },
  {
    "value": 72,
    "label": "Deep Neural Network Module",
    "color": "#EA4335"
  }
]

Required Properties:

value: Numeric value for ring sizing (negative values converted to 0)
label: Text label for the ring

Optional Properties:

color: Color specification (hex, RGB, or CSS color names) - defaults to project color palette if not specified

Implementation Notes

Rings are automatically sorted by value in descending order (highest values get outermost rings)
Maximum of 12 rings are displayed (additional data points are truncated)
Ring thickness and spacing are automatically calculated based on element dimensions
Colors default to the project’s color palette if not specified
Labels are positioned at the start of each ring with value formatting

Compatibility: Works with <rect> elements only

Dynamic Ken Burns Animation with `lc_kenburns_*`

lc_kenburns is a prefix used for the IDs of elements that need cinematic zoom and pan effects, commonly used to add visual interest to static images or graphics through subtle motion.

Use Cases

Hero images and featured graphics
Background elements that need subtle motion
Highlighting important visual content
Creating cinematic presentation effects
Adding dynamic movement to static infographics
Drawing attention to key visual elements

Element Identification

The target element can be any SVG element with an ID that starts with lc_kenburns_*

Input Format

The input value should be a JSON string containing animation configuration:

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

Configuration Properties:

duration: Animation duration in seconds (1-10, defaults to 4)
startScale: Initial scale factor (0-2, defaults to 0.8)
endScale: Final scale factor (0-1, defaults to 1.0)
ease: GSAP easing function (defaults to “power2.out”)

Implementation Notes

Animation starts when the element transitions from dimmed/hidden to visible state
Invalid configuration values are automatically validated and fallback to defaults

Compatibility: Works with any SVG element

Table of Contents

Infographic

SVG Backgrounds

Vector Graphics - Exporting Personalized SVGs from Figma

Vector Motion Graphics - Exporting Personalized SVGs from Figma, and animating them in SVGator

Dynamically Setting SVG Attributes with lc_xxx*

Dynamic Width and Position Adjustments with lc_range_* and lc_range_bg_*

Dynamic Percentage Adjustments with lc_circle_* and lc_circle_bg_*

Dynamic Width Adjustments with lc_bar_* and lc_bar_bg_*

Dynamic Height Adjustments with lc_column_* and lc_column_bg_*

Dynamic Image Display with lc_image_*

Dynamic Heatmap Customization with lc_heatmap_*

Dynamic Color Customization with lc_color_*

Dynamic Scrolling Text with lc_scrolltext_*

Dynamic Faded Text with lc_fadetext_*

Dynamic Video Integration with lc_video_*

Dynamic Donut Chart Visualization with lc_doughnut_*

Dynamic Ring Chart Visualization with lc_rings_*

Dynamic Ken Burns Animation with lc_kenburns_*

Dynamic Width and Position Adjustments with `lc_range_* and lc_range_bg_*`

Dynamic Percentage Adjustments with `lc_circle_* and lc_circle_bg_*`

Dynamic Width Adjustments with `lc_bar_* and lc_bar_bg_*`

Dynamic Height Adjustments with `lc_column_* and lc_column_bg_*`

Dynamic Image Display with `lc_image_*`

Dynamic Heatmap Customization with `lc_heatmap_*`

Dynamic Color Customization with `lc_color_*`

Dynamic Scrolling Text with `lc_scrolltext_*`

Dynamic Faded Text with `lc_fadetext_*`

Dynamic Video Integration with `lc_video_*`

Dynamic Donut Chart Visualization with `lc_doughnut_*`

Dynamic Ring Chart Visualization with `lc_rings_*`

Dynamic Ken Burns Animation with `lc_kenburns_*`