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.

Requirements:

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

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.

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.

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.

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.

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.

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

Elementor SVG Draw Style

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

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:

Conclusion

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 YoutTube channel to get updates about new features, improvements, and bug fixes.