SVG Graphics

StarZero Agents can generate custom SVG graphics using AI and display them directly in the chat. These graphics can be used as video overlays — everything from animated title cards and lower-thirds to logos, badges, and full-frame illustrations.

What Are SVG Graphics?

SVGs (Scalable Vector Graphics) are resolution-independent graphics that look sharp at any size. StarZero Agents uses AI to create them based on your description, so you don't need any design tools or technical knowledge.

Generated SVGs can be:

• Static — A still graphic like a logo, badge, or illustration
• Animated — Graphics with motion, like a title card that fades in, a pulsing icon, or a lower-third that slides up

Generating an SVG

Describe what you want in the chat, and StarZero Agents will generate it:

"Create an animated lower-third graphic that says 'John Smith - CEO' with a subtle slide-up animation."

"Generate a subscribe button SVG with a pulsing animation, 3 seconds long."

"Make a title card that says 'Chapter 1: Getting Started' with a fade-in effect for a 16:9 video."

"Create a simple logo overlay of a gold star."

StarZero Agents generates the SVG and shows you an interactive preview right in the chat.

Fullscreen vs. Subsection Graphics

When generating an SVG, StarZero Agents distinguishes between two types:

Fullscreen graphics cover the entire video frame. These are ideal for title cards, backgrounds, animated intros, and full-frame illustrations. When creating a fullscreen graphic, mention the video's aspect ratio so the graphic fits perfectly:

"Create a fullscreen title card for a 9:16 vertical video that says 'Top 5 Tips'."

Subsection graphics are smaller elements that sit in part of the frame — logos, badges, icons, lower-thirds. These are wrapped tightly around their content:

"Generate a small animated badge that says 'NEW'."

Previewing SVGs

When StarZero Agents generates an SVG, you'll see an interactive preview with controls:

• Play/Pause — Control animation playback
• Restart — Play the animation from the beginning
• Timeline scrubber — Scrub through the animation to check specific moments
• Transparency grid — Toggle a checkerboard background to see transparent areas
• Open in new tab — View the SVG at full size
• Copy URL — Copy a link to the SVG for sharing or reuse
• Download — Save the SVG file to your computer

If an animation is too complex for smooth real-time preview, the preview will pause automatically with a notice. The final rendered video will still be smooth.

Iterating on Graphics

If the generated SVG isn't quite right, you can ask StarZero Agents to refine it:

"Make the text bigger and change the color to blue."

"Speed up the animation and add a fade-out at the end."

"The star should be gold instead of yellow, and add a subtle glow."

StarZero Agents will use the previously generated SVG as a starting point and apply your changes.

Using SVGs on the Timeline

There are two ways to use SVG graphics in your video project: as timeline clips on the main video track, or as overlays that layer on top of your video.

SVG Timeline Clips

You can place an SVG graphic directly on the main video track, just like a regular video clip. This is ideal for fullscreen animated graphics that replace the video for a segment — title cards, animated intros, chapter dividers, or standalone graphic sequences.

"Add that title card SVG to the timeline for 5 seconds."

"Insert the animated intro graphic at the beginning of the project, lasting 3 seconds."

"Add this SVG from a URL to the timeline: https://example.com/graphic.svg"

SVG clips appear as distinct blocks on the video track with an "SVG" label, making them easy to identify at a glance. You can drag them to reposition, trim their start and end points, and add keyframe animations just like regular clips.

SVG clips are included when you render your video, and they're also supported in Premiere Pro project exports.

Limitations: SVG clips are graphics, not video, so some video-specific features don't apply — there's no audio, no transcript or captions, no smart boundary detection, and no visual reframing. Playback speed control for SVG clips is not yet supported.

SVG Overlays

You can also add SVG graphics as overlays that layer on top of your main video. This is better for elements like lower-thirds, logos, badges, and watermarks that should appear over your footage rather than replacing it. See Overlays for details on positioning, scaling, and animating overlays on your timeline.

"Add that SVG as an overlay in the bottom right corner from 0:00 to 0:05."

"Use the title card as a fullscreen overlay for the first 3 seconds."

Using Visual References

You can provide a reference image or video to guide the SVG generation. This helps the assistant create graphics that match the look and feel of your content.

Image references — Useful when you have a raster image you'd like recreated as a clean, scalable vector graphic:

"Create an SVG based on this logo image but make it vector."

Video references — The assistant can watch a section of your video and use it as visual context to create graphics that match your content's style, colors, or subject matter:

"Create a title card that matches the look of this video clip."

"Generate a lower-third graphic with colors that fit the interview footage."

Premiere Pro Export

SVG overlays are fully supported in the Premiere Pro project export. When you export, each SVG overlay is converted to ProRes 4444 video (which preserves transparency) and placed on an overlay track in the timeline. Positioning and opacity carry over, so your overlays appear exactly where you placed them in Premiere Pro.

Tips

• Be specific in your descriptions. "An animated lower-third with the name 'Jane Doe' in white text on a semi-transparent dark bar, sliding in from the left over 0.5 seconds" will get better results than "make a name graphic."
• For animated SVGs, specify the duration you want. This helps the AI create animations that fit your timing needs.
• Fullscreen graphics need an aspect ratio to look right. Always mention whether you're working in 16:9, 9:16, 1:1, or another format.
• SVG graphics have transparent backgrounds by default, which means they layer cleanly over your video without a visible box around them.
• Complex animations may preview slowly in the chat but will render smoothly in the final video.
• SVG graphics should be self-contained. When you provide a reference image, the AI can embed it in the SVG, but external fonts and other linked resources won't be rendered. All other visual content needs to be defined directly within the SVG itself.