Personalized Graphic

A personalized graphic 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.