Assets & SVG Icons - Complete Guide

Learn how to browse reusable drawing assets and import SVG or raster artwork into Scribe Animator. The library catalog is service-provided and can change; do not treat a historical icon count as a product guarantee.

Current visual orientation

The Drawings library is for reusable catalog items. Vectors opens a local-file pipeline. Use local Vector Import when you need deterministic input or the account-backed catalog is unavailable.

12345

This authentic failure state shows an important boundary: catalog availability and local vector import are separate workflows.

Screenshot callouts

1. 1
   Drawings library

   Open the reusable drawing catalog from the left rail.
2. 2
   Search and kind filter

   Search loaded catalog items and narrow them by kind.
3. 3
   All, Recent, and Favorites

   Switch between the complete loaded catalog, recent choices, and favorites.
4. 4
   Retry

   A catalog network or service failure is recoverable and does not block local Vector Import.
5. 5
   Advanced Drawings

   Open the advanced drawing workflow when the compact catalog is not enough.

1234

Vector Import runs the real intake and vector-processing pipeline; it is not a documentation-only preview.

Screenshot callouts

1. 1
   Choose file

   Select a supported local SVG or raster file.
2. 2
   Drop zone and formats

   Drag SVG, PNG, JPG, WEBP, GIF, BMP, or TIFF into this area.
3. 3
   Processing result

   The processed preview, settings, diagnostics, and commit action appear here after intake.
4. 4
   Close safely

   Close with this button or Escape without committing an unfinished import.

Product UI and source verification

These captures and control locations were checked against the running Desktop editor with browser-based UI review on July 26, 2026. Catalog size, category counts, and availability are not compatibility guarantees. For the current decision guide, supported-format boundaries, tracing limits, and exact commit checks, follow Import SVG and vector artwork.

Application Layout Overview

Use the authentic screenshots above as the workspace reference. The left rail opens Drawings, Vectors, and Images; committed objects appear on the canvas; Properties and the timeline edit the selected object's appearance, transform, layer order, animation, and timing.

Asset Feature Access Points:

• Left Sidebar → Drawings — Browse the currently available drawing catalog
• Left Sidebar → Vectors — Import a local SVG or raster file through the vector pipeline
• Left Sidebar → Images — Browse account-backed images; local image import is a separate action

---

Quick Start: Adding SVG Icons

Method 1: Asset Library (Recommended)

1. Open Drawings from the left rail.
2. Wait for the catalog to load. If the real panel shows the failure state captured above, use Retry once or switch to local Vector Import.
3. Search or narrow the loaded catalog with the available filter.
4. Select an item to add it to the active scene.
5. Confirm that the new object is selected on the canvas before editing it.

Method 2: Vector Import (External SVGs)

1. Open Vectors from the left rail.
2. Choose a trusted local file or drop it into the intake area shown above.
3. Review the processed preview, diagnostics, path count, and available settings.
4. Commit the result only after it looks correct.
5. Confirm the selected result on the canvas. Closing before commit leaves the scene unchanged.

tip

The Drawings library contains service-provided reusable artwork. Use it for quick discovery when the catalog is available; use Vectors for a local file you control.

---

Asset Library Overview

The Asset Library provides instant access to a curated collection of SVG icons.

Library Statistics

Metric	Value
Total Icons	Catalog-defined; can change
Format	SVG (Vector)
Categories	Catalog-defined
Searchable	✅ Yes
Pre-optimized	✅ Yes

Asset Library Panel

The real Drawings panel contains:

Control or state	Purpose
Search	Filters items already loaded from the service
Kind filter	Narrows the loaded catalog without changing the scene
All, Recent, Favorites	Changes the collection being browsed
Result cards	Add the chosen drawing to the active scene
Retry	Repeats a failed catalog request once
Advanced Drawings	Opens the more detailed drawing workflow

The screenshot above intentionally shows a retryable service failure. It proves the controls and recovery boundary, not a populated or successful catalog result.

---

Icon Categories

Browse icons by category for quick discovery.

Available Categories

Category	Icons	Description
All	Current catalog	Full loaded collection
Arrows	Varies	Directional arrows and navigation
Business	Varies	Office, charts, documents
Communication	Varies	Email, chat, phone, messaging
Devices	Varies	Computer, mobile, hardware
Education	Varies	School, learning, books
Files	Varies	Documents, folders, media
Health	Varies	Medical, fitness, wellness
Media	Varies	Play, pause, audio, video
Navigation	Varies	Maps, location, directions
Shopping	Varies	Cart, payment, e-commerce
Social	Varies	Social media, sharing
Technology	Varies	Code, server, database
Travel	Varies	Transportation, places
Weather	Varies	Sun, cloud, rain, snow
UI Elements	Varies	Buttons, checkboxes, menus

Category Selection

1. Open the available kind or category filter.
2. Choose All to remove the category constraint, or choose one available category.
3. Combine the filter with search when the loaded collection is large.
4. Clear the filter if an expected item disappears.

The service controls the live category list. The names in the table above are discovery examples, not a guaranteed fixed menu.

tip

