How to Use - SVG Draw Animation

How to Use SVG Draw Animation


Basic Usage

Please do note that before we proceed on this guide, the user also needs a basic knowledge on how to use WPBakery Page Builder and how to add Rows and Elements in a page or post. If you're not sure on how to do the following steps, it will be best to refer on the WPBakery Page Builder Basic Tutorial first: https://wpbakery.com/video-tutorials/

Step 1. Add New Page or Edit your existing page

Step 2. Go to Backend Editor

Step 3. In your Backend Editor, click on the Plus Button or Add Element. First, add a row

Step 4. When you add a Row, You can click the Plus Button in the Row to add our Plugin Components. Choose the options that you may find applicable

Step 5. Save your changes and Publish your work. Well done!


Adding your Custom SVG

First, you need to have a stroke-based SVG to animate. For quick reference, please refer to this site: https://icons8.com/icon/pack/logos/all If you wish to create your own SVG, you may use Adobe Illustrator, Correl Draw, Inkscape or similar software to create SVGs.

Step 1. Upon creating your SVGs, please note that what the plugin animates is the stroke and not the fill. Proceed to create your objects, convert the objects or texts into paths.

Step 2. Upon converting them into paths, add a stroke to your SVG. Once done, export the file to SVG.

Step 3. Open the SVG file using notepad then you copy the codes to the Upload your SVG Field.


















Note: If your SVG Code has a CDATA, make sure to delete the CDATA tag if there’s one in your SVG code.

Step 4. Configure the rest of the settings according to your preference then save it.