---
title: "SVG Draw"
url: "https://divitorque.com/docs/svg-draw.md"
canonical: "https://divitorque.com/docs/svg-draw/"
published: "2026-08-20"
modified: "2026-08-20"
author: "Fahim Reza"
tags:
  - "Modules"
---

# SVG Draw

The **SVG Draw** module animates an SVG so its strokes draw themselves, like a pen tracing the artwork. Trigger it on scroll, on page load, or on hover, and control the timing of every stroke.

![Divi SVG Draw module with a fully drawn stroke animation](https://divitorque.com/wp-content/uploads/2026/08/divi-svg-draw-module-demo.png)

## How to add the SVG Draw module

1. Add a section and row, then add the **SVG Draw** module.
2. Paste SVG code or pick an SVG file from the media library.
3. Choose the trigger and tune the draw timing.

## Content

### Source

- **SVG Source**: paste code directly or use a media library file.
- **Decorative** hides the graphic from screen readers, or set an **Accessible Label** when it carries meaning.

### Animation

- **Draw On**: scroll into view, page load, or hover.
- **Viewport Offset** controls how far into view the module must be before drawing starts.
- **Redraw Each Time** replays the animation whenever the module re-enters the viewport.
- **Draw Duration**, **Start Delay**, **Stagger Between Strokes**, and **Easing**.

## Design

- **Stroke Color** and **Stroke Width** override the SVG's own stroke.
- **Also Draw Circles And Rectangles** converts basic shapes so they animate too.
- **Fill**: outline only, or fill after drawing, with a **Fill Color**.
- **Width** and **Alignment**.

## Tip

Line art with real strokes draws best. If your SVG is built from filled shapes, enable "Also Draw Circles And Rectangles" or export a stroked version of the artwork.