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 web pages.
Add your icon or SVG with our Premium SVG Draw Block for Gutenberg, then customize the styling options to match your website’s aesthetic.
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.
Animation Trigger: 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.
Start Position: 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.
Revert on Scroll Out: Reset the animation to the initial state when scrolled out of view.
Animation Speed: Slider to adjust the speed of the SVG drawing animation.
Loop Animation: Toggle to make the SVG drawing animation repeat in a loop.
Yoyo Effect: Bounce drawing animation from start to end instead of repeating it from start only.
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.
Draw All Paths Together: Option to animate all paths of the SVG simultaneously.
Fill After Draw: Option to fill the SVG with color after the drawing animation completes.
Stroke Width: Adjust the thickness of the icon’s lines, likely for SVG icons.
Link: Turn on to make the SVG clickable, linking to a specified URL.
Alignment: Set the 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 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).
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.
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.
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 border style 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 the 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.
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 percentages.
In conclusion, the Gutenberg SVG Draw Block offers a powerful way to bring motion and personality to your WordPress designs. By combining animation controls with flexible styling options, you can create SVG visuals that feel engaging without overwhelming your layout. When used thoughtfully, animated SVGs can highlight key content, guide user attention, and elevate the overall visual experience of your website.
Need Further Help?
Have a question or need assistance? Premium Blocks 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.
