Simple SVG graphic with text
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-only SVG lower-third 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.
Creating a text-only SVG lower third 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.
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.
1. Below is the prompt used in ChatGPT to generate a text-only SVG lower-third.
Create a beautiful text-only SVG lower-third graphic with the following requirements:
a. Content & Text
i) Exactly two lines of text:
JOHN DOE
SENIOR SPORTS ANALYST
ii) All text must be capital letters.
iii) All text must be written using <text> elements only (no converting text to paths).
b. Style & Shape
i) The lower-third must be a parallelogram-shaped bar (not a simple rectangle).
ii) Include premium corner designs (e.g., elegant accent corner pieces, layered corner
details, subtle inner lines).
iii) Must look like a modern broadcast lower-third.
c. Canvas & Positioning
i) The SVG should be designed for a 1920×1080 composition.
ii) Place the lower-third bottom center with clear bottom padding so it doesn’t touch
the bottom of the screen.
d. Restrictions
i) No images
ii) No animations
iii) Output a single complete <svg>.
e. Important SVG Rule
i) The SVG must NOT specify width or height attributes.
ii) It must use a viewBox and rely on 100% scaling based on the container.
Return only the SVG code.
a. Content & Text
i) Exactly two lines of text:
JOHN DOE
SENIOR SPORTS ANALYST
ii) All text must be capital letters.
iii) All text must be written using <text> elements only (no converting text to paths).
b. Style & Shape
i) The lower-third must be a parallelogram-shaped bar (not a simple rectangle).
ii) Include premium corner designs (e.g., elegant accent corner pieces, layered corner
details, subtle inner lines).
iii) Must look like a modern broadcast lower-third.
c. Canvas & Positioning
i) The SVG should be designed for a 1920×1080 composition.
ii) Place the lower-third bottom center with clear bottom padding so it doesn’t touch
the bottom of the screen.
d. Restrictions
i) No images
ii) No animations
iii) Output a single complete <svg>.
e. Important SVG Rule
i) The SVG must NOT specify width or height attributes.
ii) It must use a viewBox and rely on 100% scaling based on the container.
Return only the SVG code.
2. And the above prompt generated a text-only SVG lower-third design, 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.
Converting a text-only SVG lower third into an EvoFX graphic
1. Once you design or generate a text-only SVG lower-third, 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.
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 in a text-only SVG lower-third EvoFX graphic
1. In the EvoFX Scene Studio, you can customise a text-only SVG lower-third 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 text in the graphic using the inputs available in the dialog box.
3. Any changes you make in the inputs will quickly reflect in the SVG graphic text, as shown below.