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.
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.
Choose whether you want SVG provided by us or you want custom SVG you have.
We have provided bunch of pre-built SVG with animation here. Go and select one of them.
Upload an Custom SVG you have here. Please read and test the terms to upload SVG with link provided below the upload option.
To align svg in left, right or centre position in it’s base container.
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
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.
Selection whether you want to fill inside of SVG image with some color or not.
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.
Choose if you want to have draw animation on hover or on scroll.