Combine category filtering with search for the fastest results. For example, select "Business" category then search "chart" to find business chart icons quickly.

---

Searching Icons

Find icons quickly using the search feature.

Search Interface

Type a name, keyword, or category into Search. The panel filters the items that are actually loaded; it does not guarantee a particular result count. Clear the query to restore the current collection, and use Retry before diagnosing an empty service-backed catalog as a missing asset.

Search Tips

Search Term	What It Finds
arrow	All arrow-related icons
user	User, profile, person icons
check	Checkmarks, verification icons
settings	Gear, cog, configuration icons
play	Media playback icons
home	House, home navigation icons

note

Search is case-insensitive and matches partial words. Searching "arr" will find "arrow", "arrange", etc.

---

Adding Icons to Canvas

Click to Add

1. Find the required drawing in a successfully loaded catalog.
2. Select its card once.
3. Look for selection bounds on the canvas and a corresponding object track.
4. If nothing appears, verify the active scene, zoom out, and retry only after the catalog is healthy.

Icon Object Properties

When you add an icon to canvas, it becomes an SVG object with these properties:

Property group	What it controls
Position and size	X/Y placement, width, height, scale, and rotation
Appearance	Supported stroke, fill, opacity, and path styling
Animation	Entrance or drawing behavior, start time, and duration
Layer order	Whether the object appears in front of or behind other objects

The exact fields depend on the imported object's type and path data. Trust the visible Properties sections rather than assuming every SVG exposes every field.

---

Vector Import Panel

For importing your own SVG files, use the Vector Import panel.

Opening Vector Import

Use the authentic Vector Import screenshot above. The empty state exposes the chooser, drop zone, accepted visible formats, result region, and safe close action. It does not prove a successful import or show post-processing controls.

Import Workflow

1. Choose or drop a supported local file.
2. Wait for intake, sanitization, and processing to finish.
3. Inspect the real preview, warnings, path statistics, and available controls.
4. Choose static placement or drawing behavior only when the processed result offers it.
5. Add the result to the canvas, then verify selection, fidelity, and timing.

Do not infer success from the empty screenshot above. A commit action is meaningful only after the real result state appears.

Supported Formats

Format	Extension	Supported
SVG	.svg	✅ Yes
Compressed SVG	.svgz	✅ Yes
Bitmap in SVG	embedded PNG/JPG	⚠️ Converted
Animated SVG	SMIL animations	⚠️ Static only

warning

Animated SVGs (with SMIL or CSS animations) are imported as static images. The animation is not preserved — Scribe Animator applies its own drawing animation to the paths.

---

SVG Processing Pipeline

When you import or add an SVG, it goes through a processing pipeline.

Pipeline Steps

The pipeline runs these stages in order:

1. Intake and classify the selected file.
2. Parse and sanitize SVG markup or decode raster input.
3. Extract, flatten, validate, and measure supported geometry.
4. Normalize and optimize the resulting paths.
5. Plan drawing order only when drawing behavior is requested.
6. Return validated object data for preview and commit.

An error stops the pipeline before scene data is changed.

Pipeline Statistics

When processing an SVG, you'll see stats like:

Statistic	Why it matters
Input and output size	Shows whether normalization changed payload size
Extracted, dropped, and retained paths	Reveals filtering and resulting complexity
Processing duration	Helps diagnose unusually expensive input
Profile or mode	Records the configuration that produced the result

Values are file-dependent; example counts are not guaranteed output.

tip

The pipeline automatically drops tiny paths (less than 3px) that would be invisible when animated. This keeps your animations clean and fast.

---

Raster Image Tracing

Import bitmap images (PNG, JPG) and convert them to animatable vectors.

Trace Panel

After a supported raster file is processed:

1. Compare the original and traced previews.
2. Choose the trace profile or mode actually offered by the result.
3. Adjust threshold, layers, corner handling, or speckle removal only when exposed.
4. Watch path count and estimated complexity.
5. Cancel if fidelity or complexity is unacceptable; otherwise add the traced result.

The v2 screenshot above is an empty intake state and must not be treated as evidence of a successful trace.

Trace Modes

Mode	Best For	Description
Black & White	Logos, line art	Single-color threshold trace
Color	Illustrations	Multi-color layer trace
Grayscale	Photos	Gradient layer trace

Trace Settings Explained

Setting	Range	Effect
Threshold	0–255	Brightness cutoff for B&W mode
Layers	2–16	Number of color layers to detect
Corner	0–180°	Angle at which to create sharp corners
Speckle	0–100	Remove noise smaller than this size

note

Photo-quality images may generate hundreds of paths, which can slow down animations. For photos, consider using the Image import instead of vector tracing.

---

Animation Settings

Configure how imported SVGs are animated.

Draw Settings Panel

Setting group	Decision
Duration or speed	Choose fixed timing or a path-length-based rate when offered
Preview styling	Check stroke color and supported width adjustment
Fill behavior	Decide whether fill appears during or after drawing
Path filtering	Reduce tiny paths or excessive path counts
Hand follower	Enable only when a compatible hand, tool, and draw plan exist

The processed result and real DRAW drawer are authoritative; controls can vary by object and mode.

