什么是 SVG？

SVG 技能是为需要以编程方式管理矢量资源的开发人员和设计师设计的专业工具。它通过强制执行最佳实践（如正确的 viewBox 配置、通过 currentColor 实现的 CSS 友好样式以及完整的屏幕阅读器无障碍支持）来简化高质量图形的创建。作为 Openclaw Skills 库的一部分，此工具可确保您的图形在复杂的 Web 项目中保持可扩展性、高性能且易于维护。

下载入口:https://github.com/openclaw/skills/tree/main/skills/ivangdavila/svg

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

SVG 应用场景

• 创建可在所有屏幕尺寸下完美缩放的响应式 UI 图标。
• 自动添加 ARIA 角色和 title 元素以符合 Web 无障碍标准。
• 开发可使用 CSS 适配深色和浅色模式的主题感知图形。
• 优化原始 SVG 导出文件，移除不必要的元数据并减小文件体积。
• 通过持久化用户特定的图形偏好设置来保持一致的设计语言。

1. 该技能评估预期的使用场景，以确定最佳的 viewBox 和缩放参数。
2. 应用无障碍逻辑，为信息性图形插入 role="img" 和 title 标签，或为装饰性图形插入 aria-hidden。
3. 生成干净的 SVG 标记，避免硬编码 fill 属性，以确保与外部 CSS 的兼容性。
4. 集成优化工作流，剔除冗余的 XML 命名空间和编辑器特定的元数据。
5. 参考本地内存文件，以适配用户在尺寸、命名和优化级别方面的首选默认设置。

SVG 配置指南

要初始化 SVG 技能并启用持久化偏好跟踪，请在您的主目录下创建所需的内存目录和文件：

mkdir -p ~/svg
touch ~/svg/memory.md

此设置允许该工具在 Openclaw Skills 环境中存储您独特的设计系统默认值。

SVG 数据架构与分类体系

该技能通过参考文件和中央存储器的结构化系统来管理其运行逻辑和用户数据：

name: SVG
version: 1.1.0
changelog: "Restructured with auxiliary files for focused reference"
description: Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.
metadata: {"clawdbot":{"emoji":"??","requires":{},"os":["linux","darwin","win32"]}}

Quick Reference

Topic	File	Key Trap
viewBox & Scaling	viewbox.md	Missing viewBox = no scaling
Screen Readers	accessibility.md	role="img" + title as first child
SVGO Config	optimization.md	Default removes viewBox/title
Inline vs img	embedding.md	cannot be styled with CSS
currentColor	styling.md	Hardcoded fills block theming

Critical Defaults

Common Mistakes Checklist

• viewBox present (not just width/height)
• Coordinates within viewBox bounds
• No hardcoded fill="#000" if theming needed
• role="img" +