---
title: "Draw SVG Widget: Settings Overview"
url: https://theplusaddons.com/docs/draw-svg-widget-settings-overview/
date: 2024-03-29
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Draw SVG animates an SVG icon so its outline appears to draw itself on the page, rather than just fading or popping in. This is the settings reference; see the..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Draw-SVG-Widget_-Settings-Overview-1024x536.jpg
word_count: 323
---

# Draw SVG Widget: Settings Overview

## 

- Draw SVG is only available in The Plus Addons for Elementor Pro, and the widget file exists only in the Pro plugin, not in Free.
- The Plus Addons > Widgets enables Draw SVG in the Creative category, and its Content tab includes Select SVG Option, Select Svg Icon, Choose SVG, Alignment, On Hover Draw, Loop Draw, and Connect GSAP Interaction.
- Draw SVG renders an SVG element on the page and uses plus-draw-svg.js with a matching stylesheet to drive the stroke-drawing animation.

Draw SVG animates an SVG icon so its outline appears to draw itself on the page, rather than just fading or popping in.

This is the settings reference; see the other Draw SVG doc for using your own uploaded SVG specifically.

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.***

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

## Before You Start

- **Edition:** **Pro** — Draw SVG is only in The Plus Addons for Elementor Pro. The widget file exists only in the Pro plugin; it is not available in Free.- **Widget to enable:** Draw SVG, switched on under **The Plus Addons > Widgets** (Creative category).

## Content Tab

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Select SVG Option | Choose the built-in icon library or upload your own SVG. | SVG Icons (library) |
| Select Svg Icon | Which built-in icon to draw, when using the library. | app.svg |
| Choose SVG | Upload your own SVG file, when Select SVG Option is set to the custom/media choice - hidden until then. | None |
| Alignment | Horizontal alignment of the icon. | Center |
| On Hover Draw | Draw the icon only when hovered, instead of on load/scroll. | Off |
| Loop Draw | Repeat the draw animation in a loop instead of drawing once. | Off |
| Connect GSAP Interaction | Tie this element into a GSAP Interaction sequence elsewhere on the page. | Off |

![The Select Svg Icon control, the built-in icon-library option](https://theplusaddons.com/wp-content/uploads/2026/09/tp-draw-svg-select-svg-icon-wide.webp)

![The On Hover Draw switch](https://theplusaddons.com/wp-content/uploads/2026/09/tp-draw-svg-on-hover-draw-wide.webp)

## How It Behaves

A fixture with the default icon confirmed the widget renders an SVG element on the page; the draw-in animation itself (the stroke appearing to trace the icon's outline) was not independently re-confirmed with a frame-by-frame check this session - it is driven by `plus-draw-svg.js` and a matching stylesheet, both loaded on the page.

## Limitations

- The exact trigger timing difference between the default (on load/scroll) and On Hover Draw was not independently measured this session.

## Troubleshooting

### The icon appears but never animates

Confirm the widget is enabled at The Plus Addons > Widgets, and that no page-builder cache (e.g. Elementor's Element Cache) is serving a stale, pre-animation render of the page.

## Related Docs

- [Create Draw SVG Animation with Custom SVG](https://theplusaddons.com/docs/create-draw-svg-animation-with-custom-svg-in-elementor/)

## Frequently Asked Questions

**Q: Why does the Draw SVG icon show up but not animate?**
A: The most likely fix is to confirm the widget is enabled under The Plus Addons > Widgets, because the page notes that a stale render from page-builder cache can block the animation. The widget’s draw effect is driven by plus-draw-svg.js and a matching stylesheet, so a cached pre-animation version can make it look frozen even when the SVG itself is present. That matters most when Elementor’s Element Cache is involved.

**Q: Can I use Draw SVG with my own uploaded SVG file?**
A: Draw SVG supports a custom SVG path, but only when Select SVG Option is switched to the custom/media choice. The page also points to [Create Draw SVG Animation with Custom SVG](https://theplusaddons.com/docs/create-draw-svg-animation-with-custom-svg-in-elementor/) for that workflow. In practice, that means the widget can handle both the built-in icon library and your own file, but the upload field stays hidden until you choose the custom option.

**Q: Should I use On Hover Draw or let it animate on load?**
A: On Hover Draw is the better choice when you want the icon to stay still until someone interacts with it. The default behavior draws on load or scroll, while On Hover Draw waits for hover instead. That makes hover useful for subtle UI accents, while the default mode fits icons that should announce themselves immediately. The page notes the timing difference was not independently measured in this session.

**Q: How do I make the draw animation repeat instead of playing once?**
A: Loop Draw is the setting that repeats the animation instead of drawing only once. That’s useful when you want a decorative motion effect rather than a one-time reveal. The default is Off, so if you leave it unchanged the icon behaves like a single entrance animation. For anything attention-grabbing, looping can work, but it also makes the icon feel less like a finished illustration.

**Q: What does Connect GSAP Interaction do in Draw SVG?**
A: Connect GSAP Interaction ties this element into a GSAP Interaction sequence elsewhere on the page. That means Draw SVG can participate in a larger scripted animation flow instead of acting as an isolated widget. The setting is Off by default, so it only matters if your page already uses GSAP-based interactions and you want this icon to sync with them.

**Q: Is Draw SVG available in The Plus Addons free version?**
A: Draw SVG is part of The Plus Addons for Elementor Pro only, and the widget file exists only in the Pro plugin. The page also says it must be installed and activated to use its full functionality. In other words, this is not a Free widget, so if it’s missing from Widgets under Creative category, Pro activation is the first thing to check.