360 Secure SkillHub
360 安全技能中心

SVG

提供 SVG 图形创建与优化指引：正确设置 viewBox 与缩放，添加 role/title 无障碍属性或 aria-hidden，区分内联与 img 嵌入的样式限制，使用 currentColor 支持主题，并提示 SVGO 默认配置的坑；通过 ~/svg/memory.md 记录用户偏好。

ivangdavila
ivangdavila
热度 91.12
最近更新 2026-05-11 16:09:51
分类：创作依赖：代码执行 / 读写文件应用场景：图像生成 / 品牌素材 / UI 原型 / 代码生成

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add svg
Metadata
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 <img> cannot be styled with CSS
currentColor styling.md Hardcoded fills block theming

Critical Defaults

<!-- Minimum viable SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path d="..."/>
</svg>

Common Mistakes Checklist

  • viewBox present (not just width/height)
  • Coordinates within viewBox bounds
  • No hardcoded fill="#000" if theming needed
  • role="img" + <title> for informative SVGs
  • aria-hidden="true" for decorative SVGs
  • Unique IDs across all inline SVGs on page
  • xmlns included for external .svg files

Memory Storage

User preferences persist in ~/svg/memory.md. Create on first use.

## User Preferences
<!-- SVG workflow defaults. Format: "setting: value" -->
<!-- Examples: default_viewbox: 0 0 24 24, prefer_inline: true -->

## Accessibility Mode
<!-- informative | decorative -->

## Optimization
<!-- Tool and settings. Format: "tool: setting" -->
<!-- Examples: svgo: preset-default, remove_metadata: true -->

## Icon Defaults
<!-- Fill and sizing preferences -->
<!-- Examples: fill: currentColor, default_size: 24x24 -->

Empty sections = use skill defaults. Learns user preferences over time.