A lightweight, zero-dependency JavaScript library for programmatically manipulating and animating SVGs using a highly readable, chainable API.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install svgjs
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install svgjs using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is SVG.js?
SVG.js is a lightweight, zero-dependency library designed to simplify SVG manipulation and animation on the modern web. It provides a clean, chainable API that fully covers the SVG specification, allowing developers and automated workflows to dynamically draw shapes, apply gradients, manage masks, configure events, and orchestrate complex vector animations without direct native DOM overhead.
By leveraging this ecosystem through Openclaw Skills, AI agents and engineers can programmatically generate, scale, and modify assets, construct visual data structures, and build interactive UI components with minimal memory footprint.
SVG.js Use Cases
- Creating and manipulating SVG elements programmatically in frontend projects.
- Building dynamic data visualizations, dashboards, and custom vector charts.
- Designing keyframe-based visual animations and motion graphics directly in the browser.
- Generating scalable vector components that resize seamlessly without losing rendering quality.
How SVG.js Works
- Instantiate the Document: Start by calling the 'SVG()' entry point to bind to an existing DOM element, create an element from a fragment, or construct a new document.
- Set Explicit Bounds: Always call '.size(width, height)' to establish the viewport bounds, as the default canvas footprint defaults to 0x0.
- Render Shapes & Text: Chain element constructors like '.rect()', '.circle()', or '.path()' to quickly add scalable geometry.
- Apply Style Attributes: Use chainable methods like '.fill()', '.stroke()', or '.css()' to define visual elements and distinct inline styling.
- Animate Vector Parameters: Trigger transitions via '.animate()' which returns a Runner instance to coordinate sequential timelines, easing configurations, and loops.
SVG.js Setup
Install the SVG.js core package via npm:
npm install @svgdotjs/svg.js
Import the library into your project files:
import { SVG } from '@svgdotjs/svg.js'
SVG.js Data Schema & Taxonomy
SVG.js organizes layout elements and configurations using modular structural concepts. Below is a map of the primary taxonomy:
| Section | Reference Category | Core Capabilities |
|---|---|---|
| Shapes | Vector Elements | 'rect()', 'circle()', 'ellipse()', 'line()', 'polyline()', 'polygon()', 'path()' |
| Visuals | Media & Styling | 'text()', 'image()', 'mask()', 'gradient()', 'pattern()' |
| Layouts | Containers | 'group()', 'nested()', 'defs()', 'symbol()', 'link()' |
| Motion | Animation & Runners | 'animate()', 'Runner', 'Timeline', ease controllers |
| Math | Internal Classes | 'Color', 'Matrix', 'Point', 'Box', 'PointArray', 'PathArray' |
SVG.js Advanced Features
- Chained Animation Timelines: Utilize sequential Runner instances to compose complex coordinate schedules and delays without nested callbacks.
- Universal Coordinate Positioning: Apply intuitive center offsets (such as '.cx()' and '.cy()') to all elements, bypassing manual native browser SVG layout math.
- Structure Morphing: Smoothly interpolate path coordinates and vector structures containing identical command architectures.
- Extensible Architecture: Easy subclassing and global namespace extensions to write custom plugins, import raw SVG markup, and extend standard capabilities.
SKILL.md
Loading
Related Openclaw Skills
CodeGraph Tool
A local-first code intelligence tool that builds a semantic knowledge graph using tree-sitter and SQLite, exposing it to AI agents via MCP.
Separated: Trump Family Separation Policy Analysis Tool
An interactive investigation and research toolkit based on Jacob Soboroff's 'Separated' to analyze the Trump administration's family separation policy.
The Elephant Whisperer
An interactive AI coding agent skill that delivers actionable insights on trust, non-forceful leadership, and interspecies communication based on Lawrence Anthony's legendary conservation work.
1-2-3 Magic Parenting Assistant
An AI-powered parenting companion that helps parents apply the evidence-based 1-2-3 Magic framework to eliminate bad behavior, encourage positive routines, and build stronger family relationships.
The Diabetes Code AI Skill
An AI-powered health toolkit designed to guide users through Dr. Jason Fung's evidence-based strategies for naturally reversing type 2 diabetes and metabolic syndrome.
Secure Workspace
An elegant, age-based encryption skill to protect workspace secrets, API keys, and sensitive tokens in repositories and backups.
Featured*
