---
title: "How to Create Draw SVG Animation in WordPress?"
url: https://nexterwp.com/docs/create-draw-svg-animation-in-wordpress/
date: 2024-12-05
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "An icon that draws itself line by line catches the eye as visitors scroll to a feature or service section. The free Draw SVG block in Nexter Blocks animates built-in..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Draw-SVG-Animation-in-WordPress_-1024x519.jpg
word_count: 441
---

# How to Create Draw SVG Animation in WordPress?

## Key Takeaways

- Nexter Blocks requires the default WordPress Block editor to be active, and the Draw SVG block must be activated from Nexter → Blocks by searching for Draw SVG and turning on the toggle.
- Draw SVG block supports Pre Built SVG and Custom Upload, letting users create a drawing animation with a pre-built SVG icon or a custom SVG file.
- Draw SVG block offers multiple drawing styles plus On Scroll, On Hover, hover animation, and Animation Loop for controlling when and how the SVG animation plays.

An icon that draws itself line by line catches the eye as visitors scroll to a feature or service section.

The free Draw SVG block in Nexter Blocks animates built-in icons or your own SVG files.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-draw-animated-svg-icon/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Draw SVG, switched on under **Nexter > Blocks** in your WordPress dashboard.- **For your own SVG files:** administrators and editors can upload SVGs directly. See [how to add a custom animated SVG icon](https://nexterwp.com/docs/add-custom-animated-svg-icon-in-wordpress/).

## Learn via Video Tutorial

https://www.youtube.com/watch?v=BmH1D0xCrqE

## Steps

- Go to **Nexter > Blocks**, search for **Draw SVG** and turn it on.

![The Nexter Blocks settings page filtered to the Draw SVG block](https://nexterwp.com/wp-content/uploads/2026/09/draw-svg-admin-enable.webp)

- Add the **Draw SVG** block and click **Design from Scratch**.

- Keep **Pre Build SVG** under **SVG Options** and choose an icon in **Select SVG**.

![The Content panel with SVG Options and Select SVG](https://nexterwp.com/wp-content/uploads/2026/09/draw-svg-select-svg.webp)

- Set **Max Width**, the **Border/Stroke Color** and, if you want, turn on **Fill Color**.

- Pick a drawing **Type**, a **Duration** and a **Draw Method**.

![The Type, Duration and Draw Method settings of Draw SVG](https://nexterwp.com/wp-content/uploads/2026/09/draw-svg-type.webp)

- Save and scroll to the icon on the live page.

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| SVG Options | **Pre Build SVG** (60+ built-in icons) or **Custom Upload** (your SVG file) | Pre Build SVG |
| Select SVG / Upload SVG | The icon or file to animate | App |
| Max Width | Largest size of the icon, per device | — |
| Border/Stroke Color | Colour of the drawn lines | #8072fc |
| Fill Color | Fills the shapes with a colour | Off |
| Type | **Delayed** (lines start one after another with overlap), **Sync** (all together), **One-By-One** (each line after the previous) or **Scenario-Sync** | Delayed |
| Duration | Length of the drawing in animation frames; 90 is about 1.5 seconds | 90 |
| Draw Method | **On Scroll** (draws when the icon comes into view) or **On Hover** | On Scroll |
| Alignment, Link | Position of the icon and an optional link | Center |

There is no Style tab. The **Advanced** tab holds the options shared by all Nexter Blocks.

## How It Behaves

- **On Scroll:** the lines stay hidden until the icon enters the screen, then draw once.- **On Hover:** the icon is shown fully drawn when the page loads, and the drawing replays each time the pointer moves over it.- It works the same in the free plugin and with Nexter Blocks Pro.

## Limitations

- **There is no loop setting.** On Scroll draws once; use On Hover to replay.- Only line-based SVGs animate well. Filled shapes without strokes show little drawing.- The icon has no alt text setting; screen readers hear “icon”.

## Troubleshooting

### The icon does not animate

It may already be on screen when the page loads with On Scroll. Scroll away and back, or use On Hover to test.

### I cannot upload my SVG file

Only administrators and editors can upload SVG files by default. For other roles, turn on **SVG Upload** in Nexter Extension and choose the roles.

## Related Docs

- [Add a custom animated SVG icon](https://nexterwp.com/docs/add-custom-animated-svg-icon-in-wordpress/)- [Add smooth scroll in WordPress](https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/)- [Advanced tab options for Nexter Blocks](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)