Vev allows you to use a variety of shapes, from simple icons and geometric forms to custom SVG graphics. Shapes and icons are great for adding structure, visual support, and branding to your project. SVGs are a compact asset format, minimizing the impact on page performance, and they can be sized as large as needed without any pixelation or loss of quality. This guide details how to add, manage, and style shapes within your Vev project.
How to Add Shapes and Icons
You can easily add shapes and icons to your project using the Add Menu:
Open the Add Menu: Press the letter M on your keyboard or click the Add Menu icon in the top toolbar.
Find the Component: Search for "Shape" in the menu.
Place on Canvas: Drag and drop the shape component onto your canvas.
Browse and Select: Double-click the shape on the canvas to open the shape library and browse through the built-in icons and shapes.
Tip: Hold the Alt/Option key while dragging a shape onto the canvas to add it as a full-width section.
Built-in Icons
Vev's built-in icon library uses Font Awesome, a popular collection of icons that are included as scalable SVG files.
Uploading a Custom SVG
You can also use your own custom shapes and icons by uploading an SVG file.
Open the Shape Library: Access the shape library from the left sidebar.
Upload: Click the Upload button within the library.
Select File: Choose your .svg file from your computer.
Methods for Placing a Shape
Drag-and-Drop: Select a shape from the panel and drag it directly onto the canvas.
Click-and-Draw: Click a shape once in the panel, then click-and-drag on the canvas to draw it to your desired size.
Multiple Shapes: To add several shapes at once, check the selection box on each shape card, then drag the group onto the canvas.
Changing an Existing Shape
To replace an existing shape on the canvas with a new one, double-click the shape on the canvas. This action will automatically reopen the Shapes panel, allowing you to select a different shape.
Managing the Shape Library
The Shapes panel is organized into two primary sections for easy access and management of your vector assets.
Internal Shape Library
This area contains all SVGs that have been uploaded to the project.
Core Shapes: Pre-installed shapes, such as frames and circle shapes, are always available here and cannot be removed from the library.
In Use Indicator: Any shapes currently placed on the canvas will display an "In use" tag on their card for quick identification.
Third-Party Icon Library
This area provides a searchable collection of third-party icons from the Font Awesome library.
Automatic Saving: When you use an icon from the Font Awesome library, it is automatically saved to your project’s Internal Shape Library.
Library Organization
To keep your library organized:
Naming Assets: You can name the assets within the shape library for easier reference. Hover over a shape, click the information tooltip (i), and edit its name in the info panel. This custom name is for your reference only and improves search functionality within the library.
Deleting and Cleaning Up Shapes
Deleting Uploaded Shapes: To remove an uploaded shape, check the box on its card and click the bin icon (delete). You can select multiple shapes to delete them in bulk.
Cleaning the Library: To quickly remove all shapes that are not currently in use on the canvas, click the broom icon (clean-up).
Styling a Shape
With a shape selected on the canvas, its contextual styling properties will appear in the Style panel on the right-hand side.
Style Properties: You have access to various styling properties, including color, borders, and effects.
Color Override: The most notable feature is the color option, which allows you to override the original color of the SVG to any color of your choosing.
Trace Image to Shape (Vectorization)
If you upload a raster image (such as a PNG or JPG) via the Shape Library, you will be given the option to convert it into an SVG vector shape. This process is known as vectorization or image tracing.
Color Threshold: You will be able to adjust the color threshold to fine-tune the conversion and achieve the desired vector appearance.
Shape Form: It is important to note that the white area of the resulting icon represents the form of the shape. If your original design uses white as the background or negative space, you may need to invert the selection during the tracing process to ensure the correct parts of the image are converted into the vector path.