Draw SVG

< All Topics

Draw SVG widget enables you to add a draw style animation effect to your icons. These animation effects look very artistic and elegant. They add a premium touch to your website and make it look more lively.

Pro tip
Always place the search form where it is the most visible to your users i.e. header or sidebar. Don’t place it inside areas such as footer where users can have a hard time finding it.

How to use the Draw SVG Widget of The Plus Addons For Elementor

The Draw SVG Widget is an easy to use widget. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps

Search for the Draw SVG widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Select SVG option for the SVG widget..


Select SVG Option

We have provided you with two options to choose from.

Prebuilt SVG Icon
This provides an option to add pre-defined SVG icons which are present in the widget. Select any one icon as per your choice from the Select SVG Icon dropdown.

Custom Upload
Using this option, you can add a custom SVG icon from your computer. Check this website https://www.freeicons.io/ out for high quality SVG icons for your project.


Set the position of your icon to left, right or center.

On Hover Draw

It means when you hover over the icon, the draw animation effect will begin. So, if you want this kind of effect, enable it.

2. Style

The Style tab is used for customizing the appearance of all the Draw SVG widget components.

Select Style Image for the SVG widget..

Select Style Image

This option lets you set the behaviour of your icon. You can select any one of the following options from the dropdown.


Set the speed duration of your icon. Lower number means the icon will appear fast whereas if the number is higher, it will appear slow.

Max Width SVG

Set the width of your icon. Use the slider to adjust the width of the icon.

Border Stroke Color

Set the border color of your icon here.

Fill Color

Set the fill color of your icon here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?