Images & Vectors - Complete Guide
Images & Vectors - Complete Guide
Learn how to import, manage, and animate images and SVG vectors in Scribe Animator. This guide covers the Images panel, Vector Import workflow, Image Library management, and Inspector properties.
Application Layout Overview
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR │
│ [File] [Edit] [View] [Export] [Share] [?] │
├────────────┬───────────────────────────────────────────────┬────────────────┤
│ │ │ │
│ LEFT │ │ RIGHT │
│ SIDEBAR │ CANVAS AREA │ SIDEBAR │
│ │ │ │
│ ┌────────┐ │ ┌─────────────────────────────┐ │ ┌────────────┐ │
│ │ 📁 │ │ │ │ │ │ INSPECTOR │ │
│ │ Assets │ │ │ Your Animation │ │ │ PANEL │ │
│ ├────────┤ │ │ Canvas │ │ ├────────────┤ │
│ │ 🖼️ │◄├─────┤ │───────────►│ Properties │ │
│ │ IMAGES │ │ │ [Images appear here │ │ │ Position │ │
│ ├────────┤ │ │ after importing] │ │ │ Image │ │
│ │ 📝 │ │ │ │ │ │ Animation │ │
│ │ Text │ │ └─────────────────────────────┘ │ │ Layer │ │
│ ├────────┤ │ │ │ Camera │ │
│ │ 🎵 │ │ │ └────────────┘ │
│ │ Audio │ │ │ │
│ ├────────┤ │ │ │
│ │ 🎨 │ │ │ │
│ │ Backgr │ │ │ │
│ └────────┘ │ │ │
│ │ │ │
├────────────┴───────────────────────────────────────────────┴────────────────┤
│ TIMELINE │
│ [▶️ Play] ════════════════════════════════════════════════ [00:00 / 00:30] │
└─────────────────────────────────────────────────────────────────────────────┘
Image Feature Access Points:
- Left Sidebar → 🖼️ Images — Browse and add images from your library
- Left Sidebar → 📁 Assets → Vector Import — Import new SVG/raster files
- Right Sidebar → Inspector → Image Section — Edit selected image properties
- Canvas → Drag & Drop — Quick import by dropping files directly
Image Types: SVG vs Raster
Scribe Animator supports two main types of images:
┌─────────────────────────────────────────────────────────────────────────────┐
│ IMAGE TYPES COMPARISON │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ SVG (VECTOR) RASTER (BITMAP) │
│ ───────────── ─────────────── │
│ │
│ Formats: Formats: │
│ ├── .svg ├── .png │
│ └── .svgz (compressed) ├── .jpg / .jpeg │
│ ├── .webp │
│ ├── .gif (animated supported) │
│ ├── .bmp │
│ └── .tiff / .tif │
│ │
│ ✓ Scales infinitely ✗ Pixelates when scaled up │
│ ✓ Hand-draw animation effect ✓ Good for photos │
│ ✓ Stroke-by-stroke reveal ✓ Good for backgrounds │
│ ✓ Small file size ✗ Larger file size │
│ ✓ Editable paths ✗ Not editable │
│ │
│ BEST FOR: BEST FOR: │
│ ├── Icons, logos ├── Photographs │
│ ├── Illustrations ├── Screenshots │
│ ├── Diagrams ├── Backgrounds │
│ └── Animated drawings └── Textures │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
tip
When in doubt, use SVG for icons and illustrations — they look crisp at any size and enable the signature hand-drawing animation effect!
note
Animated GIFs retain their animation when added to the canvas. They play automatically during preview and export.
Quick Start: Adding Images
Method 1: Drag & Drop (Fastest)
┌──────────────────────────────────────────────────────────────────┐
│ │
│ Simply drag any image file from your computer │
│ and drop it directly onto the canvas! │
│ │
│ ┌─────────┐ │
│ │ 🖼️.svg │ ─────────► ┌─────────────────────┐ │
│ │ 🖼️.png │ │ │ │
│ │ 🖼️.jpg │ DROP │ CANVAS │ │
│ └─────────┘ HERE │ │ │
│ └─────────────────────┘ │
│ │
│ Supported: SVG, PNG, JPG, WEBP, GIF, BMP, TIFF │
│ │
└──────────────────────────────────────────────────────────────────┘
Method 2: Images Panel (Left Sidebar)
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 🖼️ │ │ Browse your │ │ Click any │
│ Images icon │ ───► │ library or │ ───► │ image to │
│ in left │ │ upload new │ │ add to │
│ sidebar │ │ │ │ canvas │
└──────────────┘ └──────────────┘ └──────────────┘
Method 3: Vector Import Panel (For SVGs)
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Left Sidebar │ │ Choose file │ │ Configure │
│ → Assets │ ───► │ or drag & │ ───► │ import │
│ → Vector │ │ drop SVG │ │ settings │
│ Import │ │ │ │ → Add │
└──────────────┘ └──────────────┘ └──────────────┘
tip
Drag & Drop is fastest for quick imports. Use the Vector Import Panel when you need fine control over SVG processing and animation settings.
Left Sidebar: Images Panel
When you click the Images icon in the left sidebar, the Images Library opens.
Images Panel Layout
┌─────────────────────────────────────────┐
│ 🖼️ Images Library │
├─────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ 🔎 Search images... │ │
│ └─────────────────────────────────────┘ │
│ │
│ Type: [📦 All ▼] │
│ ├── 📦 All │
│ ├── 🖼️ Images (Raster) │
│ └── 📐 SVG (Vectors) │
│ │
├─────────────────────────────────────────┤
│ [📦 All] [🕐 Recent] [⭐ Favorites] │
├─────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │
│ │ │ 🖼️ │ │ │ │ 📐 │ │ │ │ 🖼️ │ │ │
│ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │
│ │photo.png│ │logo.svg │ │bg.jpg │ │
│ │ ⭐ │ │ ⭐ │ │ ⭐ │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │
│ │ │ 📐 │ │ │ │ 🖼️ │ │ │ │ 📐 │ │ │
│ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │
│ │icon.svg │ │team.png │ │chart.svg│ │
│ │ ⭐ │ │ ⭐ │ │ ⭐ │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
├─────────────────────────────────────────┤
│ 6 / 24 images │
│ [Advanced Image →] │
└─────────────────────────────────────────┘
Filter Options
| Filter | Icon | Description |
|---|---|---|
| All | 📦 | Shows all images (raster + SVG) |
| Images | 🖼️ | Shows only raster images (PNG, JPG, etc.) |
| SVG | 📐 | Shows only vector images (SVG) |
Tab Navigation
┌────────────────────────────────────────────────────────────┐
│ TAB OPTIONS │
├────────────────────────────────────────────────────────────┤
│ │
│ 📦 All → All images in your library │
│ │
│ 🕐 Recent → Images you recently used in projects │
│ (sorted by most recent first) │
│ │
│ ⭐ Favorites → Images you've starred │
│ (click ⭐ on any image to add) │
│ │
└────────────────────────────────────────────────────────────┘
Favorites & Sync
- Click the ⭐ icon on any image to add/remove from favorites
- When signed in, favorites sync across all your devices
- Local favorites work even when offline
note
Favorites sync requires an active internet connection. Offline changes sync automatically when you reconnect.
Vector Import Panel
The Vector Import panel is your advanced tool for importing and processing SVG and raster files.
Accessing Vector Import
┌─────────────────────────────────────────────────────────────────────────┐
│ ACCESS VECTOR IMPORT │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Method 1: Left Sidebar │
│ ────────────────────── │
│ Left Sidebar → 📁 Assets → Vector Import (at top) │
│ │
│ Method 2: Drag & Drop │
│ ───────────────────── │
│ Drag any SVG/image file onto canvas → Vector Import opens │
│ │
│ Method 3: Images Panel │
│ ────────────────────── │
│ Images Panel → "Advanced Image →" button (bottom) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Vector Import Panel Layout
┌─────────────────────────────────────────────────────────────────────────┐
│ Vector Import [×] │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ DRAG & DROP ZONE │ │
│ │ │ │
│ │ 📁 Drop SVG, PNG, JPG, or other │ │
│ │ image files here │ │
│ │ │ │
│ │ ─── OR ─── │ │
│ │ │ │
│ │ [Choose File...] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────┘ │
│ │
│ ───────────────────────────────────────────────────────────────────── │
│ │
│ AFTER FILE SELECTED: │
│ │
│ ┌─────────────────────┐ Processing Options: │
│ │ │ ┌─────────────────────────────────────────┐ │
│ │ [SVG Preview] │ │ Preset: [Editor Safe ▼] │ │
│ │ │ │ Profile: [Standard ▼] │ │
│ │ │ │ │ │
│ │ │ │ ☑ Optimize paths │ │
│ │ │ │ ☐ Monochrome output │ │
│ └─────────────────────┘ └─────────────────────────────────────────┘ │
│ │
│ Animation Settings: │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Reveal Mode: [Draw In ▼] │ │
│ │ Duration: [3.0] seconds │ │
│ │ ☑ Enable hand animation │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ [Cancel] [Add to Canvas] │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Processing Presets
| Preset | Description | Best For |
|---|---|---|
| Editor Safe | Balanced quality and performance | Most use cases |
| High Quality | Maximum path fidelity | Detailed illustrations |
| Fast Preview | Quick processing, lower quality | Testing/previewing |
| Minimal | Smallest output | Simple icons |
Processing Profiles
| Profile | Description |
|---|---|
| Standard | Default processing for most SVGs |
| Detailed | Preserves more small details |
| Simplified | Reduces path complexity |
tip
Start with Editor Safe preset — it works well for 90% of SVGs. Only switch to High Quality if you notice missing details in complex illustrations.
warning
High Quality preset can significantly increase processing time for complex SVGs. Use it only when absolutely necessary.
Reveal Modes (Animation)
┌─────────────────────────────────────────────────────────────────────────┐
│ SVG REVEAL MODES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ DRAW IN (Default) │
│ ───────────────── │
│ Strokes are drawn progressively, simulating hand-drawing │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ────────────────► Stroke reveals left to right │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ FADE IN │
│ ─────── │
│ Entire SVG fades from transparent to opaque │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ░░░░░░░░░░░░░░ → ████████████████ (opacity 0%→100%) │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ INSTANT │
│ ─────── │
│ SVG appears immediately with no animation │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ████████████████ (visible immediately) │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Raster Image Tracing (Convert to SVG)
Raster images (PNG, JPG, etc.) can be traced/converted to SVG for hand-draw animation.
How Raster Tracing Works
┌─────────────────────────────────────────────────────────────────────────┐
│ RASTER TO SVG CONVERSION │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ORIGINAL RASTER TRACED SVG │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ ░░░█████░░░░░░░ │ │ ╭───────╮ │ │
│ │ ░░█░░░░░█░░░░░░ │ ────► │ │ │ │ │
│ │ ░█░░░░░░░█░░░░░ │ TRACE │ │ │ │ │
│ │ ░█░░░░░░░█░░░░░ │ │ │ │ │ │
│ │ ░░█████████░░░░ │ │ ╰───────╯ │ │
│ └─────────────────┘ └─────────────────┘ │
│ (Pixels) (Vector paths) │
│ │
│ After tracing, you can use Draw In animation! │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Trace Settings
| Setting | Description | Range |
|---|---|---|
| Mode | Color mode | BW (black/white), Color, Grayscale |
| Layers | Color depth | 2–256 (more = detailed, slower) |
| Threshold | BW cutoff point | 0–255 |
| Curve Fit | Path smoothness | Spline (smooth) / Polygon (sharp) |
| Corner | Corner detection | 0–180 degrees |
| Speckle | Noise removal | 0–100 (higher = removes more) |
note
Raster tracing works best on images with clear edges and good contrast. Photos with gradients may not trace well.
tip
For best tracing results: use images with high contrast, solid colors, and clean edges. Logos and line art trace beautifully!
warning
Tracing complex photographs produces poor results and very large SVG files. Use raster format (PNG/JPG) for photos instead.
Right Sidebar: Inspector Panel (Image Section)
When you select an image or SVG on the canvas, the Inspector panel shows the Image section.
Inspector Image Section Layout
┌─────────────────────────────────────┐
│ ▼ Image │
├─────────────────────────────────────┤
│ │
│ Width Height │
│ ┌───────────┐ ┌───────────┐ │
│ │ 400 │ │ 300 │ │
│ └───────────┘ └───────────┘ │
│ │
│ Opacity: 100% │
│ ├────────────────────────────────●┤ │
│ 0% 100% │
│ │
└─────────────────────────────────────┘
Image Properties Reference
| Property | Description | How to Use |
|---|---|---|
| Width | Image width in pixels | Type value or use canvas handles |
| Height | Image height in pixels | Type value or use canvas handles |
| Opacity | Transparency level (0-100%) | Drag slider or type percentage |
Additional Properties (SVG Only)
For SVG images, additional options may appear:
┌─────────────────────────────────────┐
│ ▼ SVG Path │
├─────────────────────────────────────┤
│ │
│ Stroke Color │
│ ┌────┐ ┌────────────────────────┐ │
│ │████│ │ #000000 │ │
│ └────┘ └────────────────────────┘ │
│ │
│ Stroke Width: 2px │
│ ├──────────●─────────────────────┤ │
│ 0.5px 10px │
│ │
│ Fill Color │
│ ┌────┐ ┌────────────────────────┐ │
│ │░░░░│ │ none │ │
│ └────┘ └────────────────────────┘ │
│ │
└─────────────────────────────────────┘
Image Library Management
Custom Assets Panel (Advanced)
Access the full Image Library via the Advanced Image → button.
┌─────────────────────────────────────────────────────────────────────────┐
│ Custom Assets Library [×] │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Library Tab: [Images] [Vectors (SVG)] │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 🔎 Search... [🔄 Refresh]│ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │
│ │ │ 🖼️ │ │ │ │ 📐 │ │ │ │ 🖼️ │ │ │ │ 📐 │ │ │ │ 🖼️ │ │ │
│ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │
│ │ file1 │ │ file2 │ │ file3 │ │ file4 │ │ file5 │ │
│ │ [🗑️][📥]│ │ [🗑️][📥]│ │ [🗑️][📥]│ │ [🗑️][📥]│ │ [🗑️][📥]│ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ───────────────────────────────────────────────────────────────────── │
│ │
│ Upload New: │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ [Choose Files...] or drag & drop │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Library Actions
| Action | Icon | Description |
|---|---|---|
| Delete | 🗑️ | Remove image from library (cannot undo) |
| Download | 📥 | Download original file to your computer |
| Add to Canvas | Click image | Places image on current canvas |
warning
Delete is permanent! Deleted images cannot be recovered. Make sure you have a backup before removing images from your library.
Upload Guidelines
┌─────────────────────────────────────────────────────────────────────────┐
│ UPLOAD GUIDELINES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ SUPPORTED FORMATS: │
│ ├── SVG, SVGZ (vectors) │
│ ├── PNG, JPG/JPEG (photos) │
│ ├── WEBP (modern format) │
│ ├── GIF (including animated) │
│ ├── BMP, TIFF/TIF (legacy) │
│ │
│ RECOMMENDED: │
│ ├── Keep files under 10MB for best performance │
│ ├── Use SVG for illustrations/icons │
│ ├── Use PNG for images needing transparency │
│ ├── Use JPG for photographs │
│ └── Use WEBP for best quality/size ratio │
│ │
│ AUTOMATIC PROCESSING: │
│ ├── Images are compressed for optimal storage │
│ ├── Thumbnails are generated automatically │
│ └── SVGs are sanitized for security │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Working with Images on Canvas
Selection & Transformation
┌─────────────────────────────────────────────────────────────────────────┐
│ IMAGE SELECTION ON CANVAS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ When image is selected: │
│ │
│ ○ (rotation handle) │
│ │ │
│ ┌───────┴───────────────────┐ │
│ ●───────────────────────────● ← corner handles (resize) │
│ │ │ │
│ │ ┌─────────────┐ │ │
│ │ │ IMAGE │ │ │
│ │ │ CONTENT │ │ │
│ │ └─────────────┘ │ │
│ │ │ │
│ ●───────────────────────────● │
│ └───────────────────────────┘ │
│ │
│ ACTIONS: │
│ ├── Click + Drag inside → Move image │
│ ├── Drag corner handles → Resize (aspect ratio locked) │
│ ├── Drag rotation handle → Rotate │
│ └── Press Delete → Remove from canvas │
│ │
│ NOTE: Aspect ratio is automatically locked for images │
│ to prevent distortion. │
│ │
└─────────────────────────────────────────────────────────────────────────┘
tip
Hold Shift while dragging corner handles to unlock aspect ratio temporarily. This allows free-form scaling but may distort images.
note
All transformations (move, resize, rotate) are undo-able. Press ⌘Z (Mac) or Ctrl+Z (Windows) to revert changes.
Layering
Control which images appear in front or behind:
LAYER ORDER (Inspector → Layer Order section)
┌───────────────────────┐
│ TOP (Front) │ ← Appears on top
├───────────────────────┤
│ Image A │
├───────────────────────┤
│ Image B │
├───────────────────────┤
│ Text Element │
├───────────────────────┤
│ Image C │
├───────────────────────┤
│ BOTTOM (Back) │ ← Appears behind
└───────────────────────┘
Actions:
├── [Bring to Front] → Move to top layer
├── [Send to Back] → Move to bottom layer
├── [Bring Forward] → Move up one layer
└── [Send Backward] → Move down one layer
Image Animation
Images can be animated using the Animation section in the Inspector.
Animation Types for Images
┌─────────────────────────────────────────────────────────────────────────┐
│ IMAGE ANIMATION TYPES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ NONE │
│ ──── │
│ Image appears instantly at start time. │
│ │
│ FADE IN │
│ ─────── │
│ Image fades from transparent to opaque. │
│ [ ... ] → [IMAGE] (opacity 0% → 100%) │
│ │
│ DRAW IN (SVG only) │
│ ────────────────── │
│ Hand draws the SVG stroke by stroke. │
│ Simulates whiteboard hand-drawing effect. │
│ [✏️───────────────────────────] → [COMPLETE SVG] │
│ │
│ SCALE IN │
│ ──────── │
│ Image grows from small to full size. │
│ [·] → [IMAGE] (scale 0% → 100%) │
│ │
│ SLIDE IN │
│ ──────── │
│ Image slides in from off-screen. │
│ Direction options: Left, Right, Top, Bottom │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Hand Animation (SVG Draw)
For SVGs with Draw In animation, you can enable the hand animation:
┌─────────────────────────────────────────────────────────────────────────┐
│ HAND ANIMATION SETTINGS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Enable Hand: ☑ (checkbox in Animation section) │
│ │
│ When enabled, a drawing hand follows the stroke path: │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ │ │
│ │ ────────────────✋ │ │
│ │ ↑ stroke path ↑ hand follows │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Hand Style: Choose from multiple hand presets │
│ Tool: Pen, marker, pencil, etc. │
│ │
└─────────────────────────────────────────────────────────────────────────┘
tip
The Draw In animation with hand creates the signature whiteboard animation effect. Use it for key visuals to maximize engagement!
warning
Draw In animation only works with SVG images. Raster images (PNG, JPG) will show "Fade In" or "Instant" instead. Convert rasters to SVG via tracing if needed.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
⌘V / Ctrl+V | Paste image from clipboard |
Delete / Backspace | Delete selected image |
⌘C / Ctrl+C | Copy selected image |
⌘D / Ctrl+D | Duplicate selected image |
⌘Z / Ctrl+Z | Undo |
⌘⇧Z / Ctrl+Shift+Z | Redo |
Arrow keys | Nudge image (1px) |
Shift + Arrow | Nudge image (10px) |
] | Bring Forward |
[ | Send Backward |
⌘] / Ctrl+] | Bring to Front |
⌘[ / Ctrl+[ | Send to Back |
Validation Rules
Scribe Animator enforces certain validation rules to ensure images import and render correctly.
File Upload Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ FILE UPLOAD RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ RULE LIMIT ERROR MESSAGE │
│ ────────────────────────────────────────────────────────────────── │
│ Maximum file size 10MB "File too large" │
│ Minimum file size 1 byte "Empty file" │
│ Allowed raster formats PNG,JPG,WEBP, "Unsupported │
│ GIF,BMP,TIFF format" │
│ Allowed vector formats SVG,SVGZ "Unsupported │
│ format" │
│ Maximum filename length 255 chars "Name too long" │
│ │
│ SVG SPECIFIC: │
│ ├── Script tags Removed (sanitized) │
│ ├── External references Blocked (security) │
│ ├── Embedded fonts Supported (no restriction) │
│ └── Maximum paths 50,000 "Too complex" │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Image Dimension Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ DIMENSION RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Property Minimum Maximum Default │
│ ──────────────────────────────────────────────────────────────────── │
│ Width 1px 10,000px Original width │
│ Height 1px 10,000px Original height │
│ Aspect Ratio N/A N/A Locked (by default) │
│ │
│ ⚠️ Images larger than 4096×4096 may impact performance │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Opacity Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ OPACITY RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Property Minimum Maximum Default │
│ ──────────────────────────────────────────────────────────────────── │
│ Opacity 0% 100% 100% │
│ │
│ INPUT HANDLING: │
│ ├── Values < 0% → Clamped to 0% │
│ ├── Values > 100% → Clamped to 100% │
│ ├── Non-numeric input → Rejected, previous value kept │
│ └── Decimal values → Rounded to nearest integer │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Animation Timing Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ ANIMATION TIMING RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Property Minimum Maximum Default │
│ ──────────────────────────────────────────────────────────────────── │
│ Start Time 0s Project end 0s │
│ Duration 0.1s 60s 2s (for SVG draw) │
│ Hand Speed 0.5x 3x 1x │
│ │
│ VALIDATION ERRORS: │
│ ├── Start time > project length → Warning shown, time adjusted │
│ ├── Duration = 0 → Auto-set to 0.1s minimum │
│ ├── Negative values → Converted to absolute value │
│ └── Non-numeric input → Rejected, previous value kept │
│ │
└─────────────────────────────────────────────────────────────────────────┘
warning
Files exceeding 10MB will be rejected during upload. Compress large images before importing using tools like TinyPNG or ImageOptim.
note
SVG files are automatically sanitized on import. Script tags, external references, and potentially dangerous content are removed for security.
Best Practices
Image Guidelines
┌─────────────────────────────────────────────────────────────────────────┐
│ IMAGE BEST PRACTICES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ✓ DO: │
│ ├── Use SVG for icons, logos, and illustrations │
│ ├── Use PNG for images with transparency │
│ ├── Use JPG for photos (smaller file size) │
│ ├── Optimize images before uploading (reduce file size) │
│ ├── Use consistent image sizes when possible │
│ └── Name files descriptively for easy search │
│ │
│ ✗ DON'T: │
│ ├── Upload extremely large images (>10MB) │
│ ├── Use raster images when SVG would work better │
│ ├── Scale images up excessively (causes blur) │
│ ├── Use too many images per scene (performance) │
│ └── Forget to check copyright/licensing │
│ │
└─────────────────────────────────────────────────────────────────────────┘
SVG Tips
┌─────────────────────────────────────────────────────────────────────────┐
│ SVG BEST PRACTICES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ FOR BEST DRAW-IN ANIMATION: │
│ ├── Use outlined strokes, not filled shapes │
│ ├── Ensure paths have logical stroke order │
│ ├── Remove embedded raster images │
│ ├── Simplify complex paths if possible │
│ └── Test animation before final render │
│ │
│ OPTIMIZATION: │
│ ├── Remove hidden layers │
│ ├── Remove unused elements │
│ ├── Use "Editor Safe" preset for most SVGs │
│ └── Reduce path complexity for performance │
│ │
└─────────────────────────────────────────────────────────────────────────┘
tip
Before importing SVGs from Illustrator or Figma, export with "Outline Strokes" option enabled. This ensures Draw In animation works correctly!
note
Name your image files descriptively (e.g., company-logo-blue.svg instead of image1.svg). This makes searching and organizing much easier.
Troubleshooting
Common Issues
| Problem | Possible Cause | Solution |
|---|---|---|
| Image appears blurry | Scaled up too much | Use higher resolution source |
| SVG not drawing | No strokes in SVG | Check SVG has stroke paths, not just fills |
| Import fails | File too large | Reduce file size, try different format |
| Hand not showing | Animation type wrong | Set animation to "Draw In" |
| Image not loading | File corrupted | Try re-exporting from source app |
| Slow performance | Too many images | Reduce image count or file sizes |
File Format Issues
┌─────────────────────────────────────────────────────────────────────────┐
│ FORMAT TROUBLESHOOTING │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ SVG NOT IMPORTING? │
│ ├── Check for script tags (removed for security) │
│ ├── Try re-exporting from Illustrator/Figma/Inkscape │
│ ├── Ensure file is valid XML │
│ └── Try compressed (.svgz) version │
│ │
│ RASTER NOT DISPLAYING? │
│ ├── Check file isn't corrupted │
│ ├── Try different format (PNG instead of TIFF) │
│ ├── Reduce dimensions if very large │
│ └── Clear browser cache and retry │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Summary: Where to Find Everything
┌─────────────────────────────────────────────────────────────────────────┐
│ QUICK REFERENCE MAP │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ TO ADD IMAGES: │
│ └── Drag & drop onto canvas │
│ OR Left Sidebar → 🖼️ Images → Click image │
│ OR Left Sidebar → Assets → Vector Import │
│ │
│ TO BROWSE YOUR LIBRARY: │
│ └── Left Sidebar → 🖼️ Images │
│ │
│ TO UPLOAD NEW IMAGES: │
│ └── Images Panel → "Advanced Image →" → Upload │
│ OR Drag & drop file onto canvas │
│ │
│ TO EDIT IMAGE SIZE/OPACITY: │
│ └── Select image → Inspector (right) → Image section │
│ │
│ TO CHANGE LAYER ORDER: │
│ └── Select image → Inspector → Layer Order section │
│ │
│ TO ANIMATE IMAGE: │
│ └── Select image → Inspector → Animation section │
│ │
│ TO IMPORT SVG WITH SETTINGS: │
│ └── Left Sidebar → Assets → Vector Import │
│ │
│ TO CONVERT RASTER TO SVG: │
│ └── Vector Import → Drop raster image → Use Trace settings │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Questions? Check out our Documentation or visit app.ohotech.com to start creating!