Check out our free templates made with AI and polished to perfection in Windframe

Get now
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

Overview

SVGs (Scalable Vector Graphics) are a lightweight, high-quality image format ideal for crisp icons, illustrations, and shapes at any screen size. Windframe makes it simple to add, customize, and manage SVGs directly in your project without losing image quality.

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.

✅Best Practice Tips

  • Use SVGs for icons, illustrations, and shapes to maintain crisp quality on all screen sizes.

  • Keep SVGs lightweight by removing unnecessary metadata before upload.

  • Test responsiveness by previewing on different screen sizes.