SVG Elements

Complete reference for SVG elements in the Zvid Package, including vector graphics, shapes, and dynamic SVG content.

Overview

SVG elements allow you to add scalable vector graphics to your videos. They support custom SVG content, maintain crisp quality at any size. SVG elements are perfect for logos, icons, shapes, and graphics that need to scale without quality loss.

SVGItem Interface

export interface SVGItem {
  type: "SVG";
  svg: string;
  enterEnd?: number;
  exitBegin?: number;
  width?: number;
  height?: number;
  enterBegin?: number;
  opacity?: number;
  inputNumber?: number;
  track?: number;
  angle?: number;
  enterAnimation?: string | null;
  flipV?: boolean;
  flipH?: boolean;
  x?: number;
  y?: number;
  filter?: {
    brightness?: number;
    contrast?: number;
    saturate?: number;
    "hue-rotate"?: string;
    blur?: string;
    invert?: boolean | number;
    colorTint?: string;
  };
  exitAnimation?: string | null;
  exitEnd?: number;
  chromaKey?: { color: string; similarity?: number; blend?: number };
  position?: PositionPreset;
  resize?: ResizeMode;
  anchor?: Anchor;
}

Properties

Required Properties

Property	Type	Description
`type`	`"SVG"`	Element type identifier
`svg`	`string`	SVG code

Position & Size Properties

Property	Type	Default	Description
`x`	`number`	`0`	Horizontal position in pixels
`y`	`number`	`0`	Vertical position in pixels
`width`	`number`	Source width	SVG width in pixels
`height`	`number`	Source height	SVG height in pixels
`position`	`PositionPreset`	`"custom"`	Position preset (overrides x, y)
`anchor`	`Anchor`	`"center-center"`	Anchor point for positioning
`resize`	`ResizeMode`	`null`	Resize mode (overrides width, height)

Timing Properties

Property	Type	Default	Description
`enterBegin`	`number`	`0`	Start time for entrance (seconds)
`enterEnd`	`number`	`0`	End time for entrance animation (seconds)
`exitBegin`	`number`	`project.duration`	Start time for exit animation (seconds)
`exitEnd`	`number`	`project.duration`	End time for exit (seconds)

Visual Properties

Property	Type	Default	Description
`track`	`number`	`0`	Layer/track number (higher = on top)
`opacity`	`number`	`1`	Transparency (0-1)
`angle`	`number`	`0`	Rotation in degrees
`flipV`	`boolean`	`false`	Flip Vertically
`flipH`	`boolean`	`false`	Flip Horizontal

Animation Properties

Property	Type	Default	Description
`enterAnimation`	`string \| null`	`null`	Entrance animation name
`exitAnimation`	`string \| null`	`null`	Exit animation name

Effect Properties

Property	Type	Default	Description
`filter`	`FilterOptions`	`{}`	SVG filters and effects
`chromaKey`	`ChromaKey`	`{}`	Chroma key color for green screen

ChromaKey interface

interface ChromaKey {
  color: string;
  similarity?: number;
  blend?: number;
}

PositionPreset

type PositionPreset =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-right"
  | "bottom-center"
  | "bottom-left"
  | "custom";

ResizeMode

type ResizeMode = "contain" | "cover";

Anchor

export type Anchor =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

interface FilterOptions {
  brightness?: number;
  contrast?: number;
  "hue-rotate"?: string;
  saturate?: number;
  blur?: string;
  [key: string]: string | number | undefined;
}

Filter Properties

Property	Type	Range	Description
`brightness`	`number`	`0-2+`	Brightness level (1 = normal)
`contrast`	`number`	`0-2+`	Contrast level (1 = normal)
`hue-rotate`	`string`	`"0deg"-"360deg"`	Hue rotation
`saturate`	`number`	`0-2+`	Saturation level (1 = normal)
`blur`	`string`	`"0px"-"50px"`	Blur radius

Basic Examples

Simple Rectangle

{
  type: "SVG",
  svg: `
    <svg width="200" height="150" viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="0" width="200" height="150" fill="#ff6b35" />
    </svg>
  `
}

Circle with Animation

{
  type: "SVG",
  position: "center-center",
  enterBegin: 0,
  enterEnd: 1,
  exitBegin: 4,
  exitEnd: 5,
  enterAnimation: "fade",
  exitAnimation: "fade",
  svg: `
    <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <circle cx="100" cy="100" r="80" fill="#3498db" stroke="#2c3e50" stroke-width="4" />
    </svg>
  `
}

