Elementor SVG Draw Widget Tutorial

Many web designers prefer to use SVGs shapes for better performance and high-quality elements. Elementor page builder started to use SVGs for their icons using the Inline Font Icons feature. Now using Premium Addons for Elementor, you can apply drawing animation, not on icons only, but also shapes & text using Premium SVG Draw Widget for Elementor Page Builder. Drawing SVGs will allow you to add eye-catching Elementor elements to your page to grab visitors’ attention and make your website site look fancy and stunning.

Check Elementor SVG Draw Widget demo page.

SVG Draw Widget for Elementor Page Builder
Elementor SVG Draw Widget


  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Elementor SVG Draw Widget Settings

Start by dragging & drop SVG Draw widget into Elementor editor preview area.

Elementor SVG Draw widget in Elementor Panel
Elementor SVG Draw widget

General Settings

  1. SVG Type: Select the SVG type between
    1. Font Awesome Icon: Use icons from Font Awesome library.
    2. Custom SVG: Use custom SVG shapes, you can use Adobe products like Photoshop and Illustrator. Also, you can use online websites to generate SVGs like Boxy and Google Font to SVG.
  2. Size: Set size for SVG font awesome icon.
  3. Width: Set width for the SVG shape.
  4. Height: Set the SVG shape height.
  5. Alignment: Align SVG shape to right, center or left.
On Left Side Elementor SVG Draw Widget General Settings in Elementor Editor and On Right Side SVG Icon Rendered
General Settings in SVG Draw Widget for Elementor Page Builder

How to Animate SVGs in Elementor?

Now, we have reached the most exciting section, where SVG shapes can be animated using Elementor SVG Draw widget.

  1. Draw SVG: Enable this option to apply drawing animation on SVGs shapes.
  2. Reverse Animation: Enable to play drawing animation backward.
  3. Start Point (%): Set the point where the drawing animation will start from. (Reverse Animation Option Disabled)
  4. End Point (%): Set the point where the drawing animation will end at. (Reverse Animation Option Enabled)
  5. How this animation should work?: This option will help you to determine when drawing animation happens:
    1. Complete Drawing When Visible on Viewport: Start and complete the SVG drawing animation when the SVG enters the viewport (the visible area of the webpage).
    2. Draw on Scroll: Play drawing animation and sync it while the user is scrolling through the page.
    3. Draw On Hover: Start drawing animation when the user hovers on SVG shape with the mouse.
  6. Speed: Set speed for drawing animation. A larger value means a longer drawing duration.
  7. Loop: Enable this option to run drawing animation infinitely.
    1. Yoyo Effect: Bounce drawing animation from start to end instead of repeating it from start only.
Yoyo Effect in Elementor SVG Draw Widget

Complete Elementor SVG Drawing When Visible on Viewport

Start and complete the SVG drawing animation when the SVG enters the viewport.

  1. When the animation should start?: Set when SVG draw animation will start: (Available only in Complete Animation on Viewport option)
    1. Top of Viewport Hits The Element: Play animation when the element hits the top edge of the screen.
    2. Center of Viewport Hits The Element: Play animation when the element reaches the center of the screen.
    3. Custom Offset: Set a custom offset to play the animation.
Complete Draw When Visible in Viewport Option in Elementor Editor
Elementor SVG Draw Widget Complete Draw When Visible in Viewport

Elementor SVG Drawing on Scroll Options

Play the drawing animation and sync it while the user is scrolling through the page.

  1. Offset (%): Set a value to specify the distance between the top of the viewport and the top of the widget to start drawing SVGs while scrolling.
  2. Decrease Draw Speed By: This option allows you to control the speed of the SVG drawing. The larger the value you set the slower the SVG is drawn.
Elementor SVG Draw Widget Play SVG Drawing With Scrolling

General Options

  • Draw All Paths Together: Enable to draw all the SVG paths at the same time. Otherwise, it will draw paths one by one.
  • Restart Animation on Scroll Up: Enable to start drawing animation again when user scrolls up and SVG enters the viewport. (Complete Animation on Viewport)
  • Fill Color After Draw: Enable to fill SVG shapes with color after the drawing animation is finished.
Elementor SVG Draw Widget Draw All Paths Together Option
Fill Color After Draw Effect in SVG Draw Elementor Widget
  • Link: Assign link to SVG shape.
  • Use With Magic Scroll: Enable this option if you want to draw the SVG using Magic Scroll Addon. Check this article for more details.
Draw SVG on Scroll in Elementor using Elementor Magic Scroll addon

Elementor SVG Draw Style

Style SVG shapes path and fill colors, assign background, customizer border, add spacing and much more styling options.

Elementor SVG Drawer Widget Style Tab
Style Option in SVG Draw Widget for Elementor Page Builder

Which Elementor Widgets Integrated with SVG Draw Option?

Here’s a list of the free/pro widgets in Premium Addons in which you can find SVG Draw option:


If you’re looking to add new drawing animations to your SVG shapes to create new fancy and unique Elementor web page designs, you can use SVG Draw Widget for Elementor Page Builder with its unlimited customization options.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.