---
title: "Draw SVG Widget: Settings Overview"
url: https://theplusaddons.com/docs/draw-svg-widget-settings-overview/
date: 2024-03-29
modified: 2026-04-09
author: "Aditya Sharma"
description: "Adding a drawing SVG animation to your Elementor website can add a touch of creativity and uniqueness to your website. With the Draw SVG widget from The Plus Addons for..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Draw-SVG-Widget_-Settings-Overview-1024x536.jpg
word_count: 524
---

# Draw SVG Widget: Settings Overview

## Key Takeaways

- Draw SVG widget from The Plus Addons for Elementor allows users to create SVG drawing animations with preset and custom SVG files.
- Users can select from multiple SVG drawing animation styles and enable hover animations for interactive effects.
- The Draw SVG widget requires the PRO version of The Plus Addons for Elementor and must be activated in the widget settings.

Adding a drawing SVG animation to your Elementor website can add a touch of creativity and uniqueness to your website.

With the Draw SVG widget from The Plus Addons for Elementor, you can add SVG drawing animation with preset and custom SVG files.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-draw-animated-svg-icon/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Draw SVG widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Draw SVG and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=mUSu64Y0YoI

## How to Activate the Draw SVG Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/03/draw-svg-1024x358.png)

## Key Features

- **SVG Draw Animation **- You can create an SVG draw animation.

- **Custom SVG **- You can [create a draw animation with custom SVG](https://theplusaddons.com/docs//create-draw-svg-animation-with-custom-svg-in-elementor/).

- **Multiple Drawing Animation Style** - You can choose from multiple SVG drawing animation styles.

- **Hover Animation** - You can easily play the animation on hover.

- **Animation Loop** - You can play the animation in a loop forever.

## How to Create Draw SVG Animation in Elementor?

Add the Draw SVG widget to the page. 

From the **Select SVG Option** dropdown, you have to select the SVG type. Here you’ll find two options - 

- **Pre Built SVG Icon** - With this option, you can use pre built SVG icon to create a drawing animation.

- **Custom Upload** - With this option, you can [use a custom SVG file to create a drawing animation](https://theplusaddons.com/docs//create-draw-svg-animation-with-custom-svg-in-elementor/).

Select the option as per your requirements, let’s select Pre Built SVG Icon here.

![Draw SVG Content](https://theplusaddons.com/wp-content/uploads/2024/03/Draw-SVG-Content.gif)

Then from the **Select Svg Icon** dropdown, you have to select an icon.

You can align the icon for different devices from the **Alignment** section.

By enabling the **On Hover Draw** toggle, you can play animation on mouse hover.

Then from the **Loop Draw** toggle, you can play the animation in a loop forever.

![SVG Icon Demo](https://theplusaddons.com/wp-content/uploads/2024/03/SVG-Icon-Demo.gif)

## How to Style the Draw SVG Widget?

To style the Draw SVG you’ll find the styling options under the Style tab.

**SVG Style** - From here you can style the SVG.

![Draw SVG Style](https://theplusaddons.com/wp-content/uploads/2024/03/Draw-SVG-Style.gif)

- **Select Style Image** - From here you can select the SVG drawing style. You’ll find four different drawing styles.

- **Duration** - From here, you can manage the drawing speed.

- **Max Width Svg** - From here, you can set the maximum width of the SVG.

- **Min Width Svg** - By enabling this toggle, you can set a minimum width of the SVG file. When enabled the max width option will be hidden.

- **Border/Stoke Color** - From here, you can color the SVG border color.

- **Fill Color** - From this toggle, you can add a fill color to the SVG image. 

**On Scroll View Animation** -  This is our global extension available for all our widgets, this adds scrolling animation as the widget comes in the viewport. You can learn more about this from here.

Advanced options remain common for all our widgets, you can explore all its options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: What do I need to activate the Draw SVG widget?**
A: To activate the Draw SVG widget, you need to have the Elementor FREE Plugin installed and activated, along with The Plus Addons for Elementor plugin. Additionally, since this is a Premium widget, you must have the PRO version of The Plus Addons for Elementor. Ensure the widget is activated by checking under The Plus Addons u2192 Widgets and searching for Draw SVG.

**Q: What are the key features of the Draw SVG widget?**
A: The Draw SVG widget offers several key features, including SVG draw animation, the ability to use custom SVG files, multiple drawing animation styles, hover animation, and an animation loop option. These features allow for creative and engaging animations that enhance the visual appeal of your website.

**Q: How can I style the Draw SVG widget effectively?**
A: Styling the Draw SVG widget involves using the options under the Style tab. You can manage the drawing speed, set maximum and minimum widths for the SVG, and customize border/stroke and fill colors. Proper styling can significantly impact the visual integration of the SVG animation with your overall design.

**Q: What common mistakes should I avoid when using the Draw SVG widget?**
A: A common mistake is not activating the Draw SVG widget after installation. Users often forget to check under The Plus Addons u2192 Widgets to ensure it's turned on. Additionally, not selecting the appropriate SVG typeu2014either pre-built or customu2014can lead to confusion when trying to create animations.