Complex Shape

{
  type: "SVG",
  position: "center-center",
  svg: `
    <svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
      <path d="M50,100 Q150,50 250,100 Q150,150 50,100 Z"
            fill="#e74c3c"
            stroke="#c0392b"
            stroke-width="2" />
    </svg>
  `
}

Advanced Examples

Multi-Color Logo

{
  type: "SVG",
  position: "center-center",
  track: 10,
  svg: `
    <svg width="150" height="100" viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
      <rect x="10" y="10" width="30" height="80" fill="#ff6b35" />
      <rect x="50" y="30" width="30" height="60" fill="#f7931e" />
      <rect x="90" y="20" width="30" height="70" fill="#ffd700" />
      <text x="75" y="95" text-anchor="middle" font-family="Arial" font-size="12" fill="#333">LOGO</text>
    </svg>
  `
}

Icon with Gradient

{
  type: "SVG",
  position: "center-center",
  enterAnimation: "fade",
  svg: `
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#ff6b35;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#f7931e;stop-opacity:1" />
        </linearGradient>
      </defs>
      <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
      <path d="M35,50 L45,60 L65,40" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" />
    </svg>
  `
}

Complex Examples

Chart/Graph

{
  type: "SVG",
  position: "center-center",
  enterBegin: 0,
  enterEnd: 1,
  enterAnimation: "fade",
  svg: `
    <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
      <!-- Background -->
      <rect width="400" height="300" fill="#f8f9fa" stroke="#dee2e6" />

      <!-- Bars -->
      <rect x="50" y="200" width="40" height="80" fill="#007bff" />
      <rect x="120" y="150" width="40" height="130" fill="#28a745" />
      <rect x="190" y="100" width="40" height="180" fill="#ffc107" />
      <rect x="260" y="120" width="40" height="160" fill="#dc3545" />

      <!-- Labels -->
      <text x="70" y="295" text-anchor="middle" font-size="12" fill="#333">Q1</text>
      <text x="140" y="295" text-anchor="middle" font-size="12" fill="#333">Q2</text>
      <text x="210" y="295" text-anchor="middle" font-size="12" fill="#333">Q3</text>
      <text x="280" y="295" text-anchor="middle" font-size="12" fill="#333">Q4</text>

      <!-- Title -->
      <text x="200" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="#333">
        Quarterly Sales
      </text>
    </svg>
  `
}

Decorative Border

{
  type: "SVG",
  track: 5,
  opacity: 0.8,
  svg: `
    <svg width="1280" height="720" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
      <!-- Corner decorations -->
      <path d="M0,0 L100,0 L100,20 L20,20 L20,100 L0,100 Z" fill="#ff6b35" />
      <path d="M1280,0 L1180,0 L1180,20 L1260,20 L1260,100 L1280,100 Z" fill="#ff6b35" />
      <path d="M0,720 L100,720 L100,700 L20,700 L20,620 L0,620 Z" fill="#ff6b35" />
      <path d="M1280,720 L1180,720 L1180,700 L1260,700 L1260,620 L1280,620 Z" fill="#ff6b35" />

      <!-- Side borders -->
      <rect x="0" y="150" width="10" height="420" fill="#ff6b35" opacity="0.5" />
      <rect x="1270" y="150" width="10" height="420" fill="#ff6b35" opacity="0.5" />
    </svg>
  `
}

Button Style

{
  type: "SVG",
  position: "center-center"
  svg: `
    <svg width="200" height="60" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="buttonGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:#4CAF50;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#45a049;stop-opacity:1" />
        </linearGradient>
      </defs>

      <rect x="5" y="5" width="190" height="50" rx="25" ry="25"
            fill="url(#buttonGrad)"
            stroke="#3e8e41"
            stroke-width="2" />

      <text x="100" y="35" text-anchor="middle"
            font-size="16" font-weight="bold"
            fill="white">
        Click Here
      </text>
    </svg>
  `
}

Geometric Pattern

{
  type: "SVG",
  position: "center-center",
  angle: 45,
  opacity: 0.7,
  svg: `
    <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <pattern id="triangles" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
        <polygon points="30,10 50,50 10,50" fill="#3498db" opacity="0.8" />
      </pattern>

      <rect width="300" height="300" fill="url(#triangles)" />
    </svg>
  `
}

