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.
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.
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.
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.
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.
The Style tab is used for customizing the appearance of all the Draw SVG widget components.
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.
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
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