Draw SVG

SVG provides us with the ability to animate elements by animating their numeric values (such as x, y, width and height), animating their positions , rotation, translation and so on, animating their colours, or animating their motion along a path.

Draw SVG provides it’s users much more options for customisation & animation user can have. Check them out below.

Pro tip
SVGs have more offering than creating shapes & animations. Use them for blending, clipping, masking or for lighting effects. Just like stretched muscle.

Configuration for Draw SVG

Draw SVG is can be typical for some kind of svgs. So cross check SVG Structure, check whether it is suitable for drawing or not from Here.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Draw SVG into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Draw SVG after “/” sign, eg.“/draw svg”, in the content area. Gutenberg also provides drag & drop after opening the list of widgets panel.

After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout


SVG Options

Choose whether you want SVG provided by us or you want custom SVG you have.

Select SVG

We have provided bunch of pre-built SVG with animation here. Go and select one of them.

Custom Upload

Upload an Custom SVG you have here. Please read and test the terms to upload SVG with link provided below the upload option.


Icon Alignment

To align svg in left, right or centre position in it’s base container.

2. Style

The Style tab is used for customising the appearance of all the Draw SVG widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article


Max Width

A maximum horizontal expansion or normally width can be set from here. Height will be set accordingly.

Border/ Stroke Color

A color picker to assign suitable color for border/ stroke.

Fill Color

Selection whether you want to fill inside of SVG image with some color or not.

Fill Color

A color picker to assign suitable color for fill inside of SVG image.

Draw SVG Animation


Choose a suitable draw animation for your SVG image from here. We have provided Delayed, Sync, One-by-One & Scenario Sync options for drawing.


Draw animation time duration. Less is fast.

Extra Options

Draw Method

Choose if you want to have draw animation on hover or on scroll.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?