SVG Best Practices

Optimization

ViewBox: Always include viewBox for proper scaling
Minimize Code: Remove unnecessary elements and attributes
Use Symbols: Reuse common elements with <symbol> and <use>
Optimize Paths: Simplify complex paths when possible

Styling

Inline Styles: Use inline styles for better compatibility
Color Consistency: Use consistent color schemes
Stroke Width: Use appropriate stroke widths for the scale

Performance

Complexity: Keep SVG complexity reasonable for rendering performance
Animation: Use CSS animations sparingly in SVG content
File Size: Optimize SVG content to reduce overall size
Caching: Reuse similar SVG patterns across elements

Common SVG Patterns

Basic Shapes

// Rectangle
{
  type: "SVG",
  svg: `<svg viewBox="0 0 100 60"><rect width="100" height="60" fill="#ff6b35" /></svg>`
}

// Circle
{
  type: "SVG",
  svg: `<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#3498db" /></svg>`
}

// Triangle
{
  type: "SVG",
  svg: `<svg viewBox="0 0 100 100"><polygon points="50,10 90,90 10,90" fill="#e74c3c" /></svg>`
}

Icons

// Home Icon
{
  type: "SVG",
  svg: `
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z" fill="#333" />
    </svg>
  `
}

// Star Icon
{
  type: "SVG",
  width: 50, height: 50,
  svg: `
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
            fill="#ffd700" />
    </svg>
  `
}

Logos and Branding

{
  type: "SVG",
  svg: `
    <svg viewBox="0 0 200 80" xmlns="http://www.w3.org/2000/svg">
      <!-- Company logo example -->
      <rect x="10" y="10" width="60" height="60" rx="10" fill="#007bff" />
      <text x="40" y="45" text-anchor="middle" font-size="24" font-weight="bold" fill="white">C</text>
      <text x="90" y="30" font-size="20" font-weight="bold" fill="#333">Company</text>
      <text x="90" y="50" font-size="12" fill="#666">Your tagline here</text>
    </svg>
  `
}

SVG with Filters

Drop Shadow

{
  type: "SVG",
  svg: `
    <svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="dropshadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#000" flood-opacity="0.3"/>
        </filter>
      </defs>
      <rect x="20" y="20" width="160" height="60" rx="10"
            fill="#ff6b35" filter="url(#dropshadow)" />
    </svg>
  `
}

Glow Effect

{
  type: "SVG",
  svg: `
    <svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="glow">
          <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>
      <circle cx="75" cy="75" r="50" fill="#3498db" filter="url(#glow)" />
    </svg>
  `
}

Responsive SVG

Scalable Design

{
  type: "SVG",
  x: 0, y: 0,
  width: 1280, height: 720, // Full screen
  svg: `
    <svg width="1280" height="720" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
      <!-- Content scales with container -->
      <rect x="10%" y="10%" width="80%" height="80%" fill="#f8f9fa" stroke="#dee2e6" />
      <text x="50%" y="50%" text-anchor="middle" font-size="5%" fill="#333">
        Responsive Content
      </text>
    </svg>
  `
}

Troubleshooting

Validation

SVG Syntax: Validate SVG markup before use
Browser Compatibility: Test SVG rendering across different contexts
Viewport: Make sure the SVG has viewport otherwise the width and height wouldn't applied as expected.

Image Elements - Raster image handling
Animation Effects - Animating SVG elements
Text Elements - Text-based content

Next Steps

Audio Elements - Add audio to your videos
Animation Effects - Learn about SVG animations

Overview​

SVGItem Interface​

Properties​

Required Properties​

Position & Size Properties​

Timing Properties​

Visual Properties​

Animation Properties​

Effect Properties​

ChromaKey interface​

PositionPreset​

ResizeMode​

Anchor​

FilterOptions Interface​

Filter Properties​

Basic Examples​

Simple Rectangle​

Circle with Animation​

Complex Shape​

Advanced Examples​

Multi-Color Logo​

Icon with Gradient​

Complex Examples​

Chart/Graph​

Decorative Border​

Button Style​

Geometric Pattern​

SVG Best Practices​

Optimization​

Styling​

Performance​

Common SVG Patterns​

Basic Shapes​

Icons​

Logos and Branding​

SVG with Filters​

Drop Shadow​

Glow Effect​

Responsive SVG​

Scalable Design​

Troubleshooting​

Validation​

Related Pages​

Next Steps​