A comprehensive toolkit for generating, optimizing, and styling accessible Scalable Vector Graphics.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install svg
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 svg 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?
The SVG skill is a specialized utility designed for developers and designers who need to manage vector assets programmatically. It streamlines the creation of high-quality graphics by enforcing best practices such as proper viewBox configuration, CSS-friendly styling via currentColor, and full screen-reader accessibility. As part of the Openclaw Skills library, this tool ensures that your graphics remain scalable, performant, and easy to maintain across complex web projects.
SVG Use Cases
- Creating responsive UI icons that scale perfectly across all screen sizes.
- Automating the addition of ARIA roles and title elements for web accessibility compliance.
- Developing theme-aware graphics that adapt to light and dark modes using CSS.
- Optimizing raw SVG exports to remove unnecessary metadata and reduce file bloat.
- Maintaining a consistent design language by persisting user-specific graphic preferences.
How SVG Works
- The skill evaluates the intended use case to determine the optimal viewBox and scaling parameters.
- It applies accessibility logic, inserting role="img" and title tags for informative graphics or aria-hidden for decorative ones.
- The skill generates clean SVG markup, avoiding hardcoded fill attributes to ensure compatibility with external CSS.
- It integrates with optimization workflows to strip redundant XML namespaces and editor-specific metadata.
- It references a local memory file to adapt to the user's preferred defaults for sizing, naming, and optimization levels.
SVG Setup
To initialize the SVG skill and enable persistent preference tracking, create the required memory directory and file in your home folder:
mkdir -p ~/svg
touch ~/svg/memory.md
This setup allows the tool to store your unique design system defaults within the Openclaw Skills environment.
SVG Data Schema & Taxonomy
The skill manages its operational logic and user data through a structured system of reference files and a central memory store:
| Data Component | Description |
|---|---|
~/svg/memory.md |
Stores user-defined defaults for viewboxes, optimization tools, and sizing preferences. |
viewbox.md |
Technical reference for scaling logic and coordinate system bounds. |
accessibility.md |
Taxonomy for screen reader support, including ARIA attributes and title placement. |
optimization.md |
Configuration rules for SVGO and metadata removal strategies. |
styling.md |
Framework for implementing CSS-based theming and currentColor integration. |
SVG Advanced Features
- Intelligent memory persistence via
~/svg/memory.mdthat learns and applies your preferred icon defaults and optimization presets. - Support for currentColor variable injection, allowing SVGs to be styled dynamically via parent element text color.
- Context-aware accessibility modes that automatically distinguish between informative and decorative assets.
- Advanced viewBox management to prevent scaling issues common in fixed-width vector exports.
- Compatibility with multi-agent workflows within the Openclaw Skills ecosystem for automated asset pipelines.
SKILL.md
Loading
Related Openclaw Skills
Sui
A comprehensive skill for managing Sui blockchain interactions, focusing on its unique object model and Move smart contract ecosystem.
Subscriptions
A specialized AI coding agent skill designed to track, manage, and optimize recurring subscription costs and renewal dates within a structured markdown workspace.
Strategy
A sophisticated strategic planning skill that uses proven frameworks and cognitive bias protection to design robust, actionable plans.
Storytelling
A narrative-engineering skill for crafting persuasive, emotionally resonant stories with structured arcs and audience-first framing.
Swedish Language Naturalizer
A linguistic optimization skill that transforms rigid, formal AI-generated Swedish into authentic, casual, and human-sounding communication.
Switzerland
A specialized planning tool for navigating Switzerland's complex Alpine rail networks, mountain logistics, and regional travel requirements.
METADATA
Featured*
