Adding SVGs to Your Project in Windframe

SVGs (Scalable Vector Graphics) are a versatile and high-quality image format that can be easily integrated into your Windframe projects. Follow these steps to add SVGs to your project using Windframe:

Step 1: Open the Windframe Editor

1. Log in to your Windframe account.
2. Navigate to your project dashboard.
3. Open the project where you want to add the SVG.

Step 2: Add the SVG to Your Page

1. Navigate to the page where you want to add the SVG.

2. Locate the component where you want to insert the SVG.

3. Add an element to the component by clicking the component.

4. Click on 'Add Element' tool bar that pops up on the edge of the component.

5. Then select the svg element on the add element toolbar dropdown.

Step 3: Choose your svg

1. click on the svg element, A page setting sidebar will appear.

2. on the Page Setting, Go to the Text area and click on the "Add SVG" below the Text bar.

3. A dropdown of all the SVG will appear with a search bar, Go ahead and search for the SVG you are looking for.

4. Select the SVG you wish to use

Step 4: Customize the SVG

1. With the SVG selected, you can customize its size, alignment, and other classes using the options available in the Advanced options in the Page Setting sidebar.

Step 5: Adding your own SVG

1. You can also add your own SVG by simply pasting it on the Text bar found on the page setting.

Step 6: Save and Preview

1. Save your changes regularly to ensure your work is not lost.
2. Your SVG will appear immediately on the page you are working on
3. You can also preview your whole page by clicking on the "Preview" button.