Draw SVG

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

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

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.

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

1. Layout

Content

SVG Options

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

Select SVG

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

Custom Upload

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

Layout

Icon Alignment

To align SVG in left, right or center position in its base container.

2. Style

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

SVG

Max Width

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.

Fill Color

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

Fill Color

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

Draw SVG Animation

Type

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

Duration

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 blocks. 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?
Please submit the reason for your vote so that we can improve the article.