SVG graphic with text + images + animations
You can create or design SVGs using tools such as Adobe Illustrator, which may take time depending on your level of expertise. To save time and with little to no experience using design tools, you can also use AI tools such as ChatGPT or Google Gemini to generate SVG designs based on your requirements. After generating your SVG design, you can quickly convert it into a broadcast-ready graphic in EvoFX. In this article, you will learn how to create and convert a text-and-image SVG lower-third with animations into an EvoFX graphic.
Before you begin
To learn how to create a scene in EvoFX broadcast graphics platform studio, refer to this article.
To learn how to open scene studio, refer to this article.
To learn how to create and convert a text-only SVG lower-third into an EvoFX graphic, refer to this article.
To learn how to create and convert a text-and-image SVG lower-third into an EvoFX graphic, refer to this article.
To learn how to create and convert a text-only SVG lower-third into an EvoFX graphic, refer to this article.
To learn how to create and convert a text-and-image SVG lower-third into an EvoFX graphic, refer to this article.
Creating a text-and-image SVG lower third with animations in ChatGPT
Note: While writing a prompt to generate using an AI tool, or while creating in design tools such as Adobe Illustrator (and converting it into an EvoFX graphic), make sure:
a) All text should be written using <text> elements only (do not convert text to paths) so you can customise the text using input fields.
b) The viewBox can be any dimension, but the SVG should not specify height and width, so it can use 100% of the available space defined by the viewBox.
c) Portrait/image must use an <image> with a URL.
a) All text should be written using <text> elements only (do not convert text to paths) so you can customise the text using input fields.
b) The viewBox can be any dimension, but the SVG should not specify height and width, so it can use 100% of the available space defined by the viewBox.
c) Portrait/image must use an <image> with a URL.
1. Below is the prompt used in ChatGPT to generate a text-and-image SVG lower-third with animations.
Create one SVG lower-third (premium broadcast style) with text + a circular portrait image. Output ONLY SVG code.
Rules
a) Use: <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'>
b) Do NOT include width or height.
c) All text must be ALL CAPS and written using <text> elements only.
d) Keep the graphic bottom-center with comfortable bottom padding.
e. Keep the same structure and layout as the reference (do not move or resize the base).
Design
a) Parallelogram lower-third bar with depth: shadow, inner highlight, inner shadow, outline.
b) Stylish gold corner accents, small gold detail bar, and subtle micro lines.
C) Use tasteful gradients for a broadcast look.
Text
a) Two centered lines:
JOHN DOE
SENIOR SPORTS ANALYST
b) Clean broadcast typography with good letter spacing.
c) Small translucent plates behind each line.
Image
a) Portrait thumbnail integrated slightly on the right side.
b) Circular photo inside a decorative frame.
c) Photo area must be clean (no glare or vignette).
d) Portrait must use an <image> with a URL.
Animations
a) Entry + exit for the whole lower-third:
i) Quick smooth entry (~1s): fade in + slide up
ii) Hold
iii) Smooth exit (~1s): fade out + slide down
b) Optional subtle loops: gloss wipe, soft accent sweep, gentle shimmer.
Return only the final SVG.
Rules
a) Use: <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'>
b) Do NOT include width or height.
c) All text must be ALL CAPS and written using <text> elements only.
d) Keep the graphic bottom-center with comfortable bottom padding.
e. Keep the same structure and layout as the reference (do not move or resize the base).
Design
a) Parallelogram lower-third bar with depth: shadow, inner highlight, inner shadow, outline.
b) Stylish gold corner accents, small gold detail bar, and subtle micro lines.
C) Use tasteful gradients for a broadcast look.
Text
a) Two centered lines:
JOHN DOE
SENIOR SPORTS ANALYST
b) Clean broadcast typography with good letter spacing.
c) Small translucent plates behind each line.
Image
a) Portrait thumbnail integrated slightly on the right side.
b) Circular photo inside a decorative frame.
c) Photo area must be clean (no glare or vignette).
d) Portrait must use an <image> with a URL.
Animations
a) Entry + exit for the whole lower-third:
i) Quick smooth entry (~1s): fade in + slide up
ii) Hold
iii) Smooth exit (~1s): fade out + slide down
b) Optional subtle loops: gloss wipe, soft accent sweep, gentle shimmer.
Return only the final SVG.
2. And the above prompt generated a text-and-image SVG lower-third design with animations, as shown below.
Note: If you are using software such as Adobe Illustrator to design an SVG with text - and plan to convert it into an EvoFX graphic and customise the text, make sure that, while exporting the design, the "Font" option is set to "SVG" and not "Convert to Outlines," as shown below.Note: If you are using software such as Adobe Illustrator to design an SVG with image - and plan to convert it into an EvoFX graphic and customise the image, make sure that, while exporting the design, the "Image" option is set to "Link" and not "Preserve" or "Embed" as shown below.
Converting a text-and-image SVG lower third with animations into an EvoFX graphic
1. Once you design or generate a text-and-image SVG lower-third with animations, you can upload it to SPAN as a public file using the Upload Public Files feature. After uploading the SVG, copy its URL.
Note: To learn how to upload a public SVG file and copy its URL in SPAN, refer to this article.
2. Then, paste the URL into the SVG graphic settings in the scene studio to convert it into an EvoFX graphic.
Note: To learn how to paste the public URL of an SVG file into the scene studio, modify its settings, convert it into an EvoFX graphic, and fire the SVG graphic live from the scene studio, refer to this article.
3. Once the settings are updated, you can fire the graphic live and use the scene studio's live output link for your broadcast by pasting it into broadcast software such as OBS or vMix.
For example,
if your scene studio link is: https://app.banyanboard.com/#/public/scenes/e08f47ab-15da-4bd5-85c7-8320414709ac/studio/
then the live link is: https://app.banyanboard.com/#/public/scenes/e08f47ab-15da-4bd5-85c7-8320414709ac/live/
In other words, replace "studio" with "live" at the end of the URL.
Customising the text and image in a text-and-image SVG lower-third with animations EvoFX graphic
1. In the EvoFX Scene Studio, you can customise a text-and-image SVG lower-third with animations after it has been converted into an EvoFX graphic. Click the “INPUTS” icon for the SVG graphic to open the inputs.
2. Once clicked, a dialog box titled “Inputs for SVG Graphic” will open. Change the image and text in the graphic using the inputs available in the dialog box. To display the image in the graphic, paste the public URL of the image into the input field.
3. Any changes you make in the inputs will quickly reflect in the SVG graphic text, as shown below.