SVG Draw Block Tutorial - Free Blocks for Gutenberg Editor

Introduction

Discover how to enhance your WordPress with dynamic SVGs using Gutenberg SVG Draw Block. Premium Blocks tutorial will guide you through adding SVGs or icons to your site and customizing them to fit your style. Learn to toggle between icon types, animate SVGs, adjust animations, and style your graphics with ease. Perfect for those looking to add interactive and visually appealing elements to their webpages.

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg SVG Draw Block?

Add your icon or SVG with our Premium SVG Draw Block for Gutenberg, then customize the styling options to match your website’s aesthetic.

01. General Settings

Type: Toggle between ‘Icon’ and ‘SVG’ for the type of graphic to be used.
If you select either Icon or SVG type; you will be able to adjust the following controls.
Select Icon/SVG: Choose an icon from a dropdown list of available options, or upload SVG file from your device.
Enable SVG Draw: Turn on to activate the drawing animation for the SVG.
Reverse SVG Animation: Option to play the drawing animation in reverse.
Start Point (%): Adjust the starting point of the SVG drawing animation as a percentage of the total animation path.
How this animation should work: Select the condition under which the SVG completes its drawing animation. Options include Complete Draw When Visible On View, Draw On Hover, or Draw On Scroll.
Speed: Slider to adjust the speed of the SVG drawing animation.
Loop: Toggle to make the SVG drawing animation repeat in a loop.
When the draw should start: Choose when the SVG drawing animation should begin. Options include Top of Viewport Hits The Block, Center of Viewport Hits The Block, or Custom Offset.
Draw All Paths Together: Option to animate all paths of the SVG simultaneously.
Restart Animation On Scroll Up: Resets and replays the animation when the user scrolls up.
Fill Color After Draw: Option to fill the SVG with color after the drawing animation completes.
Link: Turn on to make the SVG clickable, linking to a specified URL.
Alignment: Set the horizontal alignment of the SVG within the block. Options likely include ‘left’, ‘center’, and ‘right’.

Gutenberg SVG Draw Block - Icon Type General Settings — Gutenberg SVG Draw Block – Icon Type General Settings

Gutenberg SVG Block Styling Controls

Icon Style

Size: Adjust the size of the icon with a slider, with unit choices of pixels (PX), ems (EM), or rems (REM).
Overlay: Add a color or image overlay over the banner.
Normal/Hover: Tabs to configure settings for the icon’s default state and its appearance on mouse hover.
Color: Set the color of the icon. The checkerboard pattern indicates the option might include transparency.
Background: Configure the background of the icon with options to set a solid color, gradient, or image, along with additional settings for position, size, and repeat.
Border: Choose the style of the border surrounding the icon, with options for solid, dotted, dashed, and more.
Border Radius: Set the roundness of the icon’s corners for the top, right, bottom, and left sides.
Margin: Define the outer space around the icon, with separate values possible for top, right, bottom, and left, in units of pixels, ems, or percent.
Padding: Set the inner space between the icon and its border, customizable for each side in pixels, ems, or percent.
Stroke Width: Adjust the thickness of the icon’s lines, likely for SVG icons.
Stroke Color: Choose the color for the icon’s stroke (outline of the SVG).
After Draw Stroke Color: Set the stroke color that appears after the SVG drawing animation is complete.
After Draw Fill Color: Choose the fill color for the SVG icon to be applied after the drawing animation is finished.

Gutenberg SVG Draw Block Icon Styling Controls

Container Style

Background Type: Choose the background type for the container. The icons suggest options for a solid color, gradient, or image.
Box Shadow: Add and customize a shadow around the container. The checkerboard pattern and pencil icon indicate options for color, opacity, and spread.
Border: Define the border style. The line styles represent different border types such as solid, dotted, or dashed.
Border Radius: Control the roundness of each corner of the container, with individual settings for top, right, bottom, and left.
Margin: Adjust the external spacing around the container. The fields for top, right, bottom, and left indicate that each side can be configured independently.
Padding: Set the internal spacing between the border and the content inside the container. This also allows for side-specific adjustments in pixels, ems, or percentage.

Gutenberg SVG Draw Block Container Styling Controls

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg SVG Draw Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg SVG Draw Block?

01. General Settings

Gutenberg SVG Block Styling Controls

Icon Style

Container Style

Need Further Help?

Global Features

Help Center

Our Products

About Leap13