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 colors, or animating their motion along a path.
Draw SVG provides its users much more options for customization & animation users can have. Check them out below.
How to use the Draw SVG Block of The Plus Addons For Gutenberg
This block is used to display SVG, Animation, etc. Let’s understand how to use this block in the tutorial 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 blocks panel.
After placing the block 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 a bunch of pre-built SVG with animation here. Go and select one of them.
Upload a 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 center position in its base container.
The Style tab is used for customizing the appearance of all the Draw SVG blockcomponents. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
A maximum horizontal expansion or normal width can be set from here. Height will be set accordingly.
Border/ Stroke Color
A color picker to assign a 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 a 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.