Speed Options

Option	Value	Use Case
Duration	1–60 sec	Fixed animation time regardless of complexity
Speed (PPS)	100–2000	Consistent pixels-per-second rate

tip

Use Duration mode for consistent timing across icons. Use Speed mode when complex icons should take longer than simple ones.

---

Custom Assets

Upload and manage your own assets for reuse.

Custom Assets Panel

The current library surfaces vary by asset kind and account state. Use Drawings or Images for service-backed items and Vector Import for a trusted local file. Do not assume a separate Custom Assets modal, fixed count, per-card delete action, or local-only storage unless the running build exposes those controls.

Supported Upload Formats

Format	Extension	Max Size
SVG	.svg	10 MB
PNG	.png	10 MB
JPEG	.jpg, .jpeg	10 MB
WebP	.webp	10 MB

warning

Custom assets are stored locally in your browser. Clearing browser data will remove them. Export your project to preserve custom assets.

---

Backend API Reference

For developers: access icons programmatically.

API Endpoints

Endpoint	Method	Description
/api/assets	GET	List all available icons
/api/assets/:id	GET	Get specific icon details
/api/assets/serve/:id	GET	Serve icon SVG content
/api/assets/search?q=	GET	Search icons by keyword

Icon URL Format

Use the public API origin configured for your supported Scribe integration. For same-origin application requests, the asset route is:

/api/assets/serve/<asset-id>

Do not depend on a private development hostname or copy an ID from another account or environment.

Using Icons in Templates

{
  "requiredAssets": [
    {
      "type": "url",
      "url": "/api/assets/serve/<asset-id>",
      "mime": "image/svg+xml"
    }
  ]
}

---

Keyboard Shortcuts

Shortcut	Action
Delete / Backspace	Delete selected object
Ctrl/⌘ + D	Duplicate selected object
Ctrl/⌘ + C	Copy selected object
Ctrl/⌘ + V	Paste copied object

---

Common Workflows

Workflow 1: Add Icon from Library

1. Open Drawings.
2. Search for check after the catalog loads.
3. Select a matching card.
4. Confirm the new canvas selection, then resize and position it.

Workflow 2: Import Custom Logo

1. Open Vectors.
2. Choose or drop the logo SVG.
3. Review warnings, preview fidelity, path count, and supported draw settings.
4. Add the result and verify it on the canvas.

Workflow 3: Trace a Sketch

1. Open Vectors and select a trusted PNG or JPEG sketch.
2. Choose a trace profile that matches line art, grayscale, or color artwork.
3. Adjust controls while watching fidelity and path count.
4. Commit only when the preview is usable, then verify selection and drawing timing.

---

Troubleshooting

Icon Not Appearing

Issue	Solution
Click doesn't add icon	Check if canvas is focused; click on canvas first
Icon appears off-screen	Pan the canvas or zoom out to find it
Icon is too small	Select and resize using corner handles

Import Errors

Error	Cause	Solution
"Invalid SVG"	Malformed XML	Validate SVG at svgomg.net first
"File too large"	Over 10 MB limit	Optimize SVG or compress image
"Too many paths"	Complex SVG	Simplify in vector editor, or increase max paths

Performance Issues

Symptom	Cause	Solution
Slow animation	Too many paths	Reduce path count, increase min length filter
Canvas lag	Large SVG	Reduce canvas size or icon count
Import hangs	Complex tracing	Use simpler image or reduce layers

warning

SVGs with gradients or filters may not animate correctly. For best results, use flat-color SVGs with solid strokes and fills.

---

Best Practices

Choosing Icons

1. Use the library first — Pre-optimized icons animate best
2. Match icon style — Keep consistent stroke widths across icons
3. Consider complexity — Simple icons animate faster and cleaner

Importing Custom SVGs

1. Optimize first — Use SVGO or svgomg.net to clean up SVGs
2. Flatten layers — Merge groups and flatten transforms
3. Remove filters — Blur, shadow effects don't animate
4. Expand strokes — Convert strokes to paths for consistent appearance

Performance Tips

1. Limit icon count — Keep under 50 SVG objects per scene
2. Use path filtering — Enable min length filter to drop tiny paths
3. Batch animations — Stagger start times instead of simultaneous
4. Reuse objects — Duplicate rather than importing multiple times

tip

Pro tip: For logos with complex paths, consider tracing a simplified version or recreating key elements manually for the cleanest animation.

---

Summary

Feature	Location	Purpose
Drawings library	Left Sidebar → Drawings	Browse the currently available catalog
Vector Import	Left Sidebar → 🧩 Vectors	Import your own SVG files
Custom Assets	Left Sidebar → 🖼️ Images	Manage uploaded assets
Raster Tracing	Vector Import Panel	Convert PNG/JPG to vectors

The Asset Library and Vector Import tools give you complete flexibility for adding visual elements to your animations — from quick icon searches to custom logo imports and image tracing.

---

Related Documentation:

• Background & Canvas Settings — For canvas configuration
• Typography Text Guide — For adding and styling text
• Images & Vectors Guide — For detailed image handling