Quick Tour Of The SVGator Interface

In this tutorial, we will provide a comprehensive overview of the SVGator interface, guiding you through its layout and tools to efficiently create, organize, and animate projects.

How To Create A New Project

From your dashboard, click New Project to begin. You can upload an existing file or create a new one. Set your canvas dimensions, either by choosing a preset from the drop-down menu or entering custom values, with the option to maintain proportions. Once the rectangular shape is formed, select the orientation option. Name your project and click Create to enter the editor.

Understand The Editor Layout

The editor has five main areas: the app header at the top, the left sidebar for elements and assets, the central canvas workspace, the right sidebar for properties, settings, and comments, and the timeline at the bottom for animation control. Familiarize yourself with each section to navigate efficiently.

Use The App Header Tools

On the left side of the header, access file operations, undo and redo, and click the project name to rename it. The center contains design tools, including the selection tool, pen tool, shapes, and text. Also find the View Edit Mode drop-down menu here. On the right, control the canvas view with zoom, fit to screen, and toggles for rulers, grid, guides, and snapping.

Organize Elements And Assets

The elements list shows all objects in a tree structure. Click to select layers, drag to reorder, toggle visibility with the eye icon, group layers, rename, and lock them to prevent accidental edits. Use the Assets library to browse pre-made elements or search for specific items. Click an asset to add it to your canvas or save your own animations by naming the main group and clicking Save to Library for reuse in other projects.

Adjust Properties Of Elements

Select an element to view its Properties panel. Modify fill and stroke colors, opacity, blending modes, and transform properties like position, rotation, and scale. The panel updates contextually based on the selected element, showing different options depending on its type.

Animate With The Timeline

Each animated element gets a track in the timeline. Move the playhead to preview positions or use the play button to watch the animation. Add animators from the Animators tab for properties like position, scale, rotation, or opacity. Adjust values to automatically create keyframes or click the diamond icon to add them manually. Drag keyframes to change timing and set total animation duration at the top of the timeline. Use second markers and the loop button for precise sequencing and continuous preview.

Apply Easing And Refine Motion

Select a keyframe to choose an easing preset such as ease in, ease out, ease in out, or linear. Ease in starts slow and accelerates, ease out starts fast and decelerates, ease in out combines both, and linear maintains constant speed. Create custom easing curves for precise control, name them, and reuse them on other keyframes to refine the animation’s motion.