Parts of the SVGator app interface

This Help Center article showcases key parts of SVGator's interface and shows you where to find them and how they're named.

You will find screenshots and details about the following sections from our tool's interface:

  • Creating a new project
  • General UI Sections
  • Timeline (1)
  • Timeline (2)
  • Timeline (3)
  • Timeline (4) - Easing functions
  • Elements Lists
  • Assets Library
  • App Header
  • Properties Panel (General)

Creating a new project

The "Create a new project" section contains the following elements:

  1. New project panel
  2. Canvas size presets
  3. Dropdown menu
  4. Maintain/Don’t maintain proportion
Creating a new project section and its elements

General UI Sections

The General UI sections contain the following elements:

  1. Stage
  2. Canvas
  3. Timeline
  4. Header
  5. Elements list
  6. Properties panel
General UI sections and the main elements

Timeline (1)

The "Timeline (1)" section contains the following elements:

  1. Timeline ruler
  2. Time indicator
  3. Vertical scroll
  4. Horizontal scroll
  5. Timeline zoom slider
Timeline (1) section and its elements

Timeline (2)

The "Timeline (2)" section contains the following elements:

  1. Playhead
  2. Animators list button
  3. Easing functions button
  4. Play button / Pause button
  5. Reset (time) button
  6. Timeline limit marker
  7. X second mark (e.g: “2.3 second mark”)
Timeline (2) section and its elements

TIP: Press and hold the Shift key while dragging the Playhead with the cursor for smoother movement compared to dragging without the Shift key, making it easier to check each frame of your animation.

Timeline (3)

The "Timeline (3)" section contains the following elements:

  1. Element
  2. Animator (element’s animator)
  3. Animation visibility toggle (enables/disables the animator)
  4. Add keyframe button
  5. Loop button
  6. Keyframe
  7. Segment
Timeline (3) section and its elements

Timeline (4) - Easing functions

Easing button to access this section

The "Timeline (4) - Easing functions" section contains the following elements:

  1. Easing panel
  2. Easing presets
  3. Graph editor
  4. Easing curve
  5. Bezier handle
  6. Current easing function name input
  7. Easing function values input
  8. Step Keyframe (step start keyframe/step end keyframe)
  9. Step count input
  10. Step keyframe options
The first 8 elements from Timeline (4) - Easing functions section
The next 2 elements from Timeline (4) - Easing functions section

TIPS: You can customize the easing graph using the bezier handles, thus you will create custom easing functions that will appear at the top of the presets list.

Elements Lists

The "Elements Lists" section contains the following elements:

  1. Elements tab and Library tab
  2. Hide/Reveal ‘Elements List’ toggle
  3. Search Element input
  4. ‘Elements List’ display order
  5. ‘Mask group’
  6. Mask elements group
  7. Masked element
  8. Lock element toggle (Lock/Unlock)
  9. Element visibility toggle (Hide/Show)
  10. Group element
  11. Element
Elements Lists example

TIPS for the Elements Lists section:

  • You can reorder elements within the project using a simple drag and drop in ‘Elements list’.
  • Right-click on the Element -> Arrange -> and there is the list of options to arrange it.
  • With the element selected, there are 2 arrow symbols (down and up) in the header, right next to the hand tool, which will allow users to move the selected element one position up or down.
  • Shortcuts for the ‘Arrow’ buttons on the toolbar: Ctrl + Arrow up / Cmd + arrow up (for MacOS) will also move an element up or down one position. Also, including Shift in this key combo will bring the element all the way to the top or to the bottom, among its sibling elements. Those shortcuts are also mentioned in the right-click menu (Arrange) as written above.
  • You can toggle an element's visibility by clicking on the Eye icon next to it. This might help you focus on other elements in more complex projects.

Assets Library

The "Assets Library" section contains the following elements:

  1. ‘Uploads’ (refer to as ‘My uploads’ or ‘Uploads’)
  2. Refresh list
  3. Upload new
  4. Insert asset
  5. Delete asset
  6. Assets categories
Assets Library section and its elements

App Header

The first 13 elements from the App Header section

The "App Header" section contains the following elements:

  1. App menu
  2. Project name input
  3. Undo/Redo buttons
  4. Transform tool (V), Node tool (A), Resize tool (S)
  5. Pen tool (P), Add Node tool, Remove Node tool, Pencil tool (N)
  6. Shapes tool [Ellipse (O), Rectangle (M), Polygon, Star, Line (L)]
  7. Text (T) tool
  8. Hand (H) tool
  9. Move up / Move down (Elements order in list)
  10. Group elements
  11. Ungroup elements
  12. Create Mask
  13. Boolean options (Union, Subtract, Intersect, Exclude)
  14. Center Origin
  15. Flip horizontally
  16. Flip vertically
  17. Rotate 90 deg. counter-clockwise
  18. Rotate 90 deg. clockwise
  19. Snapping options [Snap to Objects, Snap to Points, Snap to Guides, Snap to Grid, Snap to Pixel, Enable Snapping (Alt+S)]
  20. Stage options [Front Grid, Back Grid, Show Ruler (Alt+R), Show Guides (Alt+L), Collapse Sections /]
  21. Fit Canvas into view
  22. Zoom options
  23. ‘Save’ button
  24. ‘Export’ button
  25. User menu
  26. Render status notification
The last 13 elements from the App header section

Properties Panel (General)

The "Properties Panel (General)" section contains the following elements:

  1. Hide/show properties panel
  2. Align options
  3. Distribute option
  4. Element’s properties
  5. ‘Transforms’ panel
  6. ‘Appearance’ panel
  7. ‘Filters’ panel
  8. Arrange selected filter (move up or move down)
  9. Delete selected filter
  10. Auto orient (for move on path animations)
  11. Fill mode (Non-zero / Even-odd)
  12. Stroke properties
  13. Fill properties
  14. Swap colors
  15. Color picker
The Properties Panel (General) section and its elements

Still have questions? Send us an email to and we will get back to you as soon as we can.

Discover other useful articles from our Help Center:

What File Format does SVGator Export? | SVGator Help
Learn what file formats SVGator exports. We support formats: .svg files, .js files, .dart files, and various video and animated image formats.
What Export Settings are Available? | SVGator Help
Everything you need to know about export settings in SVGator. Create ready to use SVG animations for your website or mobile app and export with a single click.
Using custom fonts in your animated SVGs
You can also add your own fonts to SVGator, following the instructions in this guide.