SuperAPI AI 工具集

svg-creator

设计与创作

查看项目

更新于 10-16 07:58

技能介绍

用途:生成、修改、审查、校验并打包高质量 SVG,涵盖图标、插画、图表、流程图、Logo、图案及内联 SVG 代码。默认输出不依赖 CSS 引擎,能在各类合规渲染器中一致呈现。

主要能力与规则:根元素始终带 xmlns 与 viewBox,不输出已废弃的 version、baseProfile、DOCTYPE、ENTITY、xml-stylesheet。默认不使用 style 元素、style 属性、CSS 变量与 @keyframes,动效仅用 SMIL(animate、animateTransform、animateMotion、set)。路径数据以 M/m 开头,注意 S/T 需与前一条匹配的曲线配对,圆弧恰取七个值且标志为单个 0 或 1。颜色用表现属性显式指定,避免默认 currentColor;描边图标需 fill="none"。渐变、遮罩与 clipPath、滤镜、marker 的默认单位与区域差异均有说明,备注了滤镜区域默认裁剪阴影、mask-type 默认 luminance 等常见陷阱。

可访问性与安全:有意义的图形用 role="img"、graphics-document 或 graphics-symbol,并把 title、desc 作为根的直接首子元素,用 aria-labelledby 引用;纯装饰图形设 aria-hidden="true" 与 focusable="false"。不可信场景需移除 script、on* 事件属性、javascript: URL、foreignObject、外部资源引用、data:image/svg+xml;建议消费方用 DOMPurify(USE_PROFILES: {svg: true, svgFilters: true})处理,服务端解析禁用外部实体。

使用方式:先确定输出类型与 viewBox、色板、可访问性模式;写作干净缩进的独立标记;可用时运行校验脚本:python3 ${CLAUDE_SKILL_DIR}/scripts/validate_svg.py output.svg --strict,直到无错误;无法执行时可对照 references/svg-validation-checklist.md 人工检查。按需加载 quality-standard、templates、path-guide、security 等参考文件。输出为完整 .svg 文件或完整内联 <svg> 元素。

限制:资料未提供具体价格、平台支持范围与性能基准之外的更多细节;选择是否使用 currentColor 或 style 仅在用户明确要求 Web 专用输出时例外。