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.
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 |
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.
