Gutenberg SVG Draw Block Tutorial

Dive into the transformative world of digital design with the Gutenberg SVG Draw Block, a standout feature of the Premium Blocks for Gutenberg suite. This tutorial is your gateway to mastering the art of SVG animation and SVG drawing techniques directly within your WordPress site. Whether you’re looking to animate iconic Font Awesome icons, integrate Dashicons, or bring your custom SVGs to life, the SVG Draw Block offers an intuitive platform for creativity. From drawing intricate SVG paths to creating mesmerizing animations, this tool is designed to elevate your website’s visual appeal effortlessly.

Join us as we launch a journey to unlock the full potential of SVG animation for Gutenberg editor, making your content not just seen, but truly experienced.


To get Gutenberg SVG Draw 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.

Gutenberg SVG Draw Block Layout Settings

  1. Select type: of Icon select Icon or Upload Image
  2. Select Icon: Select the block icon.
  3. Enable SVG Draw: Check this option to enable SVG draw for the selected icon.
    • Reverse SVG Animation: Toggle this option to reverse the SVG draw animation.
      • End Point: Set the endpoint for the reverse draw animation.
    • Start Point: Set the starting point for the SVG draw animation.
    • How this animation should work? Choose how the animation should work.
    • Speed: Adjust the animation speed.
    • Loop: Enable this option to create a continuous draw loop.
    • Yoyo Effect: Yoyo Effect for a back-and-forth animation.
      • When the draw should start? Choose when the draw animation should start.
    • Restart Animation On Scroll Up: Enable this option to restart the animation on scroll up when it becomes visible in the viewport.
    • Fill Color After Draw: Enable this option to fill the SVG color after the draw animation is complete..
  4. Link: Enable assigning link for the icon.
    1. URL: Insert icon link.
    2. Open link in a new tab: Enable to open the link in a new tab.
  5. Alignment: Algin Icon to left, center, or right.

Icon Style

  • Size: Adjust the size of the icon.
  • Color: Set the icon color for normal and hover states.
  • Background Color: Define the background icon color for normal and hover states.
  • Stroke Width: Control the thickness of the icon stroke.
  • Stroke Color: Choose the color of the icon stroke.
  • After Draw Stroke Color: (when “Fill Color After Draw” is enabled): Set the stroke color after the draw animation is complete.
  • After Draw Fill Color: (when “Fill Color After Draw” is enabled): Define the fill color after the draw animation is complete.
  • Border Color: Set the border color for the icon on hover (when the border style is not set to none).
  • Hover Effect: Choose from a selection of effects that will be applied to the icon itself on hover.
  • Text Shadow: Apply a text shadow effect to the icon.
  • Border: Configure the border settings for the icon.
  • Margin: Set the margin around the icon to control its spacing.
  • Padding: Adjust the padding inside the icon to control its internal spacing.

Container Style

  • Background Type: Choose the type of background for the icon block.
  • Box Shadow: Apply a box shadow effect to the icon block.
  • Border: Customize the border of the icon block.
  • Margin: Set the spacing outside the icon block.
  • Padding: Adjust the spacing inside the icon block.


As we wrap up this comprehensive guide on Gutenberg SVG Draw Block, it’s clear that the integration of SVG animation and SVG draw capabilities into your website can significantly enhance its aesthetic and interactive appeal. Through the Premium Blocks for Gutenberg, users are equipped with an incredibly powerful toolset that simplifies the process of embedding and animating scalable vector graphics. This tutorial has laid the foundation for you to explore the endless possibilities of SVGs, empowering you to create dynamic, visually captivating content that engages and inspires your audience. With the skills acquired, your journey into the world of advanced web design is just beginning. Embrace the creative freedom that SVG animation offers and watch as your designs come to life in the most engaging ways.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks