SnipSVG's user interface is quite similar to regular graphics programs that you are probably familiar with. What is a little different from some other applications is the "canvas" workspace, which is like a desktop that extends around the actual image, giving you additional space to work in.
The Canvas
Unlike a normal graphics program where the image fills the entire editor window, the SnipSVG editor shows a large workspace called the "canvas" where you can position and edit both your image and additional elements and images. The canvas is theoretically infinite. It will accommodate all the elements you add to it and expand as necessary.
This frame defines the borders of the final image. Everything inside the frame becomes part of the final image and everything outside it will be hidden when the image is used, for example as an SVG in a web page. You can change the size of the image frame in the format panel on the right.
The toolbar gives you direct access to the most commonly used tools in SnipSVG. It looks slightly different in the Windows and
macOS versions. In the Mac version the New, Open and Save options are only available in the menu bar at the top.
When no element is selected the control panel is displayed on the right. (click on the empty canvas to activate). This contains settings and controls for the entire picture, particularly the picture frame, which defines the dimensions and aspect ratio of the finished picture.
Standard Picture Frame Sizes
The small drop-down menu in the Picture Size section on the right lets you select a variety of standard picture frame sizes. This also fills the picture frame with the main picture.
Selecting an element switches the control panel to the format panel. This has two main functions: The Quick Format pane shown at the top when an element is selected gives you one-click styling. The other panes below that allow you to manually format all the properties of each element.
This is one of SnipSVG's super-powers. It gives you instant, one-click styling for any element with the Quick Format pane, plus individual formatting for all of an element's individual attributes. To style an element, you just select it and then select the style from the Quick Format pane.