Please enable JavaScript to view this site.

Navigation: Get to Know SnipSVG

The User Interface

Scroll Prev Top Next More

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 and Picture Frame

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.

The Picture Frame

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

toolbar

The toolbar gives you direct access to the most commonly used tools in SnipSVG. It looks slightly different in the icon-windows Windows  and icon-macos macOS versions. In the Mac version the New, Open and Save options are only available in the menu bar at the top.

The control panel

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.

The format panel

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.

quickformatpanel

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.