---
title: "How to Create Draw SVG Animation with Custom SVG in Elementor?"
url: https://theplusaddons.com/docs/create-draw-svg-animation-with-custom-svg-in-elementor/
date: 2024-03-29
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to add a custom animated SVG icon in Elementor? Adding custom SVG animation to your website can greatly enhance the user experience and make your website stand..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Create-Draw-SVG-Animation-with-Custom-SVG-in-Elementor_-1024x536.jpg
word_count: 264
---

# How to Create Draw SVG Animation with Custom SVG in Elementor?

## Key Takeaways

- Draw SVG widget from The Plus Addons for Elementor creates SVG drawing animation from a custom SVG file.
- SVG file compatibility is checked using Vivus Instant to ensure proper animation with the Draw SVG widget.
- Custom SVG files require adjustments in the style tab to add fill color, as they display in outline mode by default.

Do you want to add a custom animated SVG icon in Elementor? Adding custom SVG animation to your website can greatly enhance the user experience and make your website stand out from the rest.

With the Draw SVG widget from The Plus Addons for Elementor, you can easily create SVG drawing animation from a custom SVG file in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Draw SVG widget, [click here.](https://theplusaddons.com/docs//draw-svg-widget-settings-overview/)*

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

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

### Check SVG Compatibility

To use a custom SVG with the Draw SVG widget, you have to check the SVG file compatibility using [Vivus Instant](https://maxwellito.github.io/vivus-instant/).

Just drag and drop your SVG file in the UI and if the SVG animates then it is good to use with the Draw SVG widget but if it doesn’t animate then you have to modify the SVG file and test again.  

### Use Custom SVG

To do this, add the Draw SVG widget to a page and follow the steps -

1. Select **Custom Upload** from the **Select SVG Option** dropdown.

2. Then add your SVG file from the **Choose SVG** section. 

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

Do the necessary adjustments from other settings and the style tab.

> *Note: Your SVG file will always show in an outline mode even if it has fill color. You have to add a fill color from the style tab.*

Now you should be able to see a beautiful drawing animation of your custom SVG file.

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

## Frequently Asked Questions

**Q: What should I do if my SVG file doesn't animate in the Draw SVG widget?**
A: If your SVG file doesn't animate, it likely isn't compatible with the Draw SVG widget. Use Vivus Instant to check compatibility by dragging and dropping your SVG file into the UI. If it doesn't animate, you'll need to modify the SVG file and test it again to ensure it meets the requirements for animation.

**Q: Can I use any SVG file with the Draw SVG widget in Elementor?**
A: Not all SVG files are compatible with the Draw SVG widget. You must check the SVG file's compatibility using Vivus Instant. If the SVG animates in that tool, it should work with the Draw SVG widget. Otherwise, modifications are necessary before use.

**Q: What settings should I adjust for the best SVG animation in Elementor?**
A: For optimal SVG animation, after selecting your custom SVG file, ensure you adjust the fill color in the style tab. The SVG will display in outline mode by default, so adding a fill color is crucial for visibility and aesthetic appeal.

**Q: What are common mistakes when using the Draw SVG widget?**
A: A common mistake is not checking SVG compatibility before uploading. Users often assume any SVG will work, but if it doesn't animate in Vivus Instant, it won't function properly in the Draw SVG widget. Always verify compatibility to avoid issues.