Windframe

Adding SVG to project

​Integrating SVG images into your Windframe projects can enhance the visual appeal and scalability of your designs. Here is how you can add SVGs to your project

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.

Dashboard

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.

Adding the element

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

select svg

Step 3: Choose your svg

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

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

Add SVG

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

add svg search bar

  1. 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.

Add classes

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.

text